اولویت استایل ها در css

همیشه یکی از مشکلاتی که من تو استایل نویسی با css داشتم این بوده که اولویت استایل ها در css چجوریه یعنی اگه به یه تگ هم class بدم هم id کدوم یکی واسه تگ در نظر گرفته میشه .

تا این که امروز دست به کار شدم و یه مقایسه بین کد های css انجام دادم ، این مقایسه رو در چند مرحله زیر انجام دادم :

اولویت استایل ها در css

اولویت استایل در css

1 – مقایسه بین id و class :

برنده این مقایسه id شد . یعنی اگه یه تگ هم id داشته باشه و هم class استایل های مربوط به id در اولویت هستن . تو مثال زیر رنگ بکگراند سبز خواهد بود :

<p class="test" id="test"> Hello World ! </p>
<style type="text/css">
	.test { background-color: red; }
	#test { background-color: green; }
</style>

2 – مقایسه اولویت استایل های internal css و inline css و external css :

تو این مقایسه اولویت اول با inline css هست .

بین internal css و external css استایلی اولویت داره که تو فایل html آخر از همه نوشته میشه .

یعنی اگه به صورت زیر استفاده بشه رنگ بکگراند تگ قرمز خواهد بود ، به فرض این که تو فایل css رنگ بکگراند مثلا سبز باشه :

<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
    p { background-color: red; }
</style>
<p> Hello World ! </p>

منظور از inline css همون شناسه “”=style هست که تو فایل html به تگ ها داده میشه .

External link هم فایل استایل خارجی هست .

منظور از Internal css هم استایل هایی هست که داخل تگ <style>…</style> قرار میگیره .

3 – مقایسه اولویت استفاده از نام عنصر و استفاده از کلاس عنصر :

شما کد زیر رو در نظر بگیرید :

<style type="text/css">
    p { background-color: red; }
</style>

این کد به همه تگ های پاراگراف ، p ، تو صفحه بکگراند قرمز رو میده .

حالا به یه تگ p کلاس test میدم و اون رو استایل نویسی می کنم . تو مثال زیر به تگ p مورد نظرتوسط کلاس بکگراند سبز داده شده است :

<p class="test"> Hello World ! </p>
<style type="text/css">
    p { background-color: red; }
    .test { background-color: green; }
</style>

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

4 – مقایسه بین کلاس های یک تگ :

خوب می دونیم که تو html میشه واسه یه تگ چند تا کلاس قرار داد ، به صورت زیر :

<p class="test test2 test3"> Hello World ! </p>

خوب حالا در جواب این که اولویت با کدوم کلاس هست باید بگم اولویت با کلاس آخر هست ، دراینجا اولویت با test3 می باشد . به مثال زیر دقت کنید ، در این مثال رنگ بکگراند آبی خواهد شد :

<style type="text/css">
    .test { background-color: red; }
    .test2 { background-color: green; }
    .test3 { background-color: blue; }
</style>

خوب مقایسه ها دیگه به پایان رسید ، در آخر می خوام کاربرد important! رو براتون توضیح بدم .

این کلمه یا این مقدار باعث میشه اولویت یه خاصیت مثلا رنگ بکگراند یا رنگ متن یا … به اولین سطح برسه و استایل های دیگه رو کنار بزنه و اونا رو برای مرورگر بی اهمیت نشون بده .

warning در ضمن به یاد داشته باید اولویت مقدار important! از شناسه style هم بیشتر می باشد .

در مثال زیر چند رنگ بکگراند به چند روش برای تگ p قرار داده شده . در بین این روش ها فقط خاصیتی که دارای مقدار important! باشد عمل خواهد کرد ، یعنی رنگ بکگراند سبز می شود :

<p class="test test2" id="test" style="background-color: yellow"> Hello World ! </p>
<style type="text/css">
    p { background-color: red; }
    .test { background-color: green !important; }
    #test { background-color: blue; }
    .test2 { background-color: orange; }
</style>

در پایان امیدوارم این مطلب مفید واقع شده باشه و بهره مندی کامل رو برده باشید

فرادرس

برچسب ها : ، ، ، ، ، ،