مقدمة css

أهلا بكم في كود ويب
أهلا بكم في درس جديد من دروس css
css هي لغة تنسيق صفحات الويب ومن خلالها نستطيع تنسيق موقعنا كما نريد من حيث الألوان والخطوط والخلفيات وتوزيع موقعنا لعدة أجزاء بحيث يكون تنسيق الموقع مرتب ومنسق بطريقة جيدة مما تساعد الزائر بتصفح الموقع والتنقل من صفحة إلى أخرى بسهولة.
كما أن التنسيق الجيد واختيار الألوان المناسبة والمريحة للعين يمكن أن تجذب الزائر للعودة إلى الموقع مرة أخرى بالإضافة إلى المحتوى الجيد الذى جاء الزائر إلى موقعك من أجله ، فإذا كان المحتوى جيد ومفيد ولكن التنسيق غير جيد مما يسبب تشتت الزائر لتصفح موقعك وقد ينفر منه في أسرع وقت وقد لا يعود إليه مرة أخرى.

كيف يتم كتابة كود css

يوجد ثلاث طرق لكتابة كود css
1- كتابة الأكواد في ملف خارجي أى منفصل عن أكواد html ومحتوى موقعك ، كما يمكنك التعديل على ملف css الخارجي بسهولة. وهذا الطريقة الأفضل
2 - كتابة كود css ضمن عنصر style مع وسم الفتح والإغلاق
3 - يمكن كتابة كود css ضمن العنصر المراد تنسيقه وباستخدام عنصر style ولكن هذه الطريقة قد تكون متعبة وصعوبة التعديل على كود css أو تعديل المحتوى لأن الصفحة ستكون مليئة بالأكواد css و html مما يأخذ بعض الوقت للوصول إلى الكود المراد التعديل عليه ، ولكن هذه الطريقة يمكن استخدامها فى حالة إذا أردنا التعديل على عنصر محدد وليس الموقع ككل

كيف يتعرف css على معرفات html

إذا استخدمنا فئة class فيكون تعريفها بـ css برمز نقطة . ثم المعرف
ثم إضافة رمز {} وكتابة أكواد css بين هذين الرمزين
وإذا استخدمنا فئة id فيكون تعريفها بـ css برمز الشباك # ثم المعرف
ثم إضافة رمز {} وكتابة أكواد css بين هذين الرمزين
<div class='hd'></div>
<div id='hd'></div>
.hd {نكتب هنا خصائص وقيم css}
#hd {نكتب هنا خصائص وقيم css}

كتابة كود css في ملف خارجي

لكتابة كود css فى ملف خارجي ، قم بإنشاء صفحة جديدة ثم قم بكتابة أكواد css التى تريدها حتى تناسب موقعك ثم احفظ الملف بإسم إسم تريده مثلا style ويجب أن ينتهى ملف css بهذه الصيغة .css مثال style.css بعد ذلك يمكنك استدعاء ملف css عن طريق هذا الكود ويتم إضافة قبل نهاية وسم </head>

<head>
<link href='#' rel='stylesheet' type='text/css'/>
</head>

نقوم باستبدال رمز # بمسار ملف css

كتابة كود css ضمن عنصر style

يمكن أيضا كتابة كود css ما بين عنصر style وفي نفس صفحة html يمكن إضافة الكود في أول الصفحة قبل نهاية وسم head

<div class='mm'>مرحباً بك في كود ويب</div>

فى المثال استخدمنا عنصر div لإنشاء طبقة ثم class ثم المعرف وقد قمنا بتسميته بـ mm يمكنك تسمية المعرف كما تشاء ثم اغلقنا عنصر div
والآن سنقوم بتنسيق كود css على هذا المعرف mm وفي حالة إذا بتكرار نفس المعرف فإنه سيطبق عليه نفس التنسيق ذا ا

<style>
.mm {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    background: #eee;
    line-height: 100px;
    text-align: center;
}
</style>


النتيجة

مرحباً بك في كود ويب

كتابة كود css ضمن عنصر html المراد تنسيقه

في المثال التالى قمنا بإضا 3 طبقات باستخدام عنصر div ثم استخدمنا فئة class ثم جعلنا المعرف لـ 3 طبقات بإسم ms ثم قمنا بإضافة وسم style ضمن عنصر div وجعلنا لكل معرف بلون مختلف عن الأخر

<div class='ms' style='color:red;'>مرحباً بك في كود ويب</div>
<div class='ms' style='color:blue;'>مرحباً بك في كود ويب</div>
<div class='ms'>مرحباً بك في كود ويب</div>

النتيجة

مرحباً بك في كود ويب
مرحباً بك في كود ويب
مرحباً بك في كود ويب