لنعطي مثالاً على ورقة الأنماط - قم بإنشاء ملف style.cssوكتابة الأنماط:

body ( عائلة الخط: Arial، Verdana، Sans-serif؛ /* عائلة الخط */ حجم الخط: 12pt؛ /* حجم خط النص بالنقاط */ لون الخلفية: #f0f0f0; /* لون خلفية صفحة الويب * / color: #000000; /* لون النص الأساسي */ ) h1 ( اللون: #a52a2a; /* لون الرأس */ حجم الخط: 24pt; /* حجم الخط بالنقاط */ عائلة الخط: Georgia, Times, serif ; /* عائلة الخطوط */ وزن الخط: عادي /* نمط النص العادي */ )

هنا قمنا بتعيين أنماط لجسم الصفحة وبالنسبة للعنوان

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

الآن دعونا نربط ورقة الأنماط الخاصة بنا بالموقع:

مرحبا بالعالم!

هذه هي صفحتي الأولى مع أنماط CSS

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

> أنماط CSS الأساسية لإنشاء موقع ويب كقاعدة عامة، تتم كتابة أنماط العرض للحاويات ومحتوياتها في ورقة أنماط، والتي تسمى عادةً stile.css، على الرغم من أنه يمكن تسميتها بأي شيء تريده. الشيء الرئيسي هو أنه على الصفحة في العلامة كان المسار الصحيح لورقة الأنماط

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

يمكنك تعيين نمط يسمى chapka_saita، ثم يتم تعيين فئة للحاوية الموجودة على الصفحة

محتوى

. تحدد ورقة الأنماط أنماط chapka_saita. يبدأ الاسم الموجود في جدول stile.css بنقطة.

Chapka_saita (نشير إلى الأنماط بين قوسين متعرجين)

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

محتوى

يبدأ باسم الحاوية

الرأس (نشير إلى الأنماط بين الأقواس المتعرجة)

يمكنك أيضًا تحديد أنماط للحاويات باستخدام معرف، ثم يبدو هكذا

محتوى

، في ورقة الأنماط يبدأ المعرف برمز التجزئة

#blok1 (نشير إلى الأنماط بين الأقواس المتعرجة)

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

Chapka_saita (بالأقواس المتعرجة النمط الرئيسي للحاوية)
.chapka_saita h1, h2 (نمط العناوين في العلامات

و

لهذه الحاوية)
.chapka_saita a (نمط الروابط الموجودة في هذه الحاوية)
.chapka_saita a:hover ( أنماط الروابط عند تمرير الماوس عليها )
.chapka_saita img (أنماط الصور الموجودة في هذه الحاوية)
الأنماط نفسها مكتوبة بهذه الأقواس المتعرجة ومفصولة بفواصل منقوطة؛

عائلة الخط: Arial؛ يحدد خط الحاوية، والذي يستخدم عادة في العلامة ، فيه كافة محتويات الصفحة

ارتفاع الخط: 1.2؛ يضبط ارتفاع الخط للخط

المسافات البادئة

الحشو: 10 بكسل؛ يضبط المسافة البادئة الداخلية للمحتوى من حدود الحاوية، وفي هذه الحالة تكون المسافة البادئة 10 بكسل، ويمكنك تحديد القيمة كنسبة مئوية، أو في em
الهامش: 5 بكسل؛ يضبط الهوامش الخارجية للحاوية،
الهامش: 10 بكسل 5 بكسل 0 بكسل 15 بكسل؛ يمكن تحديد المسافات البادئة بشكل منفصل لكل جانب
الهامش السفلي: 10 بكسل؛ يمكنك تحديد مسافة بادئة على جانب واحد فقط، وفي هذه الحالة تكون المسافة البادئة من الأسفل 10 بكسل. ويمكن تطبيق الشيء نفسه على الحشو الداخلي.

فيما يلي مثال لأنماط العلامة

النص (الهامش الأيسر: تلقائي؛ الهامش الأيمن: تلقائي؛ العرض: 930 بكسل؛ حجم الخط: 12 بكسل؛ عائلة الخط: Arial؛ ارتفاع الخط: 1.2؛ صورة الخلفية: url(images/fon.jpg); )

أنماط النص

حجم الخط: 12 بكسل؛ يحدد حجم الخط، ويمكن تحديده بالبكسل أو النسب المئوية أو ems
اللون: #0000ff؛ يحدد لون الخط، في هذه الحالة #0000ff باللون الأزرق، يمكنك تحديد كلمة، على سبيل المثال اللون: أخضر؛ أي أن اللون أخضر.
زخرفة النص: لا شيء؛ يزيل الشرطة السفلية، وتستخدم للروابط لإزالة الشرطة السفلية
تحويل النص: أحرف كبيرة؛ جعل جميع أحرف النص كبيرة بدلاً من الأحرف الكبيرة، ويمكنك كتابة معاني أخرى، وعلى العكس من ذلك، إنشاء تسطير علوي أو سفلي أو يتوسطه خط.
وزن الخط: غامق؛ يجعل الخط غامقًا ويمكن استخدام قيم أخرى بدلًا من الخط الغامق
محاذاة النص:يسار؛ يضبط محاذاة النص، في هذه الحالة إلى اليسار، على الجانب الأيسر من الحاوية، ويمكنك ضبط القيمة conter، height.
ظل النص: 1px 2px 1px 0px #000000؛ اللون: #f9f5ed؛ الظل للنص

أنماط الحاويات

لون الخلفية: #DCDCDC؛ يعين لون خلفية للحاوية، في هذه الحالة #DCDCDC باللون الرمادي
صورة الخلفية: url(images/fon.jpg); يضبط صورة الخلفية

الحدود: 1 بكسل صلب #E8E8E8؛ سيتم تعيين حد، العبارة الصلبة تعني حدًا صلبًا، #E8E8E8 هو لون الحدود. يمكنك تحديد حد منفصل لكل جانب، على سبيل المثال border-top: 2px Solid #E8E8E8;
نصف قطر الحدود: 10 بكسل؛ من خلال تقريب زوايا الحاوية، يمكنك تعيين تقريب مختلف عند كل زاوية border-radius: 2px 6px 10px 0px;
ظل الصندوق: #2C2C29 10px 10px 10px; الظل للحاويات

العرض: 926 بكسل؛ يشير إلى عرض الحاوية
الارتفاع: 240 بكسل؛ ارتفاع الحاوية

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

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

إذا كان لديك جهاز Mac، فيمكنك تشغيل الأمثلة في محرر Brackets، تمامًا مثل المفكرة ++بحرية مطلقة. أما بالنسبة للمحرر بين قوسين، فهو مناسب للمستخدمين مايكروسوفت ويندوز، يمكنك بعد ذلك اختيار ما هو أقرب إليك.

إنشاء ورقة أنماط داخلية

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

الخطوة 1: افتح محرر النصوص

اضغط على الأزرار WIN + R في نفس الوقت (مماثلة لـ Start - Run) وسيتم فتح مربع حوار "يجري"أدخل واضغط على Enter (سيفتح البرنامج )، أو قم بتشغيل البرنامج من خلال الاختصار لها.

ستفتح أمامك نافذة البرنامج الرئيسية:

الخطوة 2: إنشاء هيكل الوثيقة

انسخ أو الصق كود HTML التالي في المحرر:

في التعليمات البرمجية النموذجية لهذا البرنامج التعليمي، سأقدم تعليقات إضافية، مظللة باللون الأخضر الفاتح. في HTML، يمكنك استخدام علامة خاصة ، لا يتم عرض النص الموجود داخل هذا العنصر بواسطة المتصفح. في كود CSS، لإضافة تعليق، تحتاج إلى وضع نص التعليق في البنية التالية: /* نص التعليق */. يمكنك تقديم تعليقات في كود CSS داخل الأنماط المضمنة وفي الأنماط الخارجية (في ملف منفصل).

الخطوة 3: إضافة الأنماط المضمنة

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

من الجيد أنني منخرط في تطوير الذات.

يمكنني تعلم CSS في شهر أو أقل

الخطوة 4: عرض صفحة HTML في المتصفح

افتح المثال في المتصفح وتأكد من مطابقة نتيجة مثالنا للصورة:

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

سنقوم الآن بإنشاء ملف منفصل يحتوي على ورقة أنماط ونقوم بتوصيله بملفنا وثيقة HTMLش.

1. في برنامج المفكرة++ إنشاء واحدة جديدة ملف فارغوحفظه تحت اسم page.css (عند حفظ الملف يجب تحديده أوراق الأنماط المتتالية *.css) في نفس المجلد الذي قمت بإنشاء مستند HTML فيه.
2. انقل كود CSS من المثال السابق (محتويات العلامة. الأنماط الداخلية لها الأسبقية على الأنماط الخارجية، ولكنها أقل شأنا من الأنماط المضمنة (المحددة عبر سمة النمط).

   ...
   
   

   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. محدد الهوية

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

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

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

   #الشريط الجانبي (العرض: 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() - يحدد عنصرًا من النوع المحدد في قائمة العناصر وفقًا للموقع المحدد، بدءًا من النهاية؛

   :فقط من النوع - يحدد عنصرًا واحدًا النوع المحددبين العناصر التابعة للعنصر الأصل.

   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.

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

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

   كيف يتم تعيين أنماط 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، فستفوز القاعدة الثانية.

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

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

   
   
   
   شارك هذا المقال:
   مقالات ذات صلة

   
   17 أبريل 2015
   التعليمات: كيفية اعتراض النطاقات عالية الجودة التي تم إصدارها!
   
   17 أبريل 2015
   استعادة نظام التشغيل Windows XP للبدء في حالة تلف أداة تحميل التشغيل
   
   17 أبريل 2015
   تثبيت البرنامج، عملية تثبيت البرنامج على الكمبيوتر المستهدف
   
   17 أبريل 2015
   طريقتان لتثبيت تحديث Flyme على تحديث Meizu Android لجهاز Meizu M3