ما هي محددات السمات ؟
تعتبر محددات السمات Attribute Selectors في لغة CSS طريقة سهلة وفعالة لتطبيق خصائص CSS على عناصر HTML استنادًا إلى وجود سمة أو قيمة سمة معينة.
يمكننا إنشاء محدد سمة بوضع السمة مع او بدون قيمتها في زوج من الأقواس المربعة square brackets. يمكننا أيضًا وضع محدد نوع العنصر قبله.
في هذا الدرس سوف نتعلم محددات السمات الأكثر شيوعًا.
[attribute]
هذا هو أبسط شكل من أشكال محددات السمات الذي يطبق خصائص CSS على عنصر في حالة وجود سمة معينة. على سبيل المثال ، يمكننا تنسيق جميع العناصر التي لها السمة title كما في المثال التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على محددات السمات</title>
<style>
body {
direction:rtl;
font-size:22px;
text-align:center;
}
[title] {
color:blue;
}
</style>
</head>
<body>
<h1 title="heading">محددات السمات</h1>
<p title="paragraph">سيكون لون هذه الفقرة أزرقاً
</p>
</body>
</html>
المخرجات
![[attribute]](https://blogger.googleusercontent.com/img/a/AVvXsEg1Mg_w8xOlnRpMCu1Mz_oSFVG8iPhzNR7ewtOp_cTcMWdJWg6-o3srvNM7O5mfVRTzNfmEhRfF1lzSiBjEAAsCO-13vtiupfTvvEt74_NipdgFILHu-9q0aVAr8XsO2RtVnxiWJnjwvsRdr6BLTl67KTIVeuujatwE_rIez5yn8bmn3-f8DdvVVxH2=w320-h153-rw "[attribute] css")
المحدد [title] في المثال أعلاه يتطابق مع جميع العناصر التي لها سمة title .
يمكننا أيضًا تقييد هذا التحديد على عنصر HTML معين عن طريق وضع محدد السمة بعد محدد نوع العنصر ، كما في المثال التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على محددات السمات</title>
<style>
body {
direction:rtl;
font-size:22px;
text-align:center;
}
abbr[title] {
color: red;
}
</style>
</head>
<body>
<p> لغة <abbr title="Hyper Text Markup Language" > HTML </abbr>تعرف بلغة توصيف النص التشعبي هي أساس البناء لشبكة الويب العالمية.</p>
</body>
</html>
المخرجات
![المحدد [title]](https://blogger.googleusercontent.com/img/a/AVvXsEjbel_-jDaJxh55YbCasRSg0qMHkR6XSvzsRZJlT2oGMvvNkuCp8SbFZiX0M7Y23Pmb0euxEysoqXg8e_tpmMuKWhq8wlqDrC9yJIrgt9Qm4xFLlGn9HrDO4HEnY6upqAkof6yITCW0QxydEdnjbAIiTSXqVibm4L9BMVBTSRLVRs0I2JDVx0B-JdyH=w320-h152-rw "المحدد [title] css")
في المثال اعلاه يتطابق المحدد abbr[title] فقط مع عناصر <abbr> التي لها السمة title.
[attribute="value"]
يمكنك استخدام المعامل = لجعل محدد السمة يطابق عنصرًا تساوي قيمة السمة الخاصة به تمامًا القيمة المحددة:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على محددات السمات</title>
<style>
* {
font-size:24px;
}
input[type="text"] {
border:1px solid red;
}
input[type="submit"] {
border:1px solid green;
}
</style>
</head>
<body>
<form onsubmit="return false;">
<input type="text">
<input type="submit" value="Submit">
</form>
</body>
</html>
المخرجات
المحدد في المثال أعلاه يتطابق مع جميع عناصر <input> التي لها السمة type بقيمة تساوي submit.
[attribute~="value"]
يمكننا استخدام المعامل ~= لجعل محدد السمة يطابق أي عنصر تكون قيمة السمة الخاصة به عبارة عن قائمة من القيم المفصولة بمسافات (مثل class="alert warning" ) ، واحدة منها تساوي تمامًا القيمة المحددة:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على محددات السمات</title>
<style>
body {
direction:rtl;
font-size:26px;
text-align:center;
}
[class~="warning"] {
color: #fff;
background: red;
}
</style>
</head>
<body>
<p class="warning">سيتم تطبيق الخصائص على هذه الفقرة.</p>
<p class="warning highlight">سيتم تطبيق الخصائص أيضًا على هذه الفقرة.</p>
<p class="highlight">لن يتم تطبيق الخصائص على هذه الفقرة.</p>
</body>
</html>
المخرجات
يطابق المحدد في المثال اعلاه أي عنصر HTML بسمة class تحتوي على قيم مفصولة بمسافات ، أحدها warning.
على سبيل المثال ، يطابق العناصر التي تحتوي على قيم الفئة warning و alert warning .... الخ
[attribute|="value"]
يمكنك استخدام المعامل |= لجعل محدد السمة يطابق أي عنصر تحتوي السمة الخاصة به على قائمة قيم مفصولة بشرطة - تبدأ بالقيمة المحددة:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example of attribute selector</title>
<style>
body {
direction:rtl;
font-size:26px;
text-align:center;
}
p[lang|=ar] {
color: #fff;
background: blue;
}
</style>
</head>
<body>
<p lang="ar">سيتم تطبيق خصائص محدد السمات على هذه الفقرة.</p>
<p lang="ar-JO">سيتم تطبيق خصائص محدد السمات أيضًا على هذه الفقرة.</p>
<p lang="en-US">The style will not apply to this paragraph.</p>
</body>
</html>
المخرجات
المحدد في المثال أعلاه يتطابق مع جميع العناصر التي تحتوي على سمة lang التي تحتوي على قيمة تبدأ بـ ar ، سواء كانت تلك القيمة متبوعة بشرطة والمزيد من الأحرف أم لا. بمعنى آخر ، فإنه يطابق العناصر ذات السمة lang التي تحتوي على القيم ar و ar-JO و ar-EG وما إلى ذلك ولكن ليس JO-ar و EG-ar
[attribute^="value"]
يمكنك استخدام المعامل ^= لجعل محدد السمة يطابق عنصرًا تبدأ قيمة السمة الخاصة به بقيمة محددة ولا يجب أن تكون كلمة كاملة.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على محددات السمات</title>
<style>
body {
font-size:26px;
text-align:center;
}
a[href^="http://"] {
background: url("examples/images/external-link.png") 100% 50% no-repeat;
padding-right: 25px;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" target="_blank">Google</a></p>
</body>
</html>
المخرجات
سيستهدف المحدد في المثال أعلاه جميع الروابط الخارجية ويضيف رمزًا صغيرًا يشير إلى أنه سيتم فتحها في علامة تبويب أو نافذة جديدة.
[attribute$="value"]
أيضا يمكننا استخدام المعامل $= لتحديد جميع العناصر التي تنتهي قيمة سماتها بقيمة محددة ولا يجب أن تكون كلمة كاملة.
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>مثال على محددات السمات</title>
<style>
body {
font-size:28px;
text-align:center;
}
a[href$=".pdf"] {
background: url("examples/images/pdf.png") 0 50% no-repeat;
padding-left: 30px;
}
</style>
</head>
<body>
<p><a href="examples/download/Links.pdf" download>Download PDF</a></p>
</body>
</html>
المخرجات
المحدد في المثال أعلاه سيحدد جميع عناصر الرابط التشعبي <a> التي ترتبط بمستند PDF ويضيف رمز PDF صغيرًا لتوفير تلميحات للمستخدم حول محتوى الرابط.
[attribute*="value"]
يمكننا استخدام المعامل *= لجعل محدد السمة يطابق جميع العناصر التي تحتوي قيمة السمة الخاصة بها على قيمة محددة.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على محددات السمات</title>
<style>
body {
direction:rtl;
font-size:26px;
text-align:center;
}
[class*="warning"] {
color: #fff;
background: red;
}
</style>
</head>
<body>
<p class="warning">سيتم تطبيق خصائص محدد السمات على هذه الفقرة.</p>
<p class="alert warning">سيتم تطبيق خصائص محدد السمات على هذه الفقرة أيضا .</p>
<p class="alert-warning">سيتم تطبيق خصائص محدد السمات على هذه الفقرة أيضا .</p>
<p class="alert_warning">سيتم تطبيق خصائص محدد السمات على هذه الفقرة أيضا .</p>
<p class="highlight">لن يتم تطبيق خصائص محدد السمات على هذه الفقرة.</p>
</body>
</html>
المخرجات
في المثال أعلاه يتطابق المحدد مع جميع عناصر HTML التي تحتوي السمة class التي تحتوي على القيمة warning. على سبيل المثال ، يتطابق مع العناصر التي تحتوي على قيم السمة class مثل warning أو alert warning ، أو alert-warning أو alert_warning وما إلى ذلك.
تصميم النماذج مع محددات السمات css
تُعد محددات السمات مفيدة بشكل خاص لتصميم النماذج بدون الحاجة لإضافة السمات class أو id:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على محددات السمات</title>
<style>
* {
font-size:22px;
}
input[type="text"], input[type="password"] {
width: 150px;
display: block;
margin-bottom: 10px;
background: yellow;
}
input[type="submit"] {
padding: 2px 10px;
border: 1px solid #804040;
background: #ff8040;
}
</style>
</head>
<body>
<form>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Login">
</form>
</body>
</html>
المخرجات
التحقق من صحة كود CSS
لماذا يجب التحقق من صحة كود CSS الخاص بك ؟
كمبتدئ ، من الشائع جدًا أن تخطئ في كتابة كود CSS الخاص بك. قد تؤدي التعليمات البرمجية غير الصحيحة أو غير القياسية إلى نتائج غير متوقعة في كيفية عرض صفحتك أو كيفية عملها في متصفح الويب.
أنشأ اتحاد شبكة الويب العالمية (W3C) أداة رائعة https://jigsaw.w3.org/css-validator للتحقق تلقائيًا من أوراق الأنماط الخاصة بك ، والإشارة إلى أي مشاكل / أخطاء قد تكون في الكود الخاص بك ، مثل خصائص CSS غير صالحة تفتقد قوس إغلاق أو فاصلة منقوطة مفقودة (؛) إلخ. هذه الأداة مجانية تماما.
التحقق من صحة موقع الويب
التحقق من صحة موقع الويب هو عملية لضمان أن صفحات موقع الويب تتوافق مع الإرشادات والمعايير الرسمية التي وضعها اتحاد شبكة الويب العالمية .
هناك عدة أسباب محددة للتحقق من صحة موقع ويب ، بعضها:
- يساعد في إنشاء صفحات ويب تكون متوافقة مع معظم متصفحات الويب ومتوافق مع انظمة التشغيل الشهيرة . ومن المحتمل أيضًا أن يكون متوافقًا مع الإصدار المستقبلي من متصفحات الويب ومعايير الويب.
- تعمل صفحات الويب المتوافقة مع المعايير على زيادة ظهور صفحاتك في نتائج محركات البحث.
- سيقلل من الأخطاء غير المتوقعة ويجعل صفحات الويب الخاصة بك في متناول زائر موقع الويب الخاص بك.
إستخدم الرابط أدناه للتحقق من صحة مستند CSS الخاص بك.