محددات كس. أنواع المحددات

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

محددات كس

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

• للعلامات؛

• لفئات؛

• للمعرف؛

• عالميا؛

• الصفات.

• للتفاعل مع الطبقات الزائفة.

• للسيطرة على عناصر الزائفة.

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

محددات العلامات

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

مزايا - سهولة الاستخدام، وبراعة.

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

محددات الفئة

الخيار الأكثر شيوعا. مصممة لإدارة العلامات مع السمة كلاس. لنفترض أن لديك ثلاث كتل <ديف> في الشفرة، ويجب أن يكون لكل منها لون محدد. كيف نفعل ذلك؟ لا تعمل محددات كس القياسية للعلامات، إلا أنها تحدد المعلمات لجميع الكتل مرة واحدة. الإخراج بسيط. تعيين فئة إلى العناصر. على سبيل المثال، حصلت ديف الأولى على كلاس = 'ريد'، والثانية ديف - كلاس = 'بلو'، والثالثة - كلاس = 'غرين'. الآن يمكن اختيارها باستخدام جداول كس.

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

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

المزايا هي المرونة العالية نوعا ما.

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

محدد بواسطة المعرف

وفيما يتعلق بهذا الخيار، فإن آراء المبرمج والمبرمجين غامضة. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. بعض الكتب المدرسية كس لا توصي عموما باستخدام المعرفات، لأنها يمكن أن تسبب مشاكل الميراث عند استخدامها عن غير قصد. ومع ذلك، العديد من المتخصصين توزيعها بنشاط في جميع أنحاء الترميز. والامر متروك لكم. # »), затем имя блока. بناء الجملة هو: حرف شعرية (" # ")، ثم اسم كتلة. #red. على سبيل المثال، #red.

отличается от класса по нескольким параметрам. يختلف المعرف عن الفصل بعدة طرق. ID. أولا، لا يمكن أن يكون هناك معرفان متطابقان على الصفحة . يتم تعيين أسماء فريدة من نوعها. وثانيا، يكون لهذا المنتخب أولوية عليا. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. وهذا يعني أنه إذا قمت بإعطاء كتلة فئة حمراء وتحديد لون خلفية حمراء في جداول كس ، ثم تعيين نفس معرف الأزرق وتحديد لون أزرق، كتلة سوف تتحول إلى اللون الأزرق.

مزايا - يمكنك التحكم في عنصر معين، لا تولي اهتماما لأساليب للعلامات والطبقات.

ID и class. العيوب - من السهل الحصول على الخلط في الكثير من الهوية والطبقة.

مهم! ID вам, в общем-то, не нужны. إذا كنت تستخدم منهجية بيم (أو النظير لها)، وعموما لا تحتاج معرف . هذا الأسلوب من تخطيط ينطوي على استخدام الطبقات الفريدة، والتي هي أكثر ملاءمة بكثير.

محدد عالمي

{}. بناء الجملة: علامة النجمة ("*") وأقواس مجعد، أي * * {}.

تستخدم لتعيين سمات معينة لجميع عناصر الصفحة في وقت واحد. متى يمكن أن تأتي في متناول اليدين؟ box-sizing: border-box. على سبيل المثال، إذا كنت تريد تعيين مربع الصفحة الخاصية -التحجيم: مربع الحدود. div *{}. ويمكن استخدامه ليس فقط لإدارة جميع مكونات الوثيقة، ولكن أيضا للسيطرة على جميع الأطفال من كتلة معينة، على سبيل المثال، ديف * {}.

المزايا - يمكنك إدارة عدد كبير من العناصر في نفس الوقت.

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

حسب السمات

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

إنبوت [تايب = 'تكست'] {}

سيحدد محدد السمة هذا كل الإدخال بنوع النص.

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

تخيل أن صفحتك تحتوي على إدخال مع السمة بلاسهولدر = "إنتر نيم" و إنبوت بلاسهولدر = "إنتر باسورد". يمكنك أيضا تحديدها باستخدام محدد! يتم استخدام البناء التالي لهذا:

إنبوت [بلاسهولدر = "إنتر نيم"] {} أور إنبوت [بلاسهولدر = "إنتر باسورد"]

عمل أكثر مرونة مع سمات ممكنة. لنفترض أن لديك عدة علامات ذات سمات عنوان مشابهة (مثلا، "كاسبيان" و "كاسبيان"). لتحديد كليهما، استخدم المحددات التالية:

[تيتل * = "كاسبيان"]

سيحدد كس جميع العناصر في العنوان الذي توجد به رموز "كاسبيان"، أي "كاسبيان" و "كاسبيان".

يمكنك أيضا تحديد العلامات التي تبدأ سماتها بحروف معينة:

[تيتل ^ = "ذي تشاراكتر نيد"] {}

أو تنتهي معهم:

[تيتل $ = "تشاراكتر تشاراكتر"] {}.

مزايا - أقصى قدر من المرونة. يمكنك تحديد أي عناصر الصفحة الموجودة دون إثارة مع الطبقات.

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

محددات فئة شبه

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

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

.btn: هوفر {

باكغروند-كولور: ريد؛

}

للجمال، يمكنك تحديد الخاصية زر في الخصائص الرئيسية لهذا الزر، على سبيل المثال، في 0.5s - في هذه الحالة، فإن الزر استحى ليس على الفور، ولكن في غضون نصف ثانية.

المزايا - تستخدم بنشاط إلى "إحياء" الصفحات. سهلة الاستخدام.

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

محددات عنصر شبه

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

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

مزايا - إعطاء الفرصة لضبط بمرونة مظهر الصفحة.

العيوب - المبتدئين في كثير من الأحيان الخلط. العديد من محددات من هذا النوع تعمل فقط في بعض المتصفحات.

لتلخيص

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