الشكل العام لكود CSS
بدايةً، نحن نضيف كود CSS بهدف تحسين طريقة ظهور الأشياء الموجودة في صفحة الويب و التي تم إضافتها بالأساس بواسطة وسوم HTML. من هذا المنطلق فإنه عند كتابة كود CSS يجب تحديد الوسم المراد التعديل على تصميمه و من ثم تمرير الخصائص و القيم المناسبة له.
الآن إذا كانت الصفحة تحتوي على وسم <h1> يمكنك إضافة خصائص CSS له كالتالي.
h1 {
color: blue;
text-align: center;
}
h1 : هو إسم الوسم الذي سيتم إضافة خصائص CSS له و يسمى Selector.
color : يسمى Property و هو الخاصية المراد تعديلها للشيء.
blue : هو قيمة الخاصيّة و يسمى Value.
color: blue; : الخاصيّة و قيمتها مع بعض يقال لهما Declaration.
ملاحظة
يجب وضع فاصلة منقوطة ; بعد كل خاصيّة يتم تعريفها.
آخر خاصيّة يمكنك عدم وضع فاصلة منقوطة لها و لكننا ننصحك بأن تضعها دائماً لأن هذا المتعارف عليه.
أين تكتب كود CSS
يوجد ثلاث أساليب يمكنك إتباعها حتى تضيف كود CSS في صفحات الويب سنذكرها لك تباعاً.
1- أسلوب Inline CSS
أي وسم تضيفه في الصفحة يمكنك إضافة الخاصيّة style له و تمرير كود الـ CSS لها كقيمة بشكل مباشر.
مثال
<h1 style="color:blue; text-align:center;">Hello World!</h1>
جرب الكود
2- أسلوب Internal CSS
يمكنك إضافة الوسم <style> في أي مكان تريده في الصفحة و بداخله تستطيع إضافة خصائص CSS لأي وسم موجود في الصفحة.
مثال
<style>
h1 {
color: blue;
text-align: center;
}
</style>
<h1>Hello World!</h1>
جرب الكود
3- أسلوب External CSS
يمكنك وضع كود الـCSS بداخل ملف إمتداده .css و من ثم تضمينه في الصفحة من بواسطة الوسم <link> و الذي يجب وضعه في الوسم <head>.
مثال
style.css
h1 {
color: blue;
text-align: center;
}
index.html
<!DOCTYPE html>
<html>
<head>
<!-- style.css هنا قمنا بتضمين الملف -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
جرب الكود
أفضل طريقة لكتابة كود CSS
بشكل عام، أي موقع تبنيه عليك تخصيص ملف إمتداده .css لتضع فيه كل خصائص CSS التي ستستخدمها في صفحات الموقع و من ثم تضمن هذا الملف بها بواسطة الوسم <link>.
إضافة كود CSS بشكل مباشر لوسوم HTML من خلال الخاصيّة style أمر يمكنك فعله إن كنت بحاجة للتعديل على تصميم وسم محدد استخدمته بشكل خاص في أحد الصفحات.
إضافة كود CSS في الصفحة بواسطة الوسم <style> أمر تحتاجه في بعض الأحيان إن كنت بحاجة لتخصيص طريقة ظهور شيء في الصفحة و تريد إضافة خصائص لا يمكنك إضافتها بواسطة الخاصية style.
