محددات CSS

CSS: هي اختصار Cascading Style Sheet، وترجمتها [Cascading Style Sheet]، وهي عبارة عن مجموعة من قواعد التنسيق. هي لغة ترميزية تستخدم للتحكم (المحسّن) في تصميم صفحة الويب والسماح بفصل معلومات النمط عن محتوى الويب.

تكوين CSS: يتكون تعريف CSS من ثلاثة أجزاء: المحدد (Selector)، والخصائص (الخصائص)، وقيمة الخاصية (القيمة). بناء الجملة: محدد {الخاصية: القيمة} (محدد {الخاصية: قيمة الخاصية})

أشياء يجب ملاحظتها:

1. تتكون كتلة إعلان CSS من: المحدد + "{" + واحدة أو أكثر من سمات CSS + "}".

2. CSS غير حساس لحالة الأحرف، ويوصى باستخدام الأحرف الصغيرة في بناء جملة CSS.

1. محددات CSS

إنه اسم نمط CSS عندما يتم عرض نمط CSS في مستند HTML، يتم استخدام CSS. كيفية استخدامه؟ في هذا الوقت، يتم استخدام محدد CSS (اسم CSS) لتحديد أن علامة HTML هذه تستخدم نمط CSS هذا.

2. بناء جملة المحدد

يحدد محدد CSS النمط.

اسم المحدد {إعلان؛}

على سبيل المثال:

 ع {حجم الخط: 12px؛}.dreamdublue {اللون: أزرق؛}.dreamdu18px {font-size:18px؛}#dreamdured {اللون: أحمر؛}

P، وdreamdublue، وdreamdured كلها محددات.

3. قواعد تسمية المحدد

يمكن لمحددات CSS استخدام الحروف الإنجليزية الكبيرة والصغيرة، والأرقام، والواصلات، والتسطير، والنقطتين، والنقاط.

(1) الحروف الإنجليزية الكبيرة والصغيرة من الألف إلى الياء

(2) الأعداد 0-9

(3) واصلة -

(4) تسطير_

(5) القولون:

(6) الفترة.

ملاحظة: يمكن أن تبدأ محددات CSS بالأحرف فقط.

4. تصنيف المحدد

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

1. محدد النوع: محدد النوع هو عنصر صفحة الويب نفسه، ويتم استخدام اسم العنصر مباشرة عند التحديد.

 النص الأساسي{/*تحديد سمات الصفحة*/Div{Width:774px;/*تحديد جميع عناصر div بحيث يبلغ عرضها 774 بكسل*/

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

 <divid="top"></div>عند استخدام محدد المعرف، يلزمك استخدام # للتعريف: #top{Width:774px;/*حدد جميع عناصر div بحيث يبلغ عرضها 774 بكسل*/

3. محدد الفئة: يمكن تعريف نفس اسم الفئة لأنواع مختلفة من العناصر في المستند. يمكن للفئة توحيد العناصر من نفس النمط في فئة واحدة. عند استخدام محدد الفئة، يجب عليك أولاً تحديد سمة فئة لكل عنصر. :

 <divclass="red"></div><spanclass="red"></span><pclass="red"></p>عند استخدام محدد الفصل، يتعين عليك استخدام اللغة الإنجليزية (نقطة) لتحديد الهوية : أحمر {اللون: أحمر؛}

4. المحدد العالمي: هو محدد خاص، ويمثله *، وهو محدد يستخدم ولكن من السهل تجاهله.

 *{font-size:12pt;/*حدد حجم جميع الخطوط في المستند إلى 12pt*/

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

 .class1{font-size:13px;color:red;text-decraotian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}

يمكن تجميعها في:

 .class1,class2{font-size:13px;text-decroation:تسطير;}.class1{color:red;}.class2{color:blue;}

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

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

 .div1h2{/*تحديد نمط العنوان لكل h2 في طبقة div1 للفئة*/font-size:18px;}.div1p{/*تحديد نمط العنوان لكل p في طبقة div1 للفئة*/font-size:12px ;}

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

 span.red{/*حدد لون العنصر ذي الفئة الحمراء في عنصر الامتداد باللون الأحمر*/color:red;}div#top{/*حدد عرض العنصر بالمعرف كأعلى في عنصر div على أنه 100 %*/width:100% ;}على سبيل المثال:<div><h2><h2><p></p><span></span></div>

من الواضح أنه ليس من الممكن استخدام محدد الأخبار في الكود أعلاه، كما أنه ليس من الجيد استخدام محدد النوع h2.

p.news{} h2.news{}span.news{}

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

 #main>table{/*حدد نمط جدول الكائنات الفرعية في الوحدة الرئيسية بالمعرف الرئيسي*/width:788px;font-size:12px;}#main>.title{/*حدد الكائن الفرعي في الوحدة الرئيسية مع المعرف الرئيسي فئة الكائن هي نمط العنوان*/color:red;font-style:italic;}

9. محدد السمات: محدد السمات هو إضافة قوس بعد العنصر، ويتم إدراج السمات أو التعبيرات المختلفة بين قوسين. هناك 7 أشكال محددة لمحددات السمات:

(1) مطابقة سمة الوجود: التحكم في نمط العنصر عن طريق مطابقة السمات الموجودة بشكل عام، يجب تضمين السمات المطابقة بين قوسين، ويجب إدراج الأسماء فقط دون تعيين قيم:

 h1[class]{color:red;/*ينطبق على أي عنصر h1 بسمة فئة بغض النظر عن قيمة الفئة*/img[alt]{border:none;/*ينطبق على أي عنصر img بسمة alt بغض النظر عن alt ما هي القيمة*/a[href][title]{font-weight:bold;/*تعمل كعنصر يحتوي على كل من سمات href وtitle*/}

(2) المطابقة الدقيقة للسمة: لن يتم تطبيق النمط إلا عندما تتطابق قيمة السمة تمامًا مع قيمة السمة المحددة، وتكون محددات المعرف والفئة في الواقع اختيارًا دقيقًا للسمة.

 a[href=www.163.com][title=NetEase]{font-size:12px;/*يشير عنوان الوظيفة إلى www.163.com وموجه العنوان هو عنصر NetEase*/

(3) تتم مطابقة الفراغات بشكل فردي: من خلال تحديد قائمة سلاسل للسمات، يمكنك التحكم في نمط العنصر طالما أنك تطابق أيًا من السلاسل.

 <spanclass=abc>من يتحكم في أسلوبي</span> يمكنك استخدام الأنماط التالية للتحكم: [class^=a]{color:red;} أو: [class^=b]{color:red;} أو: [الفئة ^ = ج] {اللون: أحمر؛} أو: تمتد [الفئة ^ = ج] {اللون: أحمر؛}

(4) مطابقة الواصلة: الوظيفة والاستخدام هما نفس مطابقة المسافة البيضاء، ولكن قائمة السلاسل في مطابقة الواصلة مفصولة بواصلات.

<span>من سيتحكم في أنماطي</span>

ويمكن التحكم في ذلك باستخدام الأنماط التالية:

 [class|=a]{color:red;} أو: [class|=a]{color:red;} أو: [class|=b]{color:red;} أو: [class|=c]{color :أحمر;} أو: تمتد[class|=c]{اللون:أحمر;}

(5) محدد البادئة: طالما أن حرف البداية لقيمة السمة يتطابق مع السلسلة المحددة، فيمكن تطبيق النمط على العنصر. يتم تنفيذ مطابقة البادئة باستخدام النموذج [^=]:

<div>مطابقة البادئة</div>

يمكنك استخدام عناصر التحكم في النمط التالية

 [الفئة ^ = بلدي] {اللون: أحمر؛}

(6) مطابقة اللاحقة: على عكس البادئة، طالما أن حرف نهاية السمة يتطابق مع الحرف المحدد، استخدم عنصر تحكم النموذج [$=].

<div>مطابقة اللاحقة</div>

يمكنك استخدام عناصر التحكم في النمط التالية

 [الفئة $ = اختبار] {اللون: أحمر؛}

(7) مطابقة السلسلة الفرعية: يتم تطبيق النمط طالما أن السلسلة المحددة موجودة في السمة، ويتم التحكم فيها في النموذج [*=].

<div>مطابقة السلسلة الفرعية</div>

يمكنك استخدام عناصر التحكم في النمط التالية

 [الفئة * = إست] {اللون: أحمر؛}

10. المحدد المجاور: يشير إلى العنصر التالي المجاور للعنصر.

 div+p{font-size:24px;/*ينطبق على جميع عناصر p مباشرة بعد عنصر div، مع تحديد حجم خط العنصر p بـ 14px*/على سبيل المثال:<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>

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

 #sub_wrap+p{font-size:14px;}