يضبط نمط العنصر إذا تم تحديد سمة معينة. معناها ليس مهما في هذه الحالة.
بناء الجملة
[<атрибут>] (وصف قواعد الأسلوب) E[<атрибут>] (وصف قواعد الأسلوب)
يتم تطبيق النمط على تلك العناصر التي تضاف إليها السمة المحددة. غير مسموح بالمسافة بين اسم المحدد والأقواس المربعة.
التسميات
| وصف | مثال | |
|---|---|---|
| <тип> | يشير إلى نوع القيمة. | <размер> |
| أ & ب | يجب أن يتم إخراج القيم بالترتيب المحدد. | <размер> && <цвет> |
| أ | ب | يشير إلى أنك تحتاج إلى تحديد قيمة واحدة فقط من القيم المقترحة (A أو B). | عادي | قبعات صغيرة |
| أ || ب | يمكن استخدام كل قيمة بشكل مستقل أو مع الآخرين بأي ترتيب. | العرض || عدد |
| قيم المجموعات. | [ اقتصاص || يعبر] | |
| * | كرر صفر مرات أو أكثر. | [,<время>]* |
| + | كرر مرة واحدة أو أكثر. | <число>+ |
| ? | النوع أو الكلمة أو المجموعة المحددة اختيارية. | أقحم؟ |
| (أ، ب) | كرر على الأقل A، ولكن ليس أكثر من B مرات. | <радиус>{1,4} |
| # | كرر مرة واحدة أو أكثر مفصولة بفواصل. | <время># |
مثال
واستمراراً لقانون مورفي الشهير والذي ينص على: إذا كان من الممكن حدوث مشكلة، فستحدث بالتأكيد.
، يمكننا أن نقدم ملاحظتنا: بعد عرض صفحة الويب بشكل صحيح في أحد المتصفحات، يتبين أنها لا تظهر بشكل صحيح في متصفح آخر
.
وتظهر نتيجة المثال في الشكل. 1.
أرز. 1. تغيير نمط العنصر اعتمادًا على استخدام سمة العنوان
في هذا المثال، يتغير لون النص الموجود داخل الحاوية عند إضافة سمة العنوان إليها. لاحظ أنه ليست هناك حاجة لتكرار خصائص النمط للمحدد q، نظرًا لأنها موروثة من المحدد q.
تخصيص
تمر كل مواصفات بعدة مراحل من الموافقة.
- التوصية - تمت الموافقة على المواصفات من قبل W3C ويوصى بها كمعيار.
- توصية المرشح ( توصية ممكنة) - المجموعة المسؤولة عن المعيار مقتنعة بأنه يحقق أهدافه، ولكنه يحتاج إلى مساعدة من مجتمع التطوير لتنفيذ المعيار.
- التوصية المقترحة التوصية المقترحة) - في هذه المرحلة يتم تقديم الوثيقة إلى المجلس الاستشاري W3C للموافقة النهائية.
- مسودة العمل - نسخة أكثر نضجًا من المسودة التي تمت مناقشتها وتعديلها لمراجعة المجتمع.
- مسودة المحرر ( مسودة تحريرية) - نسخة مسودة للمعيار بعد إجراء التغييرات بواسطة محرري المشروع.
- مسودة ( مواصفات المسودة) - النسخة المسودة الأولى للمعيار.
محددات السمات هي محددات تسمح لك بتطبيق الأنماط على أي عناصر HTML لها سمة محددة أو قيمة سمة محددة. هناك العديد من الطرق لاستخدامها، ولكن على الرغم من هذه المرونة، نادرا ما يتم استخدام محددات السمات في الممارسة العملية، حيث توجد محددات أكثر ملاءمة. على الرغم من أنها تساعد كثيرًا في بعض الأحيان.
نعم، وكالعادة أقول لك - لا تحاول حتى حفظ كل ما هو مكتوب أدناه إذا كنت تجيده. :) عليك أن تتذكر شيئًا واحدًا من هذا الدرس - ما هو مكتوب في الفقرة الأولى. الباقي تحتاج فقط إلى فهمه وفهمه. لذا.
بناء جملة محدد السمة
لتطبيق الأنماط على عناصر ذات سمة معينة، يجب عليك تحديد هذه السمة بين قوسين مربعين، .
[يصف] ( الخاصية: القيمة؛ ...)
لكي يتم تطبيق الأنماط على العناصر التي لا تحتوي فقط على سمة محددة، ولكن سمة ذات قيمة محددة، تحتاج إلى كتابة علامة المساواة (=) بعد السمة وهذه القيمة، والتي يمكن وضعها بين علامتي اقتباس.
[السمة = "القيمة"] ( الخاصية: القيمة؛ ...)
يمكن أن تحتوي بعض السمات على قيم متعددة مفصولة بمسافات (على سبيل المثال، سمة rel أو class الخاصة بالعلامة، والتي سننظر إليها لاحقًا). لذلك، لتعيين أنماط للعناصر التي تكون إحدى القيم في السمات هي نفسها، تحتاج إلى وضع علامات ~= (مساوية تقريبًا) بعد السمة، ثم كتابة القيمة المطلوبة.
[السمة ~ = "القيمة"] ( الخاصية: القيمة؛ ...)
الخيار الرابع مخصص للسمات التي قد تتكون قيمتها من عدة كلمات مفصولة بواصلة (على سبيل المثال، نفس الفئة ). ويتيح لك تطبيق الأنماط على جميع العناصر التي تكون كلمتها الأولى في قيمة السمة هي نفسها. على سبيل المثال، class="block-left" و class="block-right" . نفس الجزء هنا هو block، لذلك يمكن استخدامه كقيمة.
[السمة|==القيمة"] ( الخاصية: القيمة؛ ...)
الطريقة الخامسة تربط الأنماط بالعناصر التي تبدأ قيم سماتها بنفس النص. على سبيل المثال، src= "images/bird.png" و src= "images/cat.jpg" . هنا نفس الجزء هو الصور/ أو الصور أو الصورة، الخ. وهذا الجزء المطابق هو الذي يتم تسجيله كقيمة.
[السمة ^ = "القيمة"] ( الخاصية: القيمة؛ ...)
مشابه للخامس، لكن التحديد هنا يعتمد على جزء من النص، والذي، على العكس، ينتهي بقيم السمات. لنفترض أن src= "image/bird.png" و src= "picture/dog.png" . من الواضح أن الجزء .png هو نفسه هنا.
[السمة$==القيمة"] ( الخاصية: القيمة؛ ...)
إذا كان من الضروري تحديد العناصر التي تحتوي قيم سماتها على نفس الجزء من النص، ولا يهم مكان القيم، فسيتم استخدام هذه الطريقة. على سبيل المثال، href= "http://site/css/" و href= "http://www.site/html/" . هنا هو نفس الجزء "الموقع". وهكذا، على سبيل المثال، يمكنك تحديد جميع الروابط المؤدية إلى موقع معين.
[السمة * = "القيمة"] ( الخاصية: القيمة؛ ...)
لسوء الحظ، لا يفهم Internet Explorer 6.0 محددات السمات على الإطلاق.
مثال على استخدام محددات السمات في CSS
النتيجة في المتصفح
على الرغم من مرونتها وتنوعها، نادرًا ما يتم استخدام محددات السمات في CSS. على الرغم من أن استخدامها يوفر فرصًا كبيرة لمطوري الويب. إنها تسمح لك بتغيير خصائص عنصر باستخدام سمة معينة، علاوة على ذلك، بقيمة محددة. اعتمادًا على النتيجة التي ترغب في تحقيقها، يتم استخدام صيغ مختلفة لمحددات السمات.
محدد سمة بسيطة
يُستخدم لتعيين نمط السمة إذا كانت قيمة السمة لا تلعب أي دور. ولها بناء الجملة التالي:
[السمة] (الخاصية1: القيمة؛ ...) المحدد [السمة] (الخاصية1: القيمة؛ ...)
على سبيل المثال، حاول كتابة سطر مثل هذا في ورقة الأنماط الخاصة بك:
P (اللون: أحمر؛ /* لون النص */ )
لن يتغير لون النص إلا إذا تم تطبيق سمة محاذاة النص على العلامة p
السمة ذات القيمة
ينطبق عند تحديد سمة ذات قيمة محددة. بناء جملة التطبيق كما يلي:
[السمة = "القيمة"] ( الخاصية 1: القيمة؛ ... ) محدد [السمة = القيمة"] ( الخاصية 1: القيمة؛ ... )
ومن الناحية العملية، على سبيل المثال، يمكن تطبيق ما يلي:
P ( اللون: أحمر؛ /* لون النص */ ) p ( اللون: كحلي؛ /* لون النص */ )
تبدأ قيمة السمة بنص محدد
يمكن تطبيق طريقة تعيين النمط هذه، على سبيل المثال، على الروابط أو العناصر الأخرى التي تبدأ قيم سماتها بأسماء معينة. على سبيل المثال:
الصورة (الهامش: 15 بكسل تلقائي؛)
بناء جملة هذه الطريقة لإعداد الأنماط كما يلي:
[السمة ^ = "القيمة"] ( الخاصية 1: القيمة؛ ... ) المحدد [السمة ^ = "القيمة"] ( الخاصية 1: القيمة؛ ... )
تنتهي قيمة السمة بنص محدد
يتم استخدامه نادرا جدا. عادةً ما يتم استخدام هذه الطريقة لتعيين الأنماط عند إنهاء أسماء أي روابط أو دقة ملفات. بناء الجملة العام هو:
[السمة $ = "القيمة"] ( الخاصية 1: القيمة؛ ... ) محدد [السمة $ = القيمة "] ( الخاصية 1: القيمة؛ ... )
يمكنك استخدام هذه الطريقة مثل هذا:
Img (/* إذا كانت دقة ملف الصورة تنتهي بـ .png */ Margin:10px auto;) a ( /* إذا كان الرابط ينتهي بـ .com */ padding-right: 25px; )
تحتوي قيمة السمة على النص المحدد
في بعض الأحيان تحتاج إلى تعيين أنماط لارتباطات معينة تحتوي على نفس النص في اسم قيمة السمة. بناء جملة الكتابة هو كما يلي:
[السمة*==القيمة"] ( الخاصية1: القيمة؛ ... ) المحدد [السمة*==القيمة"] ( الخاصية1: القيمة؛ ... )
على سبيل المثال، استخدمت نمطًا لتغيير مظهر الروابط التي يظهر فيها الاسم "sdcvoy":
موقع تم إنشاؤه ذاتيًا | لغة HTML | محرك البحث الشهير
ونتيجة لذلك حصلت على ما يلي:
إحدى قيم السمات المتعددة
في كثير من الأحيان، عند تحديد السمات، هناك قائمة بالعديد من القيم مفصولة بمسافة. كما خمنت على الأرجح، يمكنك تعيين خصائص النمط لقيمة واحدة. بناء جملة هذه الطريقة كما يلي:
[السمة ~ = "القيمة"] ( الخاصية 1: القيمة؛ ... ) المحدد [السمة ~ = "القيمة"] ( الخاصية 1: القيمة؛ ... )
أقترح النظر في مثال صغير:
رأس أحمر
يجب أن تبدو النتيجة كما يلي:
واصلة في قيمة السمة
في كثير من الأحيان يتكون اسم قيم السمات من عدة كلمات مفصولة بواصلة. ويحدث أن الكلمة الأولى في العنوان تتكرر. لذلك، بالنسبة لهذه السمات، يمكنك تعيين الأنماط بشكل منفصل. ويتم ذلك بكل بساطة. على سبيل المثال مثل هذا:
القسم أ ( اللون: أخضر؛ /* لون الرابط */ الحشو: 15 بكسل؛ /* الهوامش */ )
بناء الجملة العام للاستخدام هو:
[السمة | = "القيمة"] ( الخاصية 1: القيمة؛ ... ) المحدد [السمة | = القيمة "] ( الخاصية 1: القيمة؛ ... )
قد لا تتذكر استخدام محددات السمات، كما قلت سابقًا أنها نادرًا ما تستخدم، لكنها أداة مرنة جدًا في تطوير الويب. وفي هذه الأثناء أقترح الانتقال إلى الموضوع التالي.
CSS هي أداة قوية لتطوير الويب. إنها تتيح لنا إحياء جميع أفكارنا وأفكارنا تقريبًا.
من المزايا المهمة لـ CSS هي القدرة على تطبيق الأنماط على جميع عناصر الصفحة المتشابهة. لاستخدام هذه الميزة بشكل فعال، يجب أن يكون لديك فهم جيد لها محددات CSS. المحدد هو بالضبط ما يتم تطبيق القاعدة عليه. 
هناك عدة أنواع من محددات CSS. دعنا ننتقل إلى النظر في هذه الأنواع وأمثلة على تطبيقها.
محدد عالمي
يحدد المحدد العام نمط جميع عناصر المستند. يشار إليها بالنجمة (*). على سبيل المثال، يحدد هذا أن جميع العناصر ستكون باللون الأحمر:
* (لون احمر؛)
محددات العناصر
عند كتابة الأنماط لمستند HTML، تكون العناصر عبارة عن علامات HTML (h1، p، img، a، body...). على سبيل المثال:
H1 ( عائلة الخط: Verdana؛ حجم الخط: 12 بكسل؛ اللون: #666؛)
في هذه الحالة، ستكون جميع عناوين المستوى الأول في المستند بخط Verdana وبحجم 12 بكسل وبلون رمادي.
محددات الصف
يتيح لك هذا المحدد تعيين نمط بغض النظر عن نوع العنصر. ولكن لكي تعمل، تحتاج إلى إضافة بعض الملاحظات إلى كود HTML، وهي سمة الفئة مع بعض القيمة التي ستستخدمها عند إنشاء قاعدة CSS.
لنفترض أنك بحاجة إلى تأطير بعض الصور على الصفحة. هذه الصور لها سمة فئة. على سبيل المثال:
وفي ملف النمط نكتب القاعدة:
Border_img (الحدود: 1 بكسل صلب #00f؛)
يمكن تطبيق هذه الفئة على العديد من عناصر الصفحة وليس بالضرورة على الصور فقط. يمكنك تطبيق عدة فئات على عنصر HTML واحد في وقت واحد، والتي يتم كتابتها مفصولة بمسافة:
محددات الهوية
كما يسمح لك بتعيين نمط بغض النظر عن نوع العنصر. ولكن، على عكس محدد الفئة، لا يمكن استخدامه إلا مرة واحدة في المستند. يشار إليها برمز التجزئة (#). تحتوي العلامة على سمة معرف. على سبيل المثال:
#menu (العرض: 25%؛ لون الخلفية: #ccc؛ تعويم: يسار؛)
محددات السمات
يستخدم لتحديد العناصر بناءً على سماتها، بالإضافة إلى قيم هذه السمات.
لتحديد عنصر حسب سمته، بغض النظر عن قيمة هذه السمة، استخدم البنية التالية: [attribute] . على سبيل المثال، كنا بحاجة إلى وضع علامة على الصور ذات الإطار الأحمر الذي تم تعيين السمة alt عليه. نحن نفعل هذا:
img (الحدود: 1 بكسل أحمر خالص؛)
يمكنك فقط تحديد العلامات التي تحمل سماتها معنى محددًا. على سبيل المثال، تحتاج إلى تطبيق القاعدة على جميع العلامات ذات سمة النوع التي تكون قيمتها نصًا - حجم النص هو 16 بكسل. هذا يفعل كما يلي:
(حجم الخط: 16 بكسل؛)
إذا كنت بحاجة إلى تحديد العناصر التي تحتوي سمة فئتها على الكلمة img، فاستخدم الكود التالي:
(الهامش: 5 بكسل؛)
إذا كنت بحاجة إلى تحديد سمة تبدأ قيمتها ببعض النص:
(اللون: #009)؛
إذا كنت بحاجة إلى تحديد سمة تنتهي قيمتها ببعض النص:
(حجم الخط: 10 بكسل؛)
إذا كنت بحاجة إلى تحديد سمة تحتوي قيمتها على بعض النص:
(لون الخلفية:#0cc;)
محددات السليل (محددات السياق)
محدداتيشير المتحدرون إلى وضع قواعد لتلك العناصر الموجودة داخل عنصر معين. سيكون أكثر وضوحا مع مثال. لنفترض أنك بحاجة إلى تمييز الروابط باللون الأحمر فقط الموجودة داخل الفقرة p وهي الروابط التابعة لها:
ع>أ (اللون: أحمر؛)محددات العناصر الشقيقة
لتحديد العناصر المجاورة الموجودة على نفس المستوى ولها نفس الأصل، قم بما يلي:
للاختيار عناصر, تقععلى مستوى ما، مع وجود أحد الوالدين نقوم بذلك.
قوي + em (نمط الخط: مائل؛)العلامات المجاورة في هذه الحالة تكون قوية وem، وكذلك em وa.
محددات الطبقة الزائفة
الفئة الزائفة هي فئة وهمية، ويعتمد وجودها على حالة العنصر أو بنية الوثيقة ككل. غالبًا ما تُستخدم الفئات الزائفة في عناصر نموذج الإدخال أو لتحديد سلوك الروابط أو العناصر النشطة.
على سبيل المثال، تحتاج إلى تغيير لون الروابط التي تمت زيارتها:
ج: تمت زيارته (اللون: #933؛)
أو، على سبيل المثال، قم بتغيير لون النص عند التركيز (وضع المؤشر) على حقل نص النموذج:
الإدخال: التركيز (اللون: أحمر؛)
محددات العناصر الزائفة
العناصر الزائفة هي عناصر وهمية مشروطة تشكل جزءًا من العناصر الموجودة أو يتم إضافتها بالإضافة إلى ذلك إلى المستند. إن محدد العناصر الزائفة ومحدد الفئة الزائفة هما في الأساس نفس الشيء من منظور بناء الجملة. والفرق الوحيد هو في العناصر المختارة.
يحدد CSS2 4 عناصر زائفة: الحرف الأول (:first-letter)، والسطر الأول (:first-line) وتطبيق أنماط خاصة قبل (:before) وبعد (:after) العنصر.
لنجعل، على سبيل المثال، الحرف الأول من كل فقرة له أسلوبه الخاص:
P: الحرف الأول ( عائلة الخط: Verdana، Jennifer، sans-serif؛ حجم الخط: 12 بكسل؛ اللون: #333؛)
باستخدام المحددات، يمكنك بسهولة إنشاء قواعد CSS تنطبق على عدد كبير من العناصر المتشابهة.
مرحبا عزيزي القراء! في منشور اليوم سنواصل دراسة أساسيات CSS وسأقدم لك وصفًا أشكال مختلفة من محددات السمات، ويمكن دعم الحسابات النظرية بإجراءات عملية، باستخدام الأدوات المدمجة لجميع المتصفحات الشائعة ( - حول مفهوم المتصفح والمقارنة بين أفضل متصفحات الويب)، على سبيل المثال، التي كتبت عنها بالتفصيل.
بداية أود أن أعتذر لكم أيها القراء الأعزاء عن غيابي الطويل ولكن هناك أسباب لذلك. أولا، كنت مشغولا بالعديد من المشاريع في وقت واحد لفترة طويلة، الأمر الذي استغرق الكثير من الوقت. ثانيًا، لقد عملت بشكل مثمر على تحسين سهولة الاستخدام (حول سهولة الاستخدام بالتفصيل والتفصيل) للمدونة، وتحسين الصور قدر الإمكان، وتحسين جودتها وفي نفس الوقت تقليل وزنها بشكل كبير، الأمر الذي يجب أن يؤثر بالتأكيد على الترويج المورد في المستقبل بالطريقة الأكثر إيجابية، وبشكل عام، يؤثر بالفعل.
لقد تم القيام بالكثير من الأشياء المفيدة، وسأخبركم بالتأكيد بالتفصيل عن جميع الخطوات التي اتخذتها في المنشورات المستقبلية. حسنًا، وثالثًا، تلقيت شحنة إيجابية من خلال التواصل الوثيق مع الأصدقاء والعائلة خلال عطلة عيد الميلاد ورأس السنة الجديدة. بالمناسبة، أود أن أغتنم هذه الفرصة لأتمنى لجميع قراء المدونة الصحة والنجاح والحب ورفاهية الأسرة في العام الجديد! مثل هذه التمنيات لا تتأخر أبدًا إذا جاءت من القلب.
والآن أنتقل ببطء مباشرة إلى موضوع منشور اليوم. اسمحوا لي أن أذكركم بأننا قد نظرنا بالفعل. سنواصل اليوم دراسة هذا الجزء المهم من دورة أوراق الأنماط المتتالية (CSS) و دعونا نتعرف على محددات السمات وأشكالها المختلفة.
قبل أن أبدأ في تقديم المادة، أود أن أذكرك مرة أخرى بأن المواضيع ونطاق المقالات قد قمت بإعدادها بعناية فائقة وهي موجهة في المقام الأول للمبتدئين. لكنني لا أستبعد أن يجد مشرفو المواقع ذوو الخبرة شيئًا مفيدًا لأنفسهم أيضًا. لذلك، أولئك الذين يرغبون في المستقبل في توفير المال والوقت عند التحرير أو حتى إنشاء موقع الويب الخاص بهم من الصفر، يجب ألا يهملوا بأي حال من الأحوال دراسة أنماط CSS، خاصة وأنني أحاول تقديم المواد بشكل واضح، ويمكن الوصول إليها، وبحجم مضغوط جدًا .
أرجو أن تسامحني على هذا الاستطراد البسيط، فقد كان مهمًا ومناسبًا تمامًا، وأنا متأكد من ذلك. الآن أعود إلى أغنامنا، أي محددات السمات، والتي سأقدم الاختلافات العديدة فيها بالتفصيل أدناه. ومع ذلك، تحتاج أولا إلى اتخاذ بعض الاستعدادات، لأن الدرس سيكون ضخما، والأهم من ذلك، مباشرة بعد كل نقطة من النظرية، ستتمكن من اختبار كل شيء في الممارسة العملية مباشرة على طول المقال. مفتون؟
في الواقع، الأمر بسيط. إن التطور الحديث لتقنيات الويب يجعل من الممكن القيام بمثل هذه الأشياء بسهولة وبساطة. أقصد استخدام أداة مثل Firebug لمتصفح فايرفوكس والتي ذكرتها في بداية التدوينة. ومع ذلك، فقد كتبت بالفعل عن ذلك بتفاصيل كافية، لذلك سأستخدم في هذه المقالة أداة مماثلة لمتصفح شائع آخر، Google Chrome (المزيد حول هذا الموضوع).
هذه الأداة مدمجة بالفعل في أحدث إصدارات Chrome. بالمناسبة، تحتوي جميع المتصفحات الأكثر شعبية على ملحقات مدمجة مماثلة، بما في ذلك Opera (مثل). لذا، أولاً، افتح أي صفحة من أي مورد (يمكنك أن يكون لديك موقع الويب الخاص بك) في Google Chrome (ويفضل أن يكون الإصدار الأحدث).
نختار بعض العناصر على صفحة الويب (على سبيل المثال، سأختار إحدى فقرات مقالة اليوم) وانقر بزر الماوس الأيمن. من قائمة السياق، حدد "عرض رمز العنصر" (البديل هو الضغط ببساطة على المفتاح F12 على لوحة المفاتيح). ستظهر نافذة مشابهة لنافذة Firebug في الأسفل، مع أنماط CSS على اليسار وأنماط CSS على اليمين.
في رأيي، المثال الأكثر وضوحًا لتحديد محددات السمات بأشكال مختلفة هو سمة العنوان (يجب عدم الخلط بينها وبين علامة العنوان)، والتي تحدد المحتوى تلميح. إذا قرأت، فتخيل دور العلامة شعبةوالتي تعتبر مادة البناء الرئيسية للمواقع الحديثة.
إذا كنت ترغب في ذلك، يمكنك فتح divs واحدًا تلو الآخر من خلال النقر على الأيقونة المثلثة السوداء الموجودة على اليسار حتى تصل إلى العلامات صوالذي يتم عرض محتواه على الصفحة على شكل نص مقسم إلى فقرات (أو فقرات وهو نفس الشيء).
ستظهر مساحة محاطة بإطار يمكنك من خلالها تعديل النص، أي حذفه أو تغييره أو إضافته:
في نافذة التحرير هذه، سنقوم بتأليف ثلاث فقرات من خلال تطبيق سمة العنوان على العلامة p، مما يؤدي إلى تشغيل تلميح الأداة. على سبيل المثال، مثل هذا:
1. فقرة (أو فقرة، أذكرك بنفس الشيء) تصف الإطار الزمني لتحديث WordPress:
2. فقرة تعطي معلومات حول الإضافات (المكونات الإضافية):
3. فقرة حول الغياب الطويل لتحديثات البرنامج المساعد:
لذلك، قمنا بإدخال الفقرات الثلاث في حقل التحرير في نافذة أداة المطور. من أجل الموافقة على التغييرات التي تم إجراؤها، ما عليك سوى النقر بزر الماوس الأيسر وسيظهر نص الفقرات الثلاث على صفحة الويب حيث يجب أن يكون بالضبط.
كما ترون، فإن نص تلميح الأداة مطابق تمامًا لقيمة سمة العنوان (تختلف هذه القيمة لكل فقرة). تم إنشاء إطار عمل HTML لتجاربنا، والآن دعنا ننتقل مباشرةً إلى كيفية تغيير مظهرها باستخدام خصائص CSS.
محدد سمة بسيط ومحدد سمة مع القيمة
يقوم محدد السمات البسيط بتعيين نمط العنصر إذا تم إعطاء سمة معينة لبعض العلامات (على سبيل المثال هذا هو العلامة صو سمة العنوان)، وقيمة السمة في هذه الحالة بالذات غير مهمة. سيبدو بناء جملة CSS كما يلي:
اسم السمة محاط بأقواس مربعة ولا يُسمح بوجود مسافة بين اسم المحدد والسمة. يوضح الرسم البياني أعلاه حالتي استخدام: مع وبدون تحديد اسم المحدد.
- في الحالة الأولى، يتم تطبيق نمط CSS المحدد على جميع العلامات التي تطابق السمة المحددة؛
- وفي الحالة الثانية، سيتم تطبيق النمط على علامات معينة فقط.
كما يمكنك أن تتخيل، يتم تعيين خصائص CSS لكل عنصر، بما في ذلك علامة الفقرة p، في مستند style.css. اسمحوا لي أن أذكركم مرة أخرى أنه لتوحيد النظرية عمليًا، نستخدم أداة تحرير html وCSS ممتازة، حيث أضفنا ثلاث فقرات على الجانب الأيسر من النافذة، لكل منها قيمة عنوان خاصة بها.
نقوم بإجراء تغييرات على أكواد html وCSS "سريعًا" على أي صفحة لأي مورد على الإطلاق (يمكنك استخدام إحدى صفحات مدونتي، إذا كان ذلك أكثر ملاءمة). هذه هي ميزة هذه الأدوات التي تمتلكها جميع المتصفحات الشائعة، والتي حتى الشخص الذي ليس لديه موقع ويب خاص به يمكنه تجربتها والحصول على الممارسة اللازمة.
لذا، بعد إضافة الفقرات، يجب أن يظهر نصها على صفحة الويب (فقط لا تقم بإعادة تحميل الصفحة أثناء الدرس العملي، وإلا ستختفي نتائج التغييرات التي أجريتها). بعد ذلك، تحتاج إلى كتابة قاعدة CSS لمحدد بسيط. للقيام بذلك، على الجانب الأيمن من أداة مشرف الموقع، انقر فوق الرابط الذي يؤدي إلى مستند يحتوي على أنماط CSS (على سبيل المثال، ملف style.css):
لنكتب قاعدة CSS لمحدد سمات بسيطبالطريقة الآتية:
ف (اللون: أخضر؛)
لنقم بإضافته مباشرةً إلى نهاية ملف style.css في نافذة التحرير الخاصة بأداة المطور:
بعد هذا التحرير، سيتحول نص جميع الفقرات إلى اللون الأخضر، نظرًا لأن كل فقرة منها تحتوي على سمة عنوان تؤدي إلى تلميح أداة.
كما ذكرنا سابقًا، فإن قيمة العنوان ليست مهمة في هذه الحالة، حيث لم يتم تحديدها في قاعدة CSS. إضافي. الآن قم بتطبيق محدد السمة بالقيمةودعونا نرى كيف يتغير نص الفقرات التجريبية الثلاث. سيكون بناء جملة كتابة قاعدة CSS في هذه الحالة كما يلي:
للقيام بذلك، قم بإضافة قيمة إلى العنوان:
ف (اللون: أخضر؛)
على الفور، ستتحول الفقرة الأولى من الفقرات التي تم اختبارها إلى اللون الأخضر، وسيبقى الباقي دون تغيير، أي. يتم الاحتفاظ بخصائص CSS للفقرة القياسية لهذا المورد:
أدناه سننظر في العديد من الخيارات الأخرى لاستخدام محدد السمات.
محدد سمة بقيمة تحتوي على النص المحدد وواحدة من قيم السمات المتعددة
قد يحدث أن تحتاج أنماط CSS إلى تطبيقها على علامة ذات سمة معينة تحتوي قيمتها على نص ما، أو كلمة واحدة، أو حتى جزء من كلمة. في هذه الحالة، سيكون بناء الجملة لكتابة قاعدة CSS كما يلي:
يعني عامل التشغيل "*" أنه إذا كانت قيمة السمة تحتوي على كلمة معينة أو جزء منها، ولا يهم على الإطلاق في أي مكان (في البداية أو الوسط أو النهاية)، فسيتم تطبيق قاعدة النمط هذه على علامة بهذه السمة. دعونا نواصل البحث العملي. واسمحوا لي أن أذكركم بمضمون الفقرات الثلاث ومعنى عنوان كل منها:
سيتم إصدار الإصدار الجديد من WordPress في موعد أقصاه أبريل 2013.
اكتسب المكون الإضافي WordPress One Seo Pack وظائف إضافية يمكن العثور عليها على الموقع الرسمي.
لم يتم تحديث المكون الإضافي WP Tuner منذ أكثر من عام، لذا فإن استمرار استخدامه غير مناسب.
لنقم بإنشاء قاعدة نمط وفقًا للتركيب الموضح أعلاه (يمكنك استبدال ما تم كتابته مسبقًا هناك، في الجزء الأيسر من نافذة الأداة التي نستخدمها:
ف (اللون: أخضر؛)
مباشرة بعد التحرير، يمكنك أن ترى أن نص جميع الفقرات سيتحول إلى اللون الأخضر، حيث أن قيمة سمة العنوان لكل منها تحتوي على "Word" كجزء من كلمة "Wordpress".
يحدث أحيانًا أن يتم تحديد عدة قيم للسمات مفصولة بمسافة. وينطبق هذا على الإطلاق على أي علامات، على سبيل المثال، حاوية القسم، والتي يمكن أن تحتوي على عدة فئات (فئة) بقيم مختلفة، وهي في هذه الحالة سمات.
لكننا سنستمر في النظر إلى المثال الذي يحتوي على العلامة p والسمة title، لأنها الأكثر وضوحًا، خاصة للمبتدئين. بالإضافة إلى ذلك، من خلال تجربة نفس الكائنات، يمكنك رؤية الفرق بشكل أكثر وضوحًا باستخدام أشكال مختلفة من محدد السمة.
لتطبيق نمط معين على إحدى قيم السمات، مفصولة بمسافة، يمكنك استخدام عامل التشغيل "~" ؛ سيكون بناء جملة الكتابة كما يلي:
فيما يتعلق بنفس الفقرات التي نتناولها في منشور اليوم، سنحدد قاعدة النمط التالية، مع الإشارة إلى كلمة "Wordpress" في قيمة السمة:
ف (اللون: أخضر؛)
الآن سيتم تلوين نص الفقرتين الأولى والثالثة باللون الأخضر، لأن قيمة سمة العنوان لهذه الفقرات فقط تحتوي على كلمة “Wordpress”، مفصولة عن بقية النص بمسافة. ويظل نص الفقرة الثانية كما هو. لماذا، بما أن العنوان يتضمن أيضًا WordPress؟ نعم، لأن هذه الكلمة في عنوان الفقرة الثانية مفصولة ليس بمسافة، بل بواصلة "-".
لذا، فقد فهمنا أن إجراءات عامل التشغيل "~" تنطبق على جزء من النص مفصول بمسافة. أي إلى إحدى القيم العديدة لسمة معينة، والتي يتم فصلها عن بعضها البعض بمسافات. في حالتنا، عند استخدام سمة العنوان، تكون القيم المفصولة بمسافات هي الكلمات الفردية في قيمة العنوان.
أوه، لقد جعلني أتعرق من الحماس، ولكن يبدو أنه مضغ كل شيء حتى أصغر الجزيئات حتى يتمكن المبتدئين من فهم ذلك. دعنا نذهب أبعد من ذلك ونلقي نظرة على بعض الحالات الأخرى لاستخدام محددات السمات. كن صبورا، لم يتبق الكثير، على الرغم من أن كل شيء في رأيي يجب أن يكون مثيرا للاهتمام عندما يمكنك اختبار افتراضات النظرية في الممارسة العملية.
محددات CSS: تبدأ قيمة السمة بنص محدد، وتنتهي بنص محدد، وواصلة في قيمة السمة
وننتقل أبعد في إطار درسنا النظري والعملي، مخصص لمحددات سمات CSS. نظرًا لأن هذه المقالة طويلة جدًا، دعني أذكرك مرة أخرى أننا ننظر إلى مثال مكون من ثلاث فقرات تم تشكيلها باستخدام علامة p وسمة العنوان (تلميح الأداة) مباشرةً في حقل أداة التحرير عبر الإنترنت في متصفح Google Chrome. يتم استدعاء هذه الأداة، على وجه الخصوص، بمجرد الضغط على المفتاح F12.
سيتم إصدار الإصدار الجديد من WordPress في موعد أقصاه أبريل 2013.
اكتسب المكون الإضافي WordPress One Seo Pack وظائف إضافية يمكن العثور عليها على الموقع الرسمي.
لم يتم تحديث المكون الإضافي WP Tuner منذ أكثر من عام، لذا فإن استمرار استخدامه غير مناسب.
الآن دعونا نلقي نظرة على بعض الأشكال المختلفة لمحدد السمة، أي عندما تبدأ قيمة السمة بنص معين، وتنتهي بنص محدد، وعندما تحتوي قيمة السمة على واصلة.
تتيح لك كل هذه التفاصيل الدقيقة في استخدام خيارات مختلفة لقيم السمات إنشاء نظام مرن حقًا لتصميم صفحات موقع الويب. الآن دعونا نلقي نظرة على تأثير عامل التشغيل "^"، الذي يشير إلى أن قيمة السمة تحتوي على النص أو الكلمة التي تبدأ قيمة السمة للعلامة المحددة. مربك قليلا؟ الآن سوف تفهم كل شيء. أولاً، سأقدم بناء الجملة لكتابة قاعدة النمط عندما تبدأ قيمة السمة بنص معين:
الخطوة التالية هي كتابة قاعدة CSS جديدة، مرة أخرى فيما يتعلق بفقراتنا التجريبية:
ف (اللون: أخضر؛)
مرة أخرى، عبر الإنترنت، عند استخدام أداة لتحرير كود HTML وCSS، نرى أن نص الفقرتين الأولى والثانية اكتسب هذه المرة صبغة خضراء، واحتفظ نص الفقرة الثالثة بنمط الفقرة العادية:
وذلك لأن قيمة سمة العنوان لكلا الفقرتين الأولتين تبدأ بكلمة "Wordpress". هذه الكلمة موجودة أيضًا في عنوان الفقرة الثالثة، ولكن ليس في البداية. لتعزيز هذا، سأقدم مثالا آخر عندما يكون من المناسب استخدام عامل التشغيل "^".
