محدد عالمي

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

* (الهامش: 0؛ الحشو: 0؛)

ولكن يمكن استخدام الحرف "*" في المحددات المركبة.

Ul * (اللون: أحمر)

يقوم هذا الكود بتعيين لون نص أحمر لجميع أحفاد العنصر

.

الطبقات

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

اسم العلامة

في محدد النمط، تتم كتابة العلامة المطلوبة أولاً، ثم تتم الإشارة إلى اسم الفئة من خلال نقطة. يجب أن يبدأ اسم الفئة بحرف لاتيني ويمكن أن يحتوي على أحرف واصلة (-) وشرطة سفلية (_).

مثال عند استخدام الفئات: على موقع الويب، يتم إنشاء القوائم العلوية والجانبية والسفلية باستخدام العلامات

، تحتاج هذه القوائم الثلاث إلى إنشاء ثلاثة أنماط مختلفة. في CSS، يتم إنشاء ثلاث فئات: ul.menu-top، ul.menu وul.menu-bottom.

في نص مستند HTML، يتم إنشاء قوائم متنوعة بالفئة المحددة في سمة الفئة:

فئة = "القائمة أعلى">...


فئة = "القائمة">...


فئة = "القائمة أسفل">...

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

يمكنك إنشاء فئة سيتم تطبيقها على أي علامة. يتم استخدام محدد عالمي لهذا الغرض.

*.اسم الفئة (الخاصية 1: القيمة؛ الخاصية 2: القيمة؛ ...)

يمكن تقصير هذا الإدخال عن طريق إزالة الرمز "*".

اسم الفئة (الخاصية 1: القيمة؛ الخاصية 2: القيمة؛ ...)

محددات الهوية (المعرفات)

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

عند وصف معرف، تتم الإشارة إلى رمز التجزئة (#) أولاً، متبوعًا باسم المعرف.

#اسم التعريف(الخاصية1: القيمة؛ الخاصية2: القيمة؛ ...)

تمامًا مثل اسم الفئة، يجب أن يبدأ اسم المعرف بحرف لاتيني ويمكن أن يحتوي على أحرف الواصلة (-) والشرطة السفلية (_).

محددات السمات

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

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

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

الطبقات الزائفة

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

باستخدام الفئات الزائفة، يتم إنشاء تأثيرات ديناميكية على الصفحة.

بناء جملة الطبقة الزائفة:

المحدد: فئة زائفة(الخاصية1: القيمة؛ الخاصية2: القيمة؛ ...)

يمكنك تطبيق فئات زائفة على معرف أو محددات الفئة (ul.menu:hover (اللون: أخضر)).

للمبتدئين، ألاحظ: في حين أن المطور يأتي بأسماء الفئات والمعرفات بنفسه، فإن أسماء الفئات الزائفة في CSS هي كلمات محجوزة.

تُنفِّذ الفئة الزائفة ‎:active قاعدة النمط إذا كان العنصر نشطًا. على سبيل المثال، يتم تمرير المؤشر فوق الرابط ويتم النقر عليه. فئة زائفة :hover - يتم تمرير مؤشر الماوس ببساطة فوق عنصر ما، على سبيل المثال رابط.

هناك العديد من الفئات الزائفة. يمكن تغطية موضوع الفئات الزائفة بالكامل في مقالة منفصلة. لقد تطرقنا إليها هنا بشكل سطحي فقط.

العناصر الزائفة

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

تعد عناصر CSS الزائفة أيضًا موضوعًا واسعًا يتطلب مقالة منفصلة لتغطيته بالكامل.

بناء جملة العناصر الزائفة هو نفس بناء جملة الفئات الزائفة:

المحدد: عنصر زائف(الخاصية1: القيمة؛ الخاصية2: القيمة؛ ...)

CSS (أوراق الأنماط المتتالية)، أو أوراق الأنماط المتتالية، تُستخدم لوصف مظهر مستند مكتوب بلغة ترميزية. تُستخدم أنماط CSS عادةً لإنشاء وتصميم عناصر صفحات الويب وواجهات المستخدم المكتوبة بلغة HTML وXHTML، ولكن يمكن أيضًا تطبيقها على أي نوع من مستندات XML، بما في ذلك XML وSVG وXUL.

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

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


أرز. 1. هيكل إعلان نمط CSS

أنواع أوراق الأنماط المتتالية وخصائصها

1. أنواع أوراق الأنماط

1.1. ورقة الأنماط الخارجية

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

يمكنك إرفاق أوراق أنماط متعددة بكل صفحة ويب عن طريق إضافة علامات متعددة بالتسلسل ، للإشارة إلى الغرض من ورقة الأنماط هذه في سمة علامة الوسائط. يحدد rel="stylesheet" نوع الارتباط (رابط إلى ورقة الأنماط).

السمة type="text/css" غير مطلوبة بواسطة معيار HTML5، لذا يمكن حذفها. إذا كانت السمة مفقودة، فإن القيمة الافتراضية هي type="text/css" .

1.2. الأنماط الداخلية

الأنماط الداخليةمدمجة في قسم مستند HTML ويتم تعريفه داخل العلامة. الأنماط الداخلية لها الأسبقية على الأنماط الخارجية، ولكنها أقل شأنا من الأنماط المضمنة (المحددة عبر سمة النمط).

...



1.3. الأنماط المضمنة

عندما نكتب الأنماط المضمنة، نكتب كود CSS في ملف HTML، مباشرة داخل علامة العنصر باستخدام سمة النمط:

انتبه لهذا النص.

تؤثر هذه الأنماط فقط على العنصر الذي تم تعيينها من أجله.

1.4. @قاعدة الاستيراد

@قاعدة الاستيراديسمح لك بتحميل أوراق الأنماط الخارجية. لكي يعمل توجيه @import، يجب أن يظهر في ورقة الأنماط (خارجية أو داخلية) قبل جميع القواعد الأخرى:

تُستخدم قاعدة @import أيضًا لتضمين خطوط الويب:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. أنواع المحددات

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

2.1. محدد عالمي

يطابق أي عنصر HTML. على سبيل المثال، * (الهامش: 0؛) سوف يعيد تعيين الهوامش لجميع عناصر الموقع. يمكن أيضًا استخدام المحدد مع فئة زائفة أو عنصر زائف: *:after (أنماط CSS)، *:checked (أنماط CSS) .

2.2. محدد العنصر

تتيح لك محددات العناصر تنسيق جميع العناصر من نوع معين في جميع صفحات الموقع. على سبيل المثال، ستقوم h1 (عائلة الخط: Lobster, cursive;) بتعيين نمط التنسيق العام لجميع عناوين h1.

2.3. محدد الصف

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

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

تعليمات لاستخدام الكمبيوتر الشخصي

.headline (تحويل النص: أحرف كبيرة؛ اللون: أزرق فاتح؛)

2.4. محدد الهوية

يسمح لك محدد المعرف بالتنسيق واحدعنصر محدد. يجب أن يكون المعرف فريدًا ويمكن أن يظهر مرة واحدة فقط في صفحة واحدة.

#الشريط الجانبي (العرض: 300 بكسل; تعويم: يسار;)

2.5. محدد السلالة

تقوم المحددات السليلة بتطبيق الأنماط على العناصر الموجودة داخل عنصر الحاوية. على سبيل المثال، ul li (تحويل النص: أحرف كبيرة؛) - سيحدد جميع عناصر li التي هي أبناء لجميع عناصر ul.

إذا كنت ترغب في تنسيق أحفاد عنصر معين، فأنت بحاجة إلى إعطاء هذا العنصر فئة نمط:

p.first a (اللون: أخضر؛) - سيتم تطبيق هذا النمط على جميع الروابط التابعة للفقرة مع الفئة الأولى؛

p .first a (اللون: أخضر؛) - إذا أضفت مسافة، فسيتم تصميم الروابط الموجودة داخل أي علامة فئة .first التي تنحدر من العنصر

أولاً أ (اللون: أخضر؛) - سيتم تطبيق هذا النمط على أي رابط موجود داخل عنصر آخر، يتم تحديده بواسطة class.first .

2.6. محدد الطفل

العنصر الفرعي هو ابن مباشر للعنصر الذي يحتوي عليه. يمكن أن يحتوي العنصر الواحد على عدة عناصر فرعية، ولكن يمكن أن يحتوي كل عنصر على عنصر أصل واحد فقط. يسمح لك المحدد الفرعي بتطبيق الأنماط فقط إذا كان العنصر الفرعي يأتي مباشرة بعد العنصر الأصلي ولا توجد عناصر أخرى بينهما، أي أن العنصر الفرعي غير متداخل في أي شيء آخر.
على سبيل المثال، p > strong سيحدد جميع العناصر القوية التي هي أبناء العنصر p.

2.7. منتخب الأخت

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

h1 + p - سيتم تحديد جميع الفقرات الأولى مباشرة بعد أي علامة

دون التأثير على بقية الفقرات؛

h1 ~ p - سيحدد جميع الفقرات الشقيقة لأي عنوان h1 وبعده مباشرة.

2.8. محدد السمة

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

[السمة] - جميع العناصر التي تحتوي على السمة المحددة - جميع العناصر التي تم تحديد السمة البديلة لها؛

المحدد [السمة] - عناصر من هذا النوع تحتوي على السمة المحددة، img - فقط الصور التي تم تحديد السمة البديلة لها؛

المحدد[سمة = "قيمة"] - عناصر من هذا النوع تحتوي على السمة المحددة بقيمة محددة، img - جميع الصور التي يحتوي عنوانها على كلمة زهرة؛

Selector[attribute~="value"] - عناصر تحتوي جزئيًا على قيمة معينة، على سبيل المثال، إذا تم تحديد عدة فئات لعنصر مفصول بمسافة، p - فقرات يحتوي اسم فئتها على الميزة؛

محدد[سمة|==قيمة"] - العناصر التي تبدأ قائمة قيم السمات الخاصة بها بالكلمة المحددة، p - الفقرات التي يكون اسم فئتها ميزة أو يبدأ بميزة؛

المحدد [سمة ^ = "قيمة"] - العناصر التي تبدأ قيمة سمتها بالقيمة المحددة، أ - جميع الروابط التي تبدأ بـ http://؛

المحدد [سمة $ = "القيمة"] - العناصر التي تنتهي قيمة سمتها بالقيمة المحددة، img - جميع الصور بتنسيق png؛

المحدد[attribute*="value"] - العناصر التي تحتوي قيمة سماتها على الكلمة المحددة في أي مكان، أ - جميع الروابط التي يحتوي اسمها على book .

2.9. محدد الطبقة الزائفة

الفئات الزائفة هي فئات غير مرتبطة فعليًا بعلامات HTML. إنها تسمح لك بتطبيق قواعد CSS على العناصر عند وقوع حدث ما أو اتباع قاعدة محددة. تصف الفئات الزائفة العناصر بالخصائص التالية:

:hover - أي عنصر يتم تحريك مؤشر الماوس فوقه؛

:focus - عنصر تفاعلي تم التنقل إليه باستخدام لوحة المفاتيح أو تنشيطه باستخدام الماوس؛

:active - العنصر الذي تم تنشيطه بواسطة المستخدم؛

:صالح - حقول النموذج التي تم فحص محتوياتها في المتصفح للتأكد من توافقها مع نوع البيانات المحدد؛

:غير صالح - حقول النموذج التي لا تتطابق محتوياتها مع نوع البيانات المحدد؛

:enabled - جميع حقول النموذج النشطة؛

:disabled - حقول النموذج المحظورة، أي في حالة غير نشطة؛

:in-range - حقول النموذج التي تقع قيمها في النطاق المحدد؛

:out-of-range - حقول النموذج التي لا تقع قيمها ضمن النطاق المحدد؛

:lang() - عناصر تحتوي على نص باللغة المحددة؛

:not(selector) - العناصر التي لا تحتوي على المحدد المحدد - الفئة أو المعرف أو الاسم أو نوع حقل النموذج - :not() ؛

:target هو عنصر بالرمز # المشار إليه في المستند؛

:checked - عناصر النموذج المحددة (المحددة من قبل المستخدم).

2.10. محدد الطبقة الزائفة الهيكلية

تحدد الفئات الزائفة الهيكلية العناصر الفرعية وفقًا للمعلمة المحددة بين قوسين:

:nth-child(odd) - العناصر الفرعية الفردية؛

:nth-child(even) - حتى العناصر الفرعية؛

:nth-child(3n) - كل العنصر الثالث بين الأطفال؛

:nth-child(3n+2) - يحدد كل عنصر ثالث، بدءًا من العنصر الفرعي الثاني (+2)؛

:nth-child(n+2) - يحدد جميع العناصر بدءًا من العنصر الثاني؛

:nth-child(3) - يحدد العنصر الفرعي الثالث؛

:nth-last-child() - في قائمة العناصر الفرعية، حدد العنصر ذو الموقع المحدد، على غرار :nth-child() ، ولكن بدءًا من الأخير، في الاتجاه المعاكس؛

:first-child - يسمح لك بتصميم العنصر الفرعي الأول فقط للعلامة؛

:last-child - يسمح لك بتنسيق العنصر الفرعي الأخير للعلامة؛

:only-child - يحدد العنصر الذي هو العنصر الفرعي الوحيد؛

:فارغ - يحدد العناصر التي ليس لها أطفال؛

:root - يحدد العنصر الذي يمثل جذر المستند - عنصر html.

2.11. محدد الفئة الزائفة من النوع الهيكلي

يشير إلى نوع محدد من العلامة الفرعية:

:nth-of-type() - يحدد عناصر مشابهة لـ :nth-child() ، لكنه يأخذ في الاعتبار نوع العنصر فقط؛

:first-of-type - يحدد الطفل الأول من نوع معين؛

:last-of-type - يحدد العنصر الأخير من هذا النوع؛

:nth-last-of-type() - يحدد عنصرًا من النوع المحدد في قائمة العناصر وفقًا للموقع المحدد، بدءًا من النهاية؛

:only-of-type - يحدد العنصر الوحيد من النوع المحدد من بين العناصر الفرعية للعنصر الأصلي.

2.12. محدد العناصر الزائفة

تُستخدم العناصر الزائفة لإضافة محتوى، والذي يتم إنشاؤه باستخدام خاصية المحتوى:

:first-letter - يحدد الحرف الأول من كل فقرة، وينطبق فقط على عناصر الكتلة؛

:first-line - يحدد السطر الأول من نص العنصر، وينطبق فقط على عناصر الحظر؛

:before - يُدرج المحتوى الذي تم إنشاؤه قبل العنصر؛

:بعد - يضيف المحتوى الذي تم إنشاؤه بعد العنصر.

3. مجموعة المحدد

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

img:nth-of-type(even) - سيحدد جميع الصور ذات الأرقام الزوجية التي يحتوي نصها البديل على الكلمة css .

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

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

H1، h2، p، Span (اللون: طماطم؛ الخلفية: أبيض؛)

5. الميراث والشلال

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

5.1. ميراث

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

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

الميراث القسري

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

كيف يتم تعيين أنماط CSS وعملها

1) يمكن وراثة الأنماط من العنصر الأصلي (الخصائص الموروثة أو باستخدام القيمة الموروثة)؛

2) الأنماط الموجودة في ورقة الأنماط أدناه تتجاوز الأنماط الموجودة في الجدول أعلاه؛

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


أرز. 2. وضع المطور في متصفح جوجل كروم

4) عند تحديد نمط، يمكنك استخدام أي مجموعة من المحددات - محدد عنصر، فئة زائفة للعنصر، فئة أو معرف عنصر.

div (الحدود: 1 بكسل صلب #eee؛) #wrap (العرض: 500 بكسل؛).box (عائم: يسار؛). واضح (واضح: كلاهما؛)

5.2. تتالي

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

القاعدة! مهم

يمكن تحديد أهمية القاعدة باستخدام الكلمة الأساسية!important، والتي تتم إضافتها مباشرة بعد قيمة الخاصية، على سبيل المثال،span (font-weight:old!important;) . يجب وضع القاعدة في نهاية التصريح قبل قوس الإغلاق، بدون مسافة. وسيكون لمثل هذا الإعلان الأسبقية على جميع القواعد الأخرى. تتيح لك هذه القاعدة إلغاء قيمة خاصية وتعيين قيمة جديدة لعنصر من مجموعة عناصر في حالة عدم وجود وصول مباشر إلى ملف النمط.

النوعية

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

بالنسبة للمعرف، تتم إضافة 0، 1، 0، 0؛
للفئة 0، 0، 1، 0 يضاف؛
لكل عنصر وعنصر زائف، تتم إضافة 0، 0، 0، 1؛
للنمط المضمن المضاف مباشرة إلى العنصر - 1, 0, 0, 0 ؛
المحدد العالمي ليس له خصوصية.

H1 (اللون: أزرق فاتح؛) /*النوعية 0، 0، 0، 1*/ em (اللون: فضي؛) /*النوعية 0، 0، 0، 1*/ h1 em (اللون: ذهبي؛) /*الخصوصية: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (اللون: أزرق؛) /*النوعية: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .الشريط الجانبي (اللون: رمادي؛) /*النوعية 0، 0، 1، 0 */ #الشريط الجانبي (اللون: برتقالي؛) /*النوعية 0، 1، 0، 0*/ li#الشريط الجانبي (اللون: أزرق؛) /*النوعية: 0، 0، 0، 1 + 0، 1، 0، 0 = 0، 1، 0، 1*/

ونتيجة لذلك، سيتم تطبيق تلك القواعد الأكثر تحديدًا على العنصر. على سبيل المثال، إذا كان العنصر له خاصيتين بقيم 0، 0، 0، 2 و 0، 1، 0، 1، فستفوز القاعدة الثانية.

ترتيب الجداول المتصلة

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

محدديحدد العنصر الذي سيتم تطبيق قاعدة CSS معينة عليه.

المحددات الأساسية

محددات العناصر يقوم هذا المحدد الأساسي بتحديد العناصر التي سيتم تطبيق القاعدة عليها.
بناء الجملة:عنصر
مثال:سيحدد محدد الإدخال جميع العناصر المستخدمة لإنشاء عناصر تحكم تفاعلية في نماذج الويب."> . محددات الفئة يقوم هذا المحدد الأساسي بتحديد العناصر بناءً على قيمة سمة الفئة الخاصة بها.
بناء الجملة: .اسم الفئة
مثال:سيحدد محدد الفهرس جميع العناصر ذات الفئة المقابلة (والتي تم تعريفها في سمة الفئة = "index" أو ما شابه ذلك). محددات المعرف يقوم هذا المحدد الأساسي بتحديد العناصر بناءً على قيمة سمة المعرف الخاصة بها. لا تنس أن المعرف يجب أن يكون فريدًا، أي يُستخدم فقط لعنصر واحد في مستند HTML.
بناء الجملة:#اسم_المعرف
مثال:سيحدد محدد #toc العنصر ذو المعرف toc (الذي تم تعريفه في سمة id = "toc" أو ما شابه ذلك). المحدد العالمي يقوم هذا المحدد الأساسي بتحديد جميع العناصر. كما أنه يأتي في متغيرات مساحة الاسم المحلية والعالمية.
بناء الجملة:*ن|* *|*
مثال:سيحدد المحدد * كافة العناصر. محددات السمات يقوم هذا المحدد الأساسي بتحديد العناصر بناءً على إحدى سماتها و/أو قيمتها.
بناء الجملة:
مثال:سيحدد المحدد جميع العناصر التي تحتوي على سمة التشغيل التلقائي (بغض النظر عن قيمتها).

المجمعات

يقوم المجمّع "+" بتحديد العنصر الذي يقع مباشرة بعد العنصر المحدد إذا كان لديهم أصل مشترك.
بناء الجملة:أ+ب
مثال:سيحدد محدد ul + li أي عنصر يقع مباشرة بعد العنصر
. المحددات ذات الصلة يقوم المجمع "~" بتحديد العناصر التي تلي العنصر المحدد إذا كان لها أصل مشترك.
بناء الجملة:أ~ب
مثال: p ~span سيحدد جميع العناصر ، والتي تقع بعد العنصر، تحدد فقرة من النص.">

داخل أحد الوالدين. محددات الطفل تقوم أداة الدمج ">" بتحديد العناصر التي تعتبر أبناء مباشرين للعنصر المحدد.
بناء الجملة:أ>ب
مثال:سيحدد المحدد ul > li جميع العناصر الموجودة داخل العنصر

. المحددات المتداخلة يختار المجمّع " " العناصر الموجودة داخل العنصر المحدد (بغض النظر عن مستوى التداخل).
بناء الجملة:أ ب
مثال:سيحدد محدد divspan كافة العناصر الموجودة داخل العنصر) هي الحاوية الأساسية لعناصر محتوى التدفق. ولا يؤثر على المحتوى أو التنسيق حتى يتم تصميمه باستخدام CSS. إن كون "> لا يمثل أي شيء بطبيعته. وفي الوقت نفسه، يتم استخدامه لتجميع المحتوى، مما يسمح بتصميمه بسهولة باستخدام ">
.

العناصر الزائفة

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

الطبقات الزائفة

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

تحديد

تخصيص	حالة

آخر تحديث: 21/04/2016

يبدأ تحديد النمط بمحدد. على سبيل المثال:

Div (العرض: 50 بكسل؛ /* العرض */ الارتفاع: 50 بكسل؛ /* الارتفاع */ لون الخلفية: أحمر؛ /* لون الخلفية */ الهامش: 10 بكسل؛ /* المسافة البادئة من العناصر الأخرى */ )

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

على صفحة الويب:

محددات CSS





هناك 3 أقسام في الصفحة، وسيتم تصميمها جميعًا:

الطبقات

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

لتحديد محدد فئة في CSS، يتم وضع نقطة قبل اسم الفئة:

RedBlock (لون الخلفية: أحمر؛)

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

ومن الجدير أيضًا النظر في حالة الأسماء: فالأسماء "مقالة" و"المادة" ستمثل فئات مختلفة.

بمجرد تعريف الفئة، يمكننا تطبيقها على عنصر باستخدام سمة الفئة. على سبيل المثال:

دعونا نحدد ونستخدم عدة فئات:

فئات CSS





معرفات

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

تعريف أنماط المعرفات يشبه تعريف الفئات، حيث يتم استخدام رمز التجزئة # فقط بدلاً من النقطة:

رأس الموقع

المحتوى الرئيسي

تذييل





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

محدد عالمي

بالإضافة إلى محددات العلامات والفئة والمعرفات، يحتوي CSS أيضا على ما يسمى محدد عالميوالتي تمثل النجمة (*). يطبق الأنماط على جميع العناصر الموجودة في صفحة html:

*(لون الخلفية: أحمر;)

تصميم مجموعة من المحددات

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

CSS3

محددات

مجموعة المحدد

بعض النصوص...





يمكن أن تحتوي مجموعة المحددات على محددات العلامات ومحددات الفئة والمعرفات، على سبيل المثال:

H1، #header، .redBlock (اللون: أحمر؛)

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

• محددهي علامة HTML التي سيتم تطبيق النمط عليها. يمكن أن تكون هذه أي علامة، على سبيل المثال،

  أو إلخ.

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

  معنى- تم تعيينه على الخاصية. على سبيل المثال، يمكن أن تكون خاصية اللون باللون الأخضر، #008000، وما إلى ذلك.

  بناء جملة المحددات في CSS هو كما يلي:

  المحدد (الخاصية: القيمة)

  مثال.يمكنك ضبط حدود الجدول مثل هذا:

  الجدول (الحدود: 2 بكسل صلب #FF8C00;)

  هنا بناء جملة المحدد هو: الجدول هو المحدد والحدود هي الخاصية و2px Solid #FF8C00 هي قيمة تلك الخاصية.

  يمكنك تحديد المحددات بطرق مختلفة كما تراه مناسبًا. فيما يلي أنواع المحددات.>

  المحددات القياسية

  هذا هو نفس المحدد الذي رأيته أعلاه. مرة أخرى، مثال آخر لإضفاء اللون على جميع عناوين المستوى الأول:

  H1 (اللون: #8B4513؛)

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

  بدلًا من تحديد عناصر من نوع معين، يقوم المحدد العام ببساطة بمطابقة اسم أي نوع عنصر:

  * (اللون: #808080؛)

  تعرض هذه القاعدة محتويات كل عنصر في وثيقتنا باللون الرمادي.

  المحددات السليلة أو المحددات المتداخلة

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

  .

  Ul em (اللون: #CD5C5C;)

  محددات الصف

  يمكنك تعيين قواعد النمط للعناصر بناءً على سمة الفئة. سيتم تنسيق جميع العناصر التي تحتوي على هذه الفئة وفقًا لقاعدة معينة.

  أزرق (اللون: #0000FF;)

  الطبقة = "الأزرق". يمكنك جعل محدد الفصل أكثر تحديدًا قليلاً. على سبيل المثال:

  H1.أزرق (اللون: #0000FF;)

  مع السمة الطبقة = "الأزرق".

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

  سيتم تنسيق هذه الفقرة مع الفئات مركزو عريض.

  محددات الهوية

  يمكنك تعيين قواعد النمط للعناصر بناءً على سمة المعرف. سيتم تنسيق كافة العناصر التي لها هذا المعرف وفقًا لقاعدة معينة.

  #أزرق (اللون: #0000FF؛)

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

  H1# أزرق (اللون: #0000FF;)

  تعرض هذه القاعدة المحتوى باللون الأزرق للعناصر فقط

  مع السمة معرف = "الأزرق".

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

  #أزرق h2 (اللون: #0000FF؛)

  في هذا المثال، ستظهر جميع عناوين المستوى الثاني باللون الأزرق عندما تكون ضمن علامات تحتوي على السمة معرف = "الأزرق".

  محددات الطفل

  أنت تعرف بالفعل المحددات السليلة. هناك نوع آخر من المحددات التي تشبه إلى حد كبير المحددات الفرعية ولكن لها وظائف مختلفة، وهي المحددات الفرعية. خذ بعين الاعتبار المثال التالي:

  الجسم > p (اللون: #0000FF;)

  ستعرض هذه القاعدة جميع الفقرات باللون الأزرق إذا كانت فرعًا مباشرًا للعنصر . فقرات أخرى موضوعة داخل عناصر الكتابة الأخرى

  أو

  المحددات المجاورة تسمى عناصر HTML التي تتبع بعضها البعض بالعناصر المتجاورة. خذ بعين الاعتبار المثال التالي: قوي + م (اللون: #0000FF؛) ستعرض هذه القاعدة محتويات العلامة باللون الأزرق إذا جاء بعد العنصر . علامات أخرى وليس بعد العلامة ، لن يكون لها أي تأثير على هذه القاعدة. محددات السمات يمكنك أيضًا تطبيق الأنماط على عناصر HTML بسمات معينة. ستطابق قاعدة النمط أدناه جميع عناصر الإدخال التي تحتوي على سمة النوع مع نص القيمة: الإدخال (اللون: #0000FF;) ميزة استخدام محددات السمات هي أن العنصر لا يتغير، ويتم تطبيق اللون فقط على حقول النص المطلوبة. تنطبق القواعد التالية على محدد السمات: p - يحدد جميع عناصر الفقرة ذات السمة lang. p - يحدد جميع عناصر الفقرة التي تحتوي سمة lang على القيمة الدقيقة "ru". p - يحدد كافة عناصر الفقرة التي تحتوي فيها خاصية lang على الكلمة "ru". p - يحدد جميع عناصر الفقرة حيث تحتوي سمة lang على قيم تمثل "ru" بالضبط أو تبدأ بـ "ru". بعض قواعد الأسلوب قد تحتاج إلى تحديد قواعد نمط متعددة لعنصر واحد. يمكنك تعريف هذه القواعد لدمج خصائص متعددة والقيم المقابلة لها في كتلة واحدة، كما هو موضح في المثال التالي: H1 (اللون: #00CED1؛ تباعد الأحرف: .2em؛ تحويل النص: أحرف صغيرة؛ الهامش السفلي: 2em؛ وزن الخط: 700؛) يتم الفصل بين كافة أزواج الخصائص والقيمة بفاصلة منقوطة (;). يمكنك تخزينها على سطر واحد أو عدة أسطر. لقراءة أفضل، احتفظ بها في أسطر منفصلة. لا تقلق بشأن الخصائص المذكورة في الكتلة أعلاه. وسيتم شرح هذه الخصائص في الدروس التالية. محددات التجميع في CSS يمكنك تصميم العديد من المحددات إذا كنت تريد ذلك. ما عليك سوى فصل المحددات بفاصلة، كما هو موضح في المثال التالي: H1، h2، h3 ( اللون: #00CED1؛ تباعد الأحرف: .2em؛ تحويل النص: أحرف صغيرة؛ الهامش السفلي: 2em؛ وزن الخط: 700؛ ) سيتم تطبيق قاعدة النمط هذه على عناصر h1 وh2 وh3. لا يهم ترتيب القائمة عند تجميع المحددات. سيتم تطبيق الإعلانات المقابلة على جميع العناصر الموجودة في المحدد. يمكنك تجميع معرفات المحددات المختلفة معًا كما هو موضح أدناه: #رأس، #محتوى، #تذييل (الموضع: مطلق؛ العرض: 300 بكسل؛ اليسار: 250 بكسل؛) مقالات ذات صلة الوسائط المتعددة القائمة السوداء لجهات الاتصال في سامسونج ويندوز 7 كيفية حذف كلمات المرور المحفوظة في جوجل كروم الشاشات جهاز التوجيه TP-Link TL-WR740N – الإعداد خطوة بخطوة الشاشات هاتف LG Leon: الخصائص والمراجعات إنترنت مراجعة الهاتف الذكي Explay N1: الأول من بين المتساويين شاشة Explay N1 الصغيرة ولكن الساطعة أصحاب الرافعات محولات شبكة USB اللاسلكية TP-Link TL-WN721N وTP-Link TL-WN723N للكمبيوتر المكتبي توصيل محول TP-Link wifi ويندوز 8 المتشممون قيود استخدام المتشممون ويندوز 8 تعلم جافا سكريبت من الصفر بنفسك إنترنت كيفية التحقق مما إذا كان حساب Gmail الخاص بك قد تم اختراقه أين لدي حسابات؟ نوصي ويندوز 7 BIOS: التمهيد من القرص أو محرك أقراص فلاش من وقت لآخر، يحتاج مستخدمو أجهزة الكمبيوتر الشخصية والكمبيوتر المحمول إلى التأكد من أن الكمبيوتر لا يتم تشغيله من القرص الصلب، ولكن من محرك أقراص محمول أو قرص مضغوط/أقراص DVD. يحتاج... مراجعة Xiaomi Mi6 – هل يرقى هاتف Xiaomi الرائد الجديد إلى مستوى التوقعات؟ الشاشات العروض التقديمية والخطط انتقل إلى صفحة أخرى للحصول على معلومات الدروس الشاشات كيفية إعداد الوصول عن بعد إلى محرك أقراص Time Capsule أو AirPort Extreme باستخدام iCloud آخر ماذا تفعل عندما تتأخر لعبة GTA 5 ويندوز 7 محرر الرسم البياني معالجات برنامج محرر ملفات RAW مجاني لعرض الملفات الخام بالتورنت الروسي معالجات دعم نماذج التقارير المنظمة التي يمكن قراءتها آليًا في 1C:Enterprise لإنشاء نموذج يمكن قراءته آليًا كيفية استعادة الملفات المشفرة (تعليمات) استعادة الملفات المشفرة باستخدام ShadowExplorer كيفية تنظيف محرك الأقراص C: تعليمات مفصلة كيفية التسجيل في Mail Ru Mail على جهاز الكمبيوتر؟ القائمة السوداء لجهات الاتصال في سامسونج كيفية حذف كلمات المرور المحفوظة في جوجل كروم جهاز التوجيه TP-Link TL-WR740N – الإعداد خطوة بخطوة هاتف LG Leon: الخصائص والمراجعات مراجعة الهاتف الذكي Explay N1: الأول من بين المتساويين شاشة Explay N1 الصغيرة ولكن الساطعة محولات شبكة USB اللاسلكية TP-Link TL-WN721N وTP-Link TL-WN723N للكمبيوتر المكتبي توصيل محول TP-Link wifi المتشممون قيود استخدام المتشممون تعلم جافا سكريبت من الصفر بنفسك كيفية التحقق مما إذا كان حساب Gmail الخاص بك قد تم اختراقه أين لدي حسابات؟ BIOS: التمهيد من القرص أو محرك أقراص فلاش مراجعة Xiaomi Mi6 – هل يرقى هاتف Xiaomi الرائد الجديد إلى مستوى التوقعات؟ العروض التقديمية والخطط انتقل إلى صفحة أخرى للحصول على معلومات الدروس كيفية إعداد الوصول عن بعد إلى محرك أقراص Time Capsule أو AirPort Extreme باستخدام iCloud ماذا تفعل عندما تتأخر لعبة GTA 5 حقوق الطبع والنشر 2024 - إصلاح الكمبيوتر والكمبيوتر المحمول. بطاقات الفيديو والأقراص الصلبة والإنترنت والشاشات.