المحددات وبنية CSS | أساسيات CSS


المحددات وبنية CSS


CSS تعني الأنماط المتتالية. يمنحك هذا الدرس لمحة موجزة عن CSS وكيف تعمل. 


الأنماط في HTML

CSS هي لغة لتصميم الصفحات بناءً على HTML. بينما يوفر HTML بنية الصفحة، يتفاعل CSS مع المتصفح لإنشاء المظهر الصحيح لـ HTML على الشاشة.

على سبيل المثال، يمكنك استخدام HTML  لتحكم في عبارة و CSS لتصميم هذه العبارة. على سبيل المثال، يجب أن  تكون هده العبارة كبيرًا، أحمر اللون في مكان يبعد 50 بكسل عن الزاوية اليسرى للمتصفح. في CSS، تسمى القواعد التي تحدد مظهر جزء معين من الصفحة بالأنماط.

يمكنك إنشاء أنماط للعمل مع أي علامة HTML، على سبيل المثال يمكنك إنشاء أنماط تعمل على تنسيق الصور على الصفحة. على سبيل المثال، يمكن للنمط محاذاة صورة مع عناصر أخرى، وإنشاء حد لوني حول الصورة، وتوفير مسافة 50 بكسل بين الصورة والعناصر الأخرى على الشاشة.

يطبق المستعرض الأنماط التي قمت بإنشائها على النصوص والصور والعناوين وعناصر الصفحة الأخرى. على سبيل المثال، يمكنك إنشاء نمط ينطبق على فقرة معينة في الصفحة ويغير حجم النص ولونه وتذييله فورًا. يمكنك إنشاء أنماط تنطبق على علامات HTML معينة. على سبيل المثال، يعرض المتصفح علامات <h1> على صفحتك بالطريقة نفسها، ولا يهم مكان وجود هذه العلامات في الصفحة، بل ويمكنك تحديد نمطًا ينطبق فقط على علامة معينة تم تمييزها بالفعل بطريقة ما في HTML.

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

هيكل الاسلوب Structure of a Style

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

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

يتضمن النمط في CSS محددًا وكتلة يتم وضع الإعلان فيها:



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

تحتوي كتلة الإعلام نفسها على تعريف واحد أو أكثر مفصولة بفاصلة منقوطة ( ؛ ).

وتشمل سمات CSS وتعاريفها اسم من قيمته بنقطتين ( : ) يتم فصل.

تنتهي التعريفات في CSS دائمًا بفاصلة منقوطة ( ؛ ) وتكون كتلة الإعلام محاطة دائمًا بزوج من الأقواس ( {} ).

يوضح المثال التالي رمزًا يحاذي جميع عناصر <p> في صفحة HTML ويغير لونها إلى اللون الأحمر:

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

المحددات في CSS

تُستخدم المحددات في CSS للبحث عن عنصر HTML أو تحديده بناءً على قيمة الاسم والمعرف والفئة والسمات الخاصة بهذا العنصر.


محدد العنصر

يقوم محدد العنصر بالبحث عن العنصر أو تحديده بناءً على اسم هذا العنصر.

باستخدام المحدد الموضح في المثال أدناه، يمكنك تحديد كل عناصر <p> على صفحة الويب ثم تطبيق كتلة الإعلام عليها:

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

محدد الهوية Id selector

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

يجب أن تكون قيمة معرّف العنصر على الصفحة فريدة، وهذا هو السبب في أن محدد المعرف يحدد أيضًا عنصرًا فريدًا.

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

ينطبق مثال الكود التالي فقط على عنصر بالمعرف "id =" para1.

#para1 {
text-align: center;
color: red;
}

محدد الفئة  Class selector

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

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

في المثال أدناه، تتم محاذاة جميع العناصر التي لها القيمة "class =" center وتتغير قيمة لونها إلى اللون الأحمر.

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

كما هو موضح في المثال أدناه، يمكن قصر دائرة اختيار المحدد على نوع عنصر واحد.

في المثال التالي، تتم محاذاة عناصر الفقرة (<p>) التي تحتوي على القيمة "center =" center ويتم تطبيق اللون الأحمر عليها. 

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

يمكن أن تحتوي عناصر HTML على قيم متعددة لسمة فئة.

في المثال المثال، يحتوي عنصر الفقرة التالي على قيمتين، وسط وكبير، لسمة الفئة، ويمكن أن يكون لكل منهما نمط منفصل في CSS.

<p class="center large">This paragraph refers to two classes.</p>

محددات المجموعة Group selectors

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

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

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

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

من الأفضل استخدام محددات المجموعة لحفظ الكود.

يمكن الكتابة فوق الرمز أعلاه بواسطة محددات المجموعة على النحو التالي. في هذه الطريقة، يتم فصل المحددات بفاصلة ( ، ):

h1, h2, p {
text-align: center;
color: red;
}

التعليقات في CSS

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

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

تبدأ التعليقات في CSS بـ  * / وتنتهي بـ  / * :

p {
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */



كلمات مفتاحية: