قواعد الأساس لـ CSS

قواعد CSS

قواعد CSS تتكون من جزأين رئيسيين: المبدأ، ومجموعة من الشروحات.

selector {declaration1; declaration2; ... declarationN }

المبدأ (selector) هو العنصر HTML الذي ترغب في تغيير النمط له.

كل بيانة تتكون من خصية وقيمة.

الخصائص (property) هي الخصائص النمطية (style attribute) التي ترغب في تعيينها. لكل خصية قيمة. يتم فصل الخصائص من القيم بمكane.

selector {property: value}

تقوم هذه السطرية بتعريف لون النص للعنصر h1 كأحمر، وتعيين حجم الخط إلى 14 بكسل.

في هذا المثال، h1 هو مبدأ، color و font-size هي خصائص، red و 14px هي القيم.

h1 {color:red; font-size:14px;}

الشكل التوضيحي أدناه يوضح بنية هذا الكود.

قواعد CSS

إشارة:استخدم الأسهم لتأمين البيانات.

أشكال القيم المختلفة ووحداتها

بالإضافة إلى الكلمة الإنجليزية red، يمكننا استخدام قيمة الألوان السداسية #ff0000:

p { color: #ff0000; }

للإقتصاد في بايتات، يمكننا استخدام شكل CSS المجمع:

p { color: #f00; }

يمكننا استخدام طريقتين لاستخدام قيم RGB:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

لاحظ، عند استخدام RGB بنسبة، حتى إذا كان القيمة صفر، يجب كتابة رمز النسبة المئوية. ولكن في الحالات الأخرى، لا تحتاج إلى القيام بذلك. على سبيل المثال، عندما يكون الحجم 0 بكسل، لا تحتاج إلى استخدام وحدة px بعد الصفر، لأن الصفر هو صفر، مهما كان الوحدة.

لا تنسى كتابة القوائم

إشارة:إذا كان القيمة تتكون من كلمات عديدة، فيجب وضع قوائم على القيمة:

p {font-family: "sans serif";}

بيانات متعددة:

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

p {text-align:center}; color:red;}

يجب أن تشرح كل خاصية في سطر واحد فقط، مما يزيد من وضوح تعريف النمط، مثل هذا:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

الفضاءات والكتابة بالأحرف الكبيرة والصغيرة

معظم قواعد النمط تحتوي على أكثر من قاعدة واحدة، ومعظم القواعد تحتوي على أكثر من بيانة واحدة. استخدام البيانات المتعددة والفضاءات يجعل قواعد النمط أكثر سهولة في التعديل:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

إضافة مساحة لنموذج CSS لا يؤثر على أداء المتصفح، وكذلك، على عكس XHTML، CSS غير حساسة للأحرف الكبيرة والصغيرة. ومع ذلك، هناك استثناء: إذا كان يتعلق الأمر بالعمل مع ملفات HTML، فإن أسماء الفئات والids حساسة للأحرف الكبيرة والصغيرة.