CSS(أوراق الأنماط المتتالية) هي عنصر أساسي في تطوير الويب يلعب دورًا مهمًا في التحكم في المظهر المرئي لعناصر HTML على موقع الويب الخاص بك. يوفر مجموعة قوية من القواعد والخصائص التي تحدد كيفية عرض العناصر وتنسيقها وتحديد مواضعها ، مما يسمح لك بتخصيص شكل صفحات الويب الخاصة بك وأسلوبها.
لنبدأ بفهم مفهوم المحددات
تُستخدم المحددات لاستهداف عناصر HTML محددة للتصميم. أحد المحددات الأساسية هو محدد العناصر ، والذي يحدد جميع مثيلات عنصر HTML معين.
على سبيل المثال ، تستهدف قاعدة CSS التالية جميع الفقرات في المستند:
p {
color: blue;
}
في هذا المثال ، p يحدد المحدد كل <p> العناصر ويضبط لون نصها على اللون الأزرق.
محدد شائع آخر هو محدد الفئة
تستخدم الفئات لتجميع العناصر ذات الخصائص المتشابهة. من خلال تعيين فئة لعناصر HTML ، يمكنك استهدافها وتصميمها بشكل جماعي.
هذا مثال:
.blue-text {
color: blue;
}
في هذه الحالة ، .blue-text يستهدف المحدِّد جميع العناصر ذات الفئة blue-text ويطبق اللون الأزرق على نصها.
بالإضافة إلى ذلك ، ID يسمح لك المحدد باستهداف عنصر معين بواسطة معرفه الفريد. ID يتم تخصيصها عادةً لعناصر فردية على الصفحة.
هذا مثال:
#header {
background-color: gray;
}
في هذا المثال ، #header يقوم المحدِّد بتحديد العنصر الذي يحتوي على ال ID header ويطبق لون خلفية رمادية عليه.
بالانتقال إلى بناء جملة CSS ، تتكون كل قاعدة CSS من محدد وكتلة إعلان
يتم وضع كتلة الإعلان في أقواس معقوفة {} وتحتوي على تعريف واحد أو أكثر. تتكون التصريحات من الممتلكات وقيمتها المقابلة.
هذا مثال:
h1 {
font-size: 24px;
color: #333;
}
في مقتطف الشفرة هذا ، h1 يحدد المحدد جميع <h1> العناصر ويضبط حجم خطها على 24 بكسل ولون النص إلى الرمادي الداكن(# 333).
خلال هذه السلسلة ، سوف نستكشف وشرح العديد من خصائص CSS والمحددات ومجموعاتها ، مما يتيح لك إنشاء مواقع ويب جذابة بصريًا ومنظمة بشكل جيد. يمنحك فهم CSS وبناء الجملة الأساسي الأساس للتحكم في جوانب تصميم صفحات الويب الخاصة بك ، مما يضمن تجربة مستخدم فريدة وشخصية. دعنا نتعمق ونكتشف الاحتمالات اللامحدودة لـ CSS!