المحدد البسيط هو إما محدد نوع أو محدد عام يتبعه مباشرة صفر أو أكثر من محددات السمات أو محددات المعرفات أو الفئات الزائفة بأي ترتيب. المحدد البسيط يتطابق مع تطابق جميع مكوناته. ملاحظة: المصطلحات المستخدمة هنا في CSS 2.2 تختلف عن المصطلحات المستخدمة في CSS3.
المحددات البسيطة Simple Selectors:
المحدد البسيط هو إما محدد نوع أو محدد عام يتبعه مباشرة صفر أو أكثر من محددات السمات أو محددات المعرفات أو الفئات الزائفة بأي ترتيب. المحدد البسيط يتطابق مع تطابق جميع مكوناته.
ملاحظة: المصطلحات المستخدمة هنا في CSS 2.2 تختلف عن المصطلحات المستخدمة في CSS3.
أمثلة علي المحددات الشائعة:
* . # ul li x+y x>y x~y
يعتبر المحدد في لغة css هو وضع مجموعة من التنسيقات في مجموعة واحدة ويمكن إستدعاء تلك التنسيقات في أي وقت متضمنا كود html عن طريق class ونضع إسم المحدد وتلك الطريقة أشبه بوضع مكتبة في أول كود في معظم اللغات ثم إستدعائة عند الحاجة له ومن مميزاته :
*أنه يوفر علينا بتكرار التنسيقات في كل سطر حيث أن تعديل واحد في التنسيق الأول يسري علي الباقي كله ولا نحتاج أن نمر علي الكود سطر سطر.
*يمكن عمل العديد من المحددات مما يوفر لنا الاختيار بينهم .
تُستخدم محددات CSS لتحديد المحتوى الذي تريد تصميمه. المحددات هي جزء من مجموعة قواعد CSS. تحدد محددات CSS عناصر HTML وفقا لمعرفها وفئتها ونوعها وسمتها وما إلى ذلك.
أنواع المحددات في CSS.
- محدد عنصر CSS element selector
- محدد معرف CSS id selector
- محدد فئة CSS class selector
- محدد عام CSS universal selector
- محدد مجموعة CSS group selector
1) CSS Element Selector
- يختار هذا المحدد بالاسم
- p{
- text-align: center;
- color: blue;
- }
- <p>hello</p>
- <p id="test">you are welcome</p>
- <p>good luck!</p>
hello
you are welcome
- #para1 {
- text-align: center;
- color: blue;
- }
- <p id="para1">Hello Javatpoint.com</p>
- <p>This paragraph will not be affected.</p>
output:
Hello Javatpoint.com
- .center {
- text-align: center;
- color: blue;
- }
يتم إستخدام المحدد العام كحرف بدل. يختار جميع العناصر الموجودة في الصفحات.
- * {
- color: green;
- font-size: 20px;
- }
- <h2>This is heading</h2>
- <p>This style will be applied on every paragraph.</p>
- <p id="para1">Me too!</p>
- <p>And me!</p>
Output:
This is heading
And me!
5) CSS Group Selector
- h1 {
- text-align: center;
- color: blue;
- }
- h2 {
- text-align: center;
- color: blue;
- }
- p {
- text-align: center;
- color: blue;
- }
- h1,h2,p {
- text-align: center;
- color: blue;
- }
- <h1>Hello Javatpoint.com</h1>
- <h2>Hello Javatpoint.com (In smaller font)</h2>
- <p>This is a paragraph.</p>
Output:
الكثير من الذين يبدأون في التعلم يضع مسافات بين ال Selectors مرة ومرة أخرى لا لذلك يجب أن توحد الطريقة إذا قمت بوضع مسافة يجب وضعها بين الكل والعكس والمثال يوضح لك سوف تجد أنه لا توجد مسافة بين ال Class الأول والثاني ولكن هناك مسافة بين الثاني والثالث لذلك لا يوجد نمط للكتابة الآن
.class-one {
}
.class-two {
}
.class-three {
}
ملخص
أولاً : إذا كنت تستعمل المتصفحات القديمة ، مثل Internet Explorer 6 ، فلا يزال عليك توخي الحذر عند إستخدام هذه المحددات الأحدث. لكن من فضلك لا تدع هذا يمنعك من تعلمها. سوف تقوم بإيذاء نفسك بشكل كبير. تأكد من الرجوع هنا للحصول على قائمة توافق المستعرض. بدلاً من ذلك ، يمكنك إستخدام البرنامج النصي IE9.js الممتاز من Dean Edward لتقديم الدعم لهذه المحددات إلى المتصفحات القديمة.
ثانياً : عند العمل مع مكتبات JavaScript ، مثل jQuery الشائعة ، حاول دائمًا إستخدام محددات CSS3 الأصلية على الطرق / المحددات المخصصة للمكتبة ، إن أمكن. ستجعل الكود الخاص بك أسرع ، حيث يمكن لمحرك المحدد إستخدام التحليل الأصلي للمتصفح ، بدلاً من التحليل الخاص به.
من الرائع أن تقضي وقتًا في تعلم أساسيات برمجة وتطوير وتصميم الويب ، ولكن إذا كنت بحاجة إلى حل سريع ، فقد يكون أحد نماذج CSS الجاهزة للإستخدام خيارًا جيدًا. لدينا أيضاً بعض عناصر CSS المتميزة التي يمكنك وضعها في الاعتبار.
تعليقات
إرسال تعليق