2- بناء كود CSS وأمثلة تنسيق المحددات

2- بناء كود CSS وأمثلة تنسيق المحددات

تتكون كود CSS من محدد وكتلة تعريف.

VALUE

يشير المحدد إلى عنصر HTML الذي تريد نمط.

تحتوي كتلة التعريف على تعريفات واحدة أو أكثر مفصولة بفواصل منقوطة.

يتضمن كل تعريف اسم خاصية CSS وقيمة مفصولة بقطتين.

يتم فصل تعريفات CSS متعددة مع فاصلة منقوطة، وتحيط كتل الإعلان بواسطة الأقواس المجعدة.

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

مثال كود CSS

  • p هو محدد في CSS (يشير إلى عنصر HTML الذي تريد نمط: <p>).
  • color خاصية، وهي قيمة الخاصية red
  • text-align خاصية، وهي قيمة الخاصية center

محددات CSS

يتم استخدام محددات CSS “للبحث” (أو تحديد) عناصر HTML التي تريد نمطها.

يمكننا تقسيم محددات CSS إلى خمس فئات:

  • محددات بسيطة (حدد العناصر استنادا إلى الاسم  name , معرف id، فئة class)
.para1 {
  text-align: center;
  color: red;
}
#para1 {
  text-align: center;
  color: red;
}

  • محددات الدمج (حدد العناصر استنادا إلى علاقة محددة بينها)
div p {
  background-color: yellow;
}
  • محددات الفئة الزائفة (حدد عناصر استنادا إلى حالة معينة)
selector:pseudo-class {
  property: value;
}
  • محددات العناصر الزائفة (حدد نمطا لجزء من عنصر)
selector::pseudo-element {
  property: value;
}
  • محددات السمات (حدد عناصر تستند إلى سمة أو قيمة سمة)
a[target] {
  background-color: yellow;
}
a[target="_blank"] {
  background-color: yellow;
}
[title~="flower"] {
  border: 5px solid yellow;
}

تشرح هذه الصفحة محددات CSS الأساسية.