بنية CSS

تتكون مجموعة قواعد CSS من محدد وكتلة إعلان:

يشير المحدد/Selector إلى عنصر HTML الذي تريد تنسيقه.

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

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

دائمًا ما ينتهي إعلان CSS بفاصلة منقوطة ; ، وتحيط كتل الإعلان بأقواس معقوفة. { }

في المثال التالي ، ستتم محاذاة جميع عناصر <p> إلى المنتصف ، بلون أحمر للنص:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: blue;
    text-align: center;
} 
</style>
</head>
<body>
<p>Hello World!</p>
<p>هذه قطعة تم تنسيقها ب css</p>
</body>
</html>

محددات CSS

تُستخدم محددات CSS “للبحث” (أو تحديد) عناصر HTML بناءً على اسم العنصر والمعرف والفئة والسمة والمزيد.


عنصر محدد

يحدد محدد العنصر العناصر بناءً على اسم العنصر.

يمكنك تحديد جميع عناصر <p> في صفحة مثل هذه (في هذه الحالة ، ستتم محاذاة جميع عناصر <p> مع لون نص ازرق

مثال

<!DOCTYPE html>
<html>
<head>
<style>
p {
    text-align: center;
    color: blue;
} 
</style>
</head>
<body>
<p>يتم تطبيق تعديل اللون والموضع علي جميع الفقرات</p>
<p>وهذا ايضا</p>
<p id="test1">وهذا ايضا</p>
<p class="test2">وهذا ايضا</p>
</body>
</html>


محدد id

يستخدم محدد id سمة id لعنصر HTML لتحديد عنصر معين.

يجب أن يكون معرف العنصر فريدًا داخل الصفحة ، لذلك يتم استخدام محدد الهوية لتحديد عنصر فريد واحد!

لتحديد عنصر بمعرف معين ، اكتب حرف التجزئة (#) ، متبوعًا بمعرف العنصر.

سيتم تطبيق النمط أدناه على عنصر HTML الذي يحوي “id=”test1

مثال

<!DOCTYPE html>
<html>
<head>
<style>
#test1 {
    text-align: center;
    color: blue;
}
</style>
</head>
<body>
<p id="test1">مرحبا بالعالم</p>
 <!-- الموصوف فقط idلاحظ ان هذه القطعه لن تتأثر لانه تم وصف االقطعه التي تحوي ال-->
<p>هذه قطعه نص اخر</p>
</body>
</html>

ملاحظة: لا يمكن أن يبدأ اسم الid برقم!


محدد class

يختار محدد الفئة العناصر ذات سمة فئة معينة.

لتحديد عناصر بفئة معينة ، اكتب نقطة (.) ، متبوعًا باسم الكلاس.

في المثال أدناه ، ستكون جميع عناصر HTML التي تحتوي على “class=”right باللون الازرق ومحاذاة لليمين

مثال

<!DOCTYPE html>
<html>
<head>
<style>
.right {
    text-align: right;
    color: blue;
}
</style>
</head>
<body>
<h1 class="right">هذا عنوان وهو محاذ لليمين ولونه ازرق</h1>
<p class="right">هذه فقره وهي محاذيه لليمين ولونها ازرق ايضا</p> 
   <!-- المحدد فقط classلاحظ ان هذه القطعه لن تتأثر لانه تم وصف العناصر التي تحوي ال-->
<p>هذه فقره بدون الكلاس </p> 
</body>
</html>

يمكنك أيضًا تحديد أن عناصر HTML محددة فقط هي التي يجب أن تتأثر بفئة.

في المثال أدناه ، فقط <h1> العناصر التي تحتوي على “class = “right ستكون محاذاة لليمين

حتي وان كانت هناك عناصر اخري تحوي نفس الكلاس لكن من فئه مختلفه

مثال

<!DOCTYPE html>
<html>
<head>
<style>
h1.right {
    text-align: right;
    color: blue;
}
</style>
</head>
<body>
<h1 class="right">هذا عنوان وهو محاذ لليمين ولونه ازرق</h1>
     <!--  h1 وفئته classلاحظ ان هذه القطعه لن تتأثر لانه تم وصف العناصر  التي تحوي ال-->
<p class="right">هذه فقره وهي لم تتأثر برغم احتوائها علي كلاس</p> 
</body> 
</html>

يمكن أن تشير عناصر HTML أيضًا إلى أكثر من فئة واحدة.

في المثال أدناه ، سيتم تصميم العنصر <p> وفقًا “class= “right” class= “large فقط اي ان اي نوع عنصر اخر لن يعمل حتي لو استعمل نفس الكلاس

مثال

<!DOCTYPE html>
<html>
<head>
<style>
p.right {
    text-align: right;
    color: blue;
}

p.large {
    font-size: 350%;
}
</style>
</head>
<body>
<h1 class="right">هذا العنوان لا يتأثر لانه تم تحديد القطع ففقط</h1>
<p class="right">هذا النص بالون الازرق وهو الي اليمين</p>
    <!--  هذه القطعه تحمل صات الكلاسين  وهي الي اليمين ولونها ازرق واكبر ب350 مره -->
<p class="right large">هذه القطعه تجمع بيمن اثنين من الكلاس وتحمل صفات كل من الكلاسين  </p> 
</body>
</html>

ملاحظة: لا يمكن أن يبدأ اسم الclass برقم!


محددات التجميع

إذا كانت لديك عناصر بنفس تعريفات الأنماط ، مثل هذا

h1 {
    text-align: right;
    color: blue;
}

h2 {
    text-align: right;
    color: blue;
}

p {
    text-align: right;
    color: blue;
}

سيكون من الأفضل تجميع المحددات لتقليل الكود.

h1, h2, p {
    text-align: right;
    color: blue;
}

لتجميع المحددات ، افصل بين كل محدد بفاصلة.

في المثال أدناه قمنا بتجميع المحددات من الكود أعلاه:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
    text-align: right;
    color: blue;
}
</style>
</head>
<body>
<h1>عنوان كبير</h1>
<h2>عنوان اصغر</h2>
<p>هذه قطعه</p>
</body>
</html>

تعليقات CSS

تُستخدم التعليقات لشرح الكود ، وقد تساعد عندما تقوم بتحرير الكود المصدري في وقت لاحق.

يتم تجاهل التعليقات من قبل المتصفحات.

يبدأ تعليق CSS بـ / * وينتهي بـ * /. يمكن أن تمتد التعليقات أيضًا إلى عدة أسطر:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: blue;
    /* هذا تعليق في سطر واحد */
    text-align: right;
} 

/* هذا تعليق 
  في عدة 
  اسطر مختلفة
  */
</style>
</head>
<body>
<h1>عنوان كبير</h1>
<h2>عنوان اصغر</h2>
<p>هذه قطعه</p>
</body>
</html>