آموزش CSS مبتدی : رسیدگی به مغایرت ها
هدف از این درس، توسعه درک شما از برخی از اساسیترین مفاهیم CSS - آبشار، ویژگی و وراثت - است که نحوه اعمال CSS بر HTML و نحوه حل اختلافات بین اعلانهای سبک را کنترل میکنند.
اگرچه ممکن است مطالعه این درس در ابتدا بیربط و کمی آکادمیکتر از برخی بخشهای دیگر دوره به نظر برسد، اما درک این مفاهیم شما را از دردسرهای بعدی نجات خواهد داد! ما شما را تشویق میکنیم که این بخش را با دقت مطالعه کنید و قبل از ادامه، بررسی کنید که مفاهیم را درک کردهاید.
CSS مخفف Cascading Style Sheets است و درک کلمه اول یعنی cascading بسیار مهم است - نحوه رفتار cascade کلید درک CSS است.
در برههای از زمان، شما روی یک پروژه کار خواهید کرد و متوجه خواهید شد که برخی از CSS هایی که فکر میکنید باید روی یک عنصر اعمال شوند، کار نمیکنند. اغلب، این مشکل زمانی رخ میدهد که دو قانون ایجاد میکنید که مقادیر مختلفی از یک ویژگی را روی یک عنصر اعمال میکنند.
Cascade و مفهوم نزدیک به آن، specificity، مکانیسمهایی هستند که کنترل میکنند کدام قانون هنگام بروز چنین تداخلی اعمال شود. ممکن است تعریفی که عنصر شما را استایل میدهد، آن چیزی نباشد که انتظار دارید، بنابراین باید نحوه کار این مکانیسمها را درک کنید.
همچنین در اینجا مفهوم وراثت قابل توجه است، به این معنی که برخی از ویژگیهای CSS به طور پیشفرض مقادیر تنظیم شده روی عنصر والد عنصر فعلی را به ارث میبرند و برخی دیگر این کار را نمیکنند. این همچنین میتواند باعث رفتار غیرمنتظرهای شود.
بیایید با نگاهی سریع به مفاهیم کلیدی که با آنها سر و کار داریم شروع کنیم، سپس به نوبت به هر کدام نگاه خواهیم کرد و خواهیم دید که چگونه با یکدیگر و CSS شما تعامل دارند. درک این مفاهیم ممکن است دشوار به نظر برسد، اما با تمرین بیشتر در نوشتن CSS، واضحتر خواهند شد.
آبشاری شدن استایلشیتها. در سطح بسیار ساده، این به این معنی است که مبدا و ترتیب قوانین CSS اهمیت دارند. وقتی دو قانون هر دو دارای ویژگی یکسانی باشند، آن قانونی که در استایلشیت آخر تعریف شده است، همان قانونی است که استفاده خواهد شد. مفاهیم دیگری نیز وجود دارند که تأثیر دارند، مانند لایههای آبشاری، اما اینها پیشرفتهتر هستند و ما در اینجا به جزئیات آنها نمیپردازیم.
در مثال زیر، دو قانون داریم که میتوانند روی عنصر اعمال شوند. محتوای در نهایت به رنگ آبی در میآید. دلیل این امر این است که هر دو قانون از یک منبع هستند، یک انتخابگر عنصر یکسان دارند و بنابراین، ویژگی یکسانی دارند، اما آخرین مورد در ترتیب منبع برنده میشود.
مشخصه، الگوریتمی است که مرورگر برای تصمیمگیری در مورد اینکه کدام مقدار ویژگی به یک عنصر اعمال شود، استفاده میکند. اگر چندین قانون، انتخابگرهای مختلفی داشته باشند که مقادیر متفاوتی را برای یک ویژگی تعیین کنند و یک عنصر را هدف قرار دهند، ویژگی، مقدار ویژگی اعمال شده به عنصر را تعیین میکند. ویژگی اساساً معیاری برای میزان خاص بودن انتخاب یک انتخابگر است:
یک انتخابگر نوع (عنصر) کمتر مشخص و خاص است؛ تمام عناصر آن نوع را که در یک صفحه ظاهر میشوند انتخاب میکند، بنابراین وزن کمتری دارد. انتخابگرهای شبه عنصر همان ویژگی انتخابگرهای عناصر معمولی را دارند.
یک انتخابگر کلاس مشخص تر و خاصتر است؛ فقط عناصری را در یک صفحه انتخاب میکند که مقدار ویژگی کلاس خاصی دارند، بنابراین وزن بیشتری دارد. انتخابگرهای ویژگی و شبه کلاسها وزنی مشابه یک کلاس دارند.
یک انتخابگر شناسه حتی خاصتر است - فقط یک عنصر واحد با مقدار شناسه خاص را انتخاب میکند. بنابراین وزن بیشتری دارد.
در زیر، دوباره دو قانون داریم که میتوانند برای عنصر اعمال شوند. محتوای زیر در نهایت به رنگ قرمز درمیآید، حتی با اینکه عبارت در ترتیب کد منبع دیرتر ظاهر میشود، زیرا انتخابگر کلاس به قاعده خود سطح خصوصیت بالاتری نسبت به انتخابگر نوع h1 میدهد. تعریفی با سطح خصوصیت بالاتر که با استفاده از انتخابگر کلاس تعریف شده است، اعمال میشود.
وراثت نیز باید در این زمینه درک شود - برخی از مقادیر ویژگیهای CSS که روی عناصر والد تنظیم میشوند، توسط عناصر فرزندشان به ارث میرسند و برخی دیگر نه.
برای مثال، اگر یک رنگ و را روی یک عنصر تنظیم کنید، هر عنصر درون آن نیز با آن رنگ و فونت استایلدهی میشود، مگر اینکه مقادیر رنگ و فونت متفاوتی را مستقیماً به آنها اعمال کرده باشید.
بعضی از ویژگیها ارثبری نمیکنند - برای مثال width اگر برای یک عنصر، width برابر با ۵۰٪ تنظیم کنید، تمام فرزندان آن width برابر با ۵۰٪ از width والد خود دریافت نمیکنند. اگر اینطور بود، استفاده از CSS بسیار خستهکننده میشد!
درک چگونگی تعامل مفاهیم با یکدیگر
این سه مفهوم (آبشاری، اختصاصی بودن و وراثت) با هم کنترل میکنند که کدام CSS برای کدام عنصر اعمال شود. در بخشهای زیر، خواهیم دید که چگونه آنها با هم کار میکنند. گاهی اوقات ممکن است کمی پیچیده به نظر برسد، اما با افزایش تجربه در CSS، آنها را به خاطر خواهید آورد و اگر جزئیات را فراموش کردید، همیشه میتوانید آنها را جستجو کنید! حتی توسعهدهندگان باتجربه هم همه جزئیات را به خاطر نمیآورند.
با وراثت شروع میکنیم. در مثال زیر، یک عنصر داریم که دو سطح از لیستهای نامرتب درون آن قرار گرفتهاند. به بیرونی، حاشیه، فاصلهگذاری و رنگ فونت دادهایم.
ویژگی رنگ یک ویژگی ارثی است. بنابراین، مقدار ویژگی رنگ به فرزندان مستقیم و همچنین به فرزندان غیرمستقیم - فرزندان بیواسطه ها و آنهایی که درون لیست تودرتوی اول هستند - اعمال میشود. سپس کلاس special را به لیست تودرتوی دوم اضافه کردهایم و رنگ متفاوتی به آن اعمال کردهایم. سپس این کلاس از طریق فرزندانش به ارث میرسد.
ویژگیهایی مانند عرض (همانطور که قبلاً ذکر شد)، حاشیه، فاصلهگذاری و حاشیه، ویژگیهای ارثی نیستند. اگر قرار بود یک حاشیه توسط فرزندان در این مثال لیست به ارث برده شود، هر لیست و آیتم لیست یک حاشیه به دست میآورد - احتمالاً این تأثیری نیست که ما هرگز بخواهیم!
اگرچه هر صفحه ویژگی CSS فهرست میکند که آیا ویژگی به ارث برده میشود یا خیر، اگر بدانید که مقدار ویژگی به چه جنبهای استایل میدهد، اغلب میتوانید به طور شهودی همین را حدس بزنید.
CSS پنج مقدار ویژگی جهانی ویژه برای کنترل وراثت ارائه میدهد. هر ویژگی CSS این مقادیر را میپذیرد.
heritance
مقدار ویژگی اعمال شده به یک عنصر انتخاب شده را برابر با عنصر والد آن قرار میدهد. در واقع، این "وراثت را فعال میکند".
initial
مقدار ویژگی اعمال شده به یک عنصر انتخاب شده را به مقدار اولیه آن ویژگی تنظیم میکند.
revert
مقدار ویژگی اعمال شده به یک عنصر انتخاب شده را به سبک پیشفرض مرورگر به جای پیشفرضهای اعمال شده به آن ویژگی، بازنشانی میکند. این مقدار در بسیاری از موارد مانند unset عمل میکند.
revert-layer
مقدار ویژگی اعمال شده به یک عنصر انتخاب شده را به مقداری که در یک لایه آبشاری قبلی ایجاد شده است، بازنشانی میکند.
unset
ویژگی را به مقدار طبیعی خود بازنشانی میکند، به این معنی که اگر ویژگی به طور طبیعی به ارث رسیده باشد، مانند inherit عمل میکند، در غیر این صورت مانند initial عمل میکند.
تنظیم مجدد تمام مقادیر ویژگیها
ویژگی خلاصه CSS به نام all میتواند برای اعمال یکی از این مقادیر وراثت به (تقریباً) همه ویژگیها به طور همزمان استفاده شود. مقدار آن میتواند هر یک از مقادیر وراثت (inherit، initial، revert، revert-layer یا unset) باشد. این یک روش مناسب برای لغو تغییرات ایجاد شده در سبکها است تا بتوانید قبل از شروع تغییرات جدید به یک نقطه شروع شناخته شده برگردید.
در مثال زیر، دو blockquote داریم. در اولی، استایل به خود عنصر blockquote اعمال شده است. در دومی، یک کلاس به blockquote اعمال شده است که مقدار all را unset قرار میدهد.
اکنون میدانیم که وراثت دلیل این است که چرا یک پاراگراف که در اعماق ساختار HTML شما قرار دارد، همان رنگی را دارد که CSS اعمال شده بر روی بدنه دارد. از دروس مقدماتی، ما درک کردهایم که چگونه CSS اعمال شده بر روی چیزی را در هر نقطه از سند تغییر دهیم - چه با اختصاص CSS به یک عنصر و چه با ایجاد یک کلاس. اکنون بررسی خواهیم کرد که چگونه آبشار تعریف میکند کدام قوانین CSS زمانی اعمال میشوند که بیش از یک بلوک سبک، ویژگی یکسانی را با مقادیر مختلف، بر روی یک عنصر اعمال میکنند.
سه عامل برای بررسی وجود دارد که در اینجا به ترتیب اهمیت فزاینده فهرست شدهاند. موارد بعدی بر موارد قبلی غلبه میکنند:
- ترتیب منبع
- مشخصه
- اهمیت
ما به این موارد نگاه خواهیم کرد تا ببینیم مرورگرها چگونه دقیقاً متوجه میشوند که چه CSS باید اعمال شود.
قبلاً دیدهایم که ترتیب منبع چگونه برای آبشار اهمیت دارد. اگر بیش از یک قانون داشته باشید که همه آنها دقیقاً وزن یکسانی داشته باشند، آنگاه قانونی که در CSS آخر میآید برنده خواهد شد. میتوانید این را اینگونه در نظر بگیرید: قانونی که به خود عنصر نزدیکتر است، قوانین قبلی را بازنویسی میکند تا زمانی که آخرین قانون برنده شود و عنصر را استایلدهی کند.
ترتیب منبع فقط زمانی اهمیت دارد که وزن ویژگی قوانین یکسان باشد، بنابراین بیایید در ادامه به ویژگی ویژگی بپردازیم.
شما اغلب با موقعیتی مواجه میشوید که میدانید یک قانون در صفحه استایل بعداً میآید، اما یک قانون قبلی و متناقض اعمال میشود. این اتفاق میافتد زیرا قانون قبلی مشخصه بالاتری دارد - خاصتر است و بنابراین توسط مرورگر به عنوان قانونی که باید عنصر را استایلبندی کند، انتخاب میشود.
همانطور که قبلاً در این درس دیدیم، یک انتخابگر کلاس وزن بیشتری نسبت به یک انتخابگر عنصر دارد، بنابراین ویژگیهای تعریف شده در بلوک سبک کلاس، ویژگیهای تعریف شده در بلوک سبک عنصر را لغو میکنند.
نکته قابل توجه این است که اگرچه ما در مورد انتخابگرها و قوانینی که بر متن یا مؤلفهای که انتخاب میکنند اعمال میشود، فکر میکنیم، اما کل قانون بازنویسی نمیشود، بلکه فقط ویژگیهایی که در چندین مکان تعریف شدهاند، بازنویسی میشوند.
این رفتار به جلوگیری از تکرار در CSS شما کمک میکند. یک روش معمول این است که سبکهای عمومی را برای عناصر پایه تعریف کنید و سپس کلاسهایی را برای آنهایی که متفاوت هستند ایجاد کنید. به عنوان مثال، در صفحه استایل زیر، ما سبکهای عمومی را برای عناوین سطح 2 تعریف کردهایم و سپس کلاسهایی ایجاد کردهایم که فقط برخی از ویژگیها و مقادیر را تغییر میدهند. مقادیری که در ابتدا تعریف شدهاند، روی همه سرعنوانها اعمال میشوند، سپس مقادیر خاصتر روی سرعنوانهای دارای کلاس اعمال میشوند.
حال بیایید نگاهی به نحوه محاسبه ویژگی توسط مرورگر بیندازیم. ما از قبل میدانیم که یک انتخابگر عنصر، ویژگی کمی دارد و میتواند توسط یک کلاس بازنویسی شود. اساساً یک مقدار بر حسب امتیاز به انواع مختلف انتخابگرها اختصاص داده میشود و جمع این امتیازها، وزن آن انتخابگر خاص را به شما میدهد که سپس میتوان آن را در مقایسه با سایر تطابقهای بالقوه ارزیابی کرد.
میزان ویژگی یک انتخابگر با استفاده از سه مقدار (یا مؤلفه) مختلف اندازهگیری میشود که میتوان آنها را به ترتیب به عنوان ستونهای ID، CLASS و ELEMENT با ارزش صدها، دهها و یکها در نظر گرفت:
IDها: برای هر انتخابگر ID موجود در انتخابگر کلی، در این ستون یک (100 امتیاز) امتیاز بگیرید.
کلاسها: برای هر انتخابگر کلاس، انتخابگر ویژگی یا شبه کلاس موجود در انتخابگر کلی، در این ستون یک (10 امتیاز) امتیاز بگیرید.
عناصر: برای هر انتخابگر عنصر یا شبه عنصر موجود در انتخابگر کلی، در این ستون یک (1 امتیاز) امتیاز بگیرید.
جدول زیر چند مثال مجزا را نشان میدهد تا شما را با این موضوع آشنا کند. سعی کنید این موارد را مرور کنید و مطمئن شوید که دلیل ویژگی خاصی که به آنها دادهایم را درک میکنید.
| انتخابگر | شناسهها #id | کلاسها .class | عناصر <> | مجموع میزان خاص بودن |
|---|
| h1 | 0 | 0 | 1 | 0-0-1 |
| h1 + p::first-letter | 0 | 0 | 3 | 0-0-3 |
| li > a[href*="en-US"] > .inline-warning | 0 | 2 | 2 | 0-2-2 |
| #identifier | 1 | 0 | 0 | 1-0-0 |
خب، اینجا چه اتفاقی میافتد؟ اول از همه، ما فقط به هفت قانون اول این مثال علاقهمندیم و همانطور که متوجه خواهید شد، مقادیر ویژگی آنها را در یک کامنت قبل از هر کدام قرار دادهایم.
دو انتخابگر اول بر سر سبکبندی رنگ پسزمینه لینک رقابت میکنند. انتخابگر دوم برنده میشود و رنگ پسزمینه را آبی میکند زیرا یک انتخابگر شناسه اضافی در زنجیره دارد: ویژگی آن 2-0-1 در مقابل 1-0-1 است.
انتخابگرهای 3 و 4 بر سر سبکبندی رنگ متن لینک رقابت میکنند. انتخابگر دوم برنده میشود و متن را سفید میکند زیرا اگرچه یک انتخابگر عنصر کمتر دارد، انتخابگر از دست رفته با یک انتخابگر کلاس جایگزین میشود که وزن بیشتری نسبت به انتخابگرهای عنصر دارد. ویژگی برنده 1-1-3 در مقابل 1-0-4 است.
انتخابگرهای 5 تا 7 بر سر سبکبندی حاشیه لینک هنگام نگه داشتن موس روی آن رقابت میکنند. انتخابگر ۶ به وضوح در برابر انتخابگر ۵ با ویژگی ۰-۲-۳ در مقابل ۰-۲-۴ شکست میخورد؛ این انتخابگر یک انتخابگر عنصر کمتر در زنجیره دارد. با این حال، انتخابگر ۷ هر دو انتخابگر ۵ و ۶ را شکست میدهد زیرا تعداد زیرانتخابگرهای آن در زنجیره با انتخابگر ۵ برابر است، اما یک عنصر با یک انتخابگر کلاس جایگزین شده است. بنابراین ویژگی برنده ۰-۳-۳ در مقابل ۰-۲-۳ و ۰-۲-۴ است.
هر نوع انتخابگر سطح اختصاصی خود را دارد که نمیتواند توسط انتخابگرهایی با سطح اختصاصی پایینتر بازنویسی شود. برای مثال، یک میلیون انتخابگر کلاس با هم نمیتوانند اختصاصیت یک انتخابگر id را بازنویسی کنند.
بهترین راه برای ارزیابی اختصاصیت، امتیازدهی جداگانه سطوح اختصاصیت از بالاترین شروع و در صورت لزوم به پایینترین است. فقط زمانی که بین نمرات انتخابگرها در یک ستون اختصاصیت تساوی وجود داشته باشد، باید ستون بعدی را ارزیابی کنید. در غیر این صورت، میتوانید انتخابگرهای اختصاصیت پایینتر را نادیده بگیرید زیرا آنها هرگز نمیتوانند انتخابگرهای اختصاصیت بالاتر را بازنویسی کنند.
شناسهها در مقابل کلاسها
انتخابگرهای شناسه از خاص بودن بالایی برخوردارند. این بدان معناست که سبکهایی که بر اساس تطابق با یک انتخابگر شناسه اعمال میشوند، سبکهای اعمال شده بر اساس سایر انتخابگرها، از جمله انتخابگرهای کلاس و نوع، را لغو میکنند. از آنجا که یک شناسه فقط یک بار در یک صفحه میتواند رخ دهد و به دلیل ویژگی بالای انتخابگرهای شناسه، ترجیح داده میشود که به جای شناسه، یک کلاس به یک عنصر اضافه شود.
اگر استفاده از شناسه تنها راه برای هدف قرار دادن عنصر است - شاید به این دلیل که به نشانهگذاری دسترسی ندارید و نمیتوانید آن را ویرایش کنید - استفاده از شناسه را در یک انتخابگر ویژگی، مانند در نظر بگیرید.
استایلهای درونخطی، یعنی تعریف سبک درون یک ویژگی استایل، صرف نظر از میزان اولویت، بر تمام استایلهای معمولی اولویت دارند. چنین تعریفهایی انتخابگر ندارند، اما اولویت آنها را میتوان به صورت 1-0-0-0 تعبیر کرد؛ همیشه بیشتر از هر وزن اولویت دیگری، صرف نظر از تعداد شناسهها در انتخابگرها.
یک بخش خاص از CSS وجود دارد که میتوانید از آن برای لغو تمام محاسبات فوق، حتی سبکهای درونخطی، استفاده کنید - پرچم . با این حال، هنگام استفاده از آن باید بسیار مراقب باشید. این پرچم برای تبدیل یک جفت ویژگی و مقدار به خاصترین قانون استفاده میشود و در نتیجه قوانین عادی آبشار، از جمله سبکهای درونخطی عادی را لغو میکند.
دانستن وجود پرچم مفید است تا وقتی در کد دیگران به آن برخوردید، بدانید چیست. با این حال، اکیداً توصیه میکنیم هرگز از آن استفاده نکنید، مگر اینکه کاملاً مجبور باشید. پرچم نحوه عملکرد معمول آبشار را تغییر میدهد، بنابراین میتواند اشکالزدایی مشکلات CSS را، به خصوص در یک فایل استایل شیت بزرگ، واقعاً دشوار کند.
به این مثال نگاهی بیندازید که در آن دو پاراگراف داریم که یکی از آنها دارای شناسه است.
بیایید این را بررسی کنیم تا ببینیم چه اتفاقی میافتد - اگر درک آن برایتان دشوار است، سعی کنید برخی از ویژگیها را حذف کنید تا ببینید چه اتفاقی میافتد:
خواهید دید که مقادیر رنگ و پدینگ قانون سوم اعمال شدهاند، اما رنگ پسزمینه اعمال نشده است. چرا؟ واقعاً، هر سه باید مطمئناً اعمال شوند زیرا قوانین بعدی در ترتیب منبع معمولاً قوانین قبلی را لغو میکنند.
با این حال، قوانین بالاتر از آن برنده میشوند زیرا انتخابگرهای کلاس نسبت به انتخابگرهای عنصر، ویژگی بالاتری دارند.
هر دو عنصر دارای کلاس better هستند، اما عنصر دوم نیز دارای شناسه winning است. از آنجایی که شناسهها ویژگی حتی بالاتری نسبت به کلاسها دارند، رنگ پسزمینه قرمز و حاشیه سیاه ۱ پیکسلی باید هر دو به عنصر دوم اعمال شوند، به طوری که عنصر اول رنگ پسزمینه خاکستری و بدون حاشیه را دریافت کند، همانطور که توسط کلاس مشخص شده است.
عنصر دوم رنگ پسزمینه قرمز را دریافت میکند، اما بدون حاشیه. چرا؟ به دلیل پرچم در قانون دوم. اضافه کردن پرچم بعد از به این معنی است که این تعریف بر مقدار حاشیه در قانون قبلی غلبه خواهد کرد، حتی اگر انتخابگر شناسه از ویژگی بالاتری برخوردار باشد.
تنها راه برای لغو یک تعریف مهم، اضافه کردن یک تعریف مهم دیگر با همان ویژگی در ترتیب منبع یا تعریفی با ویژگی بالاتر است.
یکی از موقعیتهایی که ممکن است مجبور به استفاده از پرچم شوید، زمانی است که روی یک CMS کار میکنید که نمیتوانید ماژولهای اصلی CSS را ویرایش کنید و واقعاً میخواهید یک سبک درونخطی یا یک تعریف مهم را که به هیچ روش دیگری قابل لغو نیست، لغو کنید. اما واقعاً، اگر میتوانید از آن اجتناب کنید، از آن استفاده نکنید.
در نهایت، لازم به ذکر است که اولویت یک اعلان CSS به نوع استایلشیت تعیینشده بستگی دارد.
کاربران میتوانند استایلشیتهای سفارشی را طوری تنظیم کنند که استایلهای توسعهدهنده را نادیده بگیرند. برای مثال، یک کاربر کمبینا ممکن است بخواهد اندازه فونت را در تمام صفحات وبی که بازدید میکند دو برابر اندازه معمولی تنظیم کند تا خواندن آن آسانتر شود.
اعلانهای متناقض به ترتیب زیر اعمال میشوند و اعلانهای بعدی، اعلانهای قبلی را لغو میکنند: (از کمتر به بیشتر)
۶- اعلانها در برگههای استایل عامل کاربر (مثلاً استایلهای پیشفرض مرورگر، که وقتی هیچ سبک دیگری تنظیم نشده است استفاده میشوند).
۵- اعلانهای عادی در برگههای استایل کاربر (استایلهای سفارشی تنظیم شده توسط کاربر).
۴- اعلانهای عادی در برگههای استایل نویسنده (اینها سبکهایی هستند که توسط ما، توسعهدهندگان وب، تنظیم شدهاند).
۳- اعلانهای مهم در برگههای استایل نویسنده.
۲- اعلانهای مهم در برگههای استایل کاربر.
۱- اعلانهای مهم در برگههای استایل عامل کاربر.
توجه: ترتیب اولویت برای سبکهایی که با علامتگذاری شدهاند، معکوس میشود. لغو کردن برگههای سبک توسعهدهندگان وب توسط برگههای سبک کاربر منطقی است، بنابراین میتوان طراحی را مطابق با هدف حفظ کرد. با این حال، گاهی اوقات کاربران دلایل خوبی برای لغو سبکهای توسعهدهنده وب دارند، همانطور که در بالا ذکر شد، و این امر را میتوان با استفاده از در قوانین خود به دست آورد.
