آموزش ویژگی CSS

13 جولای 2021

ویژگی چیست؟

اگر دو یا چند قانون CSS متناقض وجود داشته باشد که به همان عنصر اشاره دارند ، مرورگر برای تعیین اینکه کدام یک از موارد خاص است ، از برخی قوانین پیروی می کند و بنابراین برنده می شود.

ویژگی را به عنوان یک نمره / رتبه در نظر بگیرید که تعیین می کند کدام اظهارنامه ها در نهایت بر روی یک عنصر اعمال می شوند.

انتخابگر جهانی (*) دارای ویژگی کم است ، در حالی که انتخابگرهای ID بسیار خاص هستند!

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


سلسله مراتب خاصیت

هر انتخاب کننده جای خود را در سلسله مراتب ویژگی دارد. چهار دسته وجود دارد که سطح خاصیت یک انتخاب کننده را تعریف می کند:

سبک های درون خطی – یک سبک درون خطی مستقیماً به عنصری که مدل می شود وصل می شود. مثال: <h1 style = “color: #ffffff؛”>.

ID ها – شناسه یک شناسه منحصر به فرد برای عناصر صفحه است ، مانند # نوار.

کلاس ها ، ویژگی ها و کلاس های شبه – این دسته شامل کلاس ها ، [ویژگی ها] و کلاس های شبه مانند: شناور ، تمرکز و غیره است.

عناصر و عناصر شبه – این دسته شامل نام عناصر و عناصر شبه مانند h1 ، div ،: قبل و بعد از آن است.


چگونه ویژگی را محاسبه کنیم؟

نحوه محاسبه ویژگی را بخاطر بسپارید!

از 0 شروع کنید ، 1000 را برای ویژگی style اضافه کنید ، 100 را برای هر ID اضافه کنید ، 10 را برای هر صفت ، کلاس یا کلاس شبه اضافه کنید ، 1 را برای هر نام عنصر یا عنصر شبه اضافه کنید.

این سه قطعه کد را در نظر بگیرید:

مثال

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

ویژگی A 1 است (یک عنصر)
ویژگی B 101 است (یک مرجع شناسه و یک عنصر)
ویژگی C 1000 است (یک خط داخلی)

از آنجا که 1 <101 <1000 ، قانون سوم (C) از سطح بالاتری از ویژگی برخوردار است و بنابراین اعمال خواهد شد.


قوانین خاص

ویژگی برابر: آخرین قانون شمارش می شود – اگر همان قانون دو بار در صفحه سبک خارجی نوشته شود ، قانون پایین تر در صفحه سبک به عنصر مورد نظر نزدیکتر است و بنابراین اعمال می شود:

مثال

h1 {background-color: yellow;}
h1 {background-color: red;}

قانون اخیر همیشه اعمال می شود.


انتخابگرهای شناسه ویژگی بالاتری نسبت به انتخابگرهای ویژگی دارند – به سه خط کد زیر نگاه کنید:

مثال

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

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


انتخابگرهای متنی خاص تر از یک انتخابگر یک عنصر هستند – صفحه سبک تعبیه شده به عنصر مدل سازی شده نزدیکتر است. بنابراین در شرایط زیر

مثال

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

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

قانون اخیر اعمال خواهد شد.


یک انتخابگر کلاس به هر تعداد انتخاب کننده عنصر می زند – یک انتخابگر کلاس مانند .intro ضربات h1 ، p ، div و غیره را می زند:

مثال

.intro {background-color: yellow;}
h1 {background-color: red;}

انتخابگر جهانی و مقادیر ارثی دارای ویژگی 0 – * ، بدنه * و مشابه آن دارای ویژگی صفر هستند. مقادیر ارثی نیز دارای 0 می باشند.

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.