میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

قوانین Specificity در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش قوانین Specificity در CSS با من همراه باشید.

گاهی اوقات در بخش های مختلف از کد CSS به یک عنصر HTML اشاره می شود، در اینگونه موارد مرورگرها بر اساس یکسری قوانین تعیین شده بین این کدها اولویت بندی را انجام می دهند، و از بین کدهای مختلفی که هر کدام به نحوی به یک عنصر اشاره دارند ، یکی از کدها اولویت رندر خواهد داشت. و این اولویت بندی ها به عنوان Specificity در CSS شناخته می شوند.

اگر دو یا چند کد در CSS وجود دارد که به یک عنصر اشاره دارند،بر اساس اولویت استایل ها در CSS بین رندر این کدها اولویت بندی خواهد شد.

می توانید به مفهوم Specificity در CSS به عنوان یک رنج امتیاز دهی به style ها برای انتخاب اولویت بالاتر در رندر نگاه کرد.

به عنوان مثال انتخابگر (*) دارای Specificity کمی است در حالی که انتخابگر ID از Specificity بالایی برخوردار است.

نکته : درک مفاهیم Specificity به شما نشان می دهد که چرا برخی از style ها به برخی عناصر اعمال نمی شوند.

سلسله مراتب Specificity

هر کدام از انتخابگرها در Specificity سلسله مراتبی برای رندر شدن دارند.

۴ دسته بندی کلی در Specificity تعریف شده که اولویت استایل ها در CSS را تعیین می کند:

  • Inline styles (استایل داخلی تگ) :

یک Inline styles داخل یک عنصر تعریف شده است.(مانند  <h1 style=”color: #ffffff;”> )

  • ID : یک ID در واقع یک شناسه ی یکتا برای عناصر صفحه وب است. (مانند navbar# )
  • کلاس ها ، صفات و شبه کلاس ها :

این دسته شامل class. ها ، [attributes] و شبه کلاس (pseudo-class) می باشد.(مانند :hover: , focus)

  •   عناصر و شبه عناصر : این دسته شامل نام عناصر و شبه عناصر می باشد(مانند h1, div :before , :after)

نحوه ی محاسبه ی specificity

از ۰ شروع شده و ۱۰۰۰ برای style عناصر اضافه می شود.

۱۰۰ برای هر ID اضافه می شود.

۱۰ برای هر صفت ، کلاس و شبه کلاس اضافه می شود.

۱ برای هر نام عنصر و شبه عناصر اضافه می شود.

سه کد زیر را در نظر بگیرید:

مثال : 
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

Specificity سطر A دارای ارزش ۱ است.

Specificity سطر B دارای ارزش ۱۰۱ است (یک ID و یک نام عنصر).

Specificity سطر C دارای ارزش ۱۰۰۰ است.(استایل داخلی تگ).

سپس از سلسله مراتب ۱ < 101 < 1000 نتیجه می گیریم که کد سوم (C) از بالاترین اولویت برخوردار است.

به همین دلیل کد سوم (C) اعمال خواهد شد.

قوانین Specificity در CSS

بین دو Specificity برابر در Style خارجی همیشه Specificity که در خط پایین تر قرار دارد اعمال می شود.

مثال : قوانین اختصاصی
h1 {background-color: yellow;}
h1 {background-color: red;}

 


مقایسه Specificity در انتخابگر ID و انتخابگرهای صفت

همیشه انتخابگر ID از Specificity بالاتری نسبت به انتخابگرهای صفت برخوردار است.

مثال : قوانین اختصاصی و انتخابگر

 

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

 

 

مقایسه Specificity در انتخابگرها در فایل CSS و انتخابگرهای داخل تگ <style>

انتخابگرها و کدهای CSS داخل تگ <Style> به کد html نزدیکتر بوده و به همین خاطر از اولیت بیشتر نسبت به انتخابگرهای داخل فایل خارجیCSS برخوردارند.

مثال:

 

From external CSS file:
#content h1 {background-color: red;}


In HTML file:
<style>
#content h1 {
    background-color: yellow;
}
</style>

 

 

 


مقایسه ی Specificity بین انتخابگر کلاس و انتخابگر نام عناصر

همیشه Specificity در انتخابگرهای کلاس از اولویت بالاتری نسبت به نام عناصر برخوردار است.

مثال : نمونه ی دوم قوانین اختصاصی در css
.intro {background-color: yellow;}
h1 {background-color: red;}

انتخابگرهای عمومی و مقادیر ارثی دارای Specificity با ارزش ۰ بوده و کمترین اولویت را دارند.

به عنوان مثال انتخابگرهای * و * body  دارای Specificity با ارزش ۰ می باشند.

 


امیدواریم آموزش قوانین Specificity در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

cssspecificity cssSpecificity در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsقوانین Specificity در CSSکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟