فرادرسمفاهیم آبشار و وراثت در CSS — آموزش CSS (بخش پنجم)
هدف از این مقاله، گسترش بینش شما در مورد برخی مفاهیم بنیادی CSS است که شامل «آبشار» (cascade)، «سطح خصوصیت» (specificity) و «وراثت» (inheritance) است. این مفاهیم شیوه اعمال CSS را روی HTML و همچنین شیوه حل تعارض‌ها را کنترل می‌کنند. با ما تا انتهای این مقاله همراه باشید تا مفاهیم آبشار و وراثت در CSS را بیاموزید.
برای مطالعه بخش قبلی روی لینک زیر کلیک کنید:
در طی این مقاله شاید فکر کنید که این مفاهیم ارتباط کمی با بخش‌های دیگر این سری آموزش‌ها دارند و بیشتر حالت تئوریک دارند، اما داشتن درکی از این مفاهیم در ادامه کار موجب آسودگی زیادی برای شما خواهد شد. پیشنهاد می‌کنیم این مقاله را با دقت مطالعه کنید و پیش از ادامه مطالعه بقیه بخش‌ها، یافته‌های خود را به دقت مورد بررسی قرار دهید.
پیش‌نیازهای این مقاله، داشتن سواد عمومی رایانه، نصب برخی نرم‌افزارهای مقدماتی، داشتن درکی بنیادی از طرز کار با فایل‌ها، مبانی HTML و همچنین داشتن ایده‌ای از طرز کار CSS است. هدف از مطالعه این مقاله آشنایی با مفاهیم سطح خصوصیت و آبشاری بودن CSS و همچنین طرز کار وراثت در این زبان است.
جهت یادگیری قالب‌بندی Grid در CSS ، مطالعه مقاله زیر پیشنهاد می‌شود:
قواعد متعارض
CSS اختصاری برای عبارت «Cascading Style Sheets» (استایل‌شیت‌های آبشاری) است که درک واژه اول یعنی Cascading حائز اهمیت بسیار بالایی است، چون درک طرز کار آبشاری بودن این زبان کلید درک CSS است.
در زمان کار روی پروژه‌ها ممکن است لحظه‌ای پیش بیاید که متوجه شوید CSS اعمال شده روی یک عنصر کار نمی‌کند. به طور معمول این مشکل ناشی از این واقعیت است که دو قاعده ایجاد شده که روی آن عنصر منفرد اعمال می‌شوند. Cascade و مفاهیم کاملاً مرتبط با آن یعنی Specify مکانیسم‌هایی هستند که تعیین می‌کنند در زمان بروز چنین تعارض‌هایی، کدام قاعده باید اعمال شود. در این موارد آن قاعده‌ای که روی عنصر اعمال می‌شود، ممکن است از قاعده‌ای که شما انتظار دارید متفاوت باشد. از این رو باید با طرز کار این مکانیسم‌ها آشنا باشید.
همچنین آن چیزی که در اینجا مهم است مفهوم وراثت است. منظور از وراثت این است که برخی مشخصه‌های CSS به صورت پیش‌فرض مقادیر خود را روی عنصر جاری از عنصر والد به ارث می‌برند و برخی چنین عمل نمی‌کنند. این وضعیت همچنین می‌تواند موجب بروز رفتاری شود که انتظار ندارید.
کار خود را با برخی نکات مهم که با آن‌ها سر و کار داریم آغاز می‌کنیم، سپس به نوبت به بررسی شیوه تعامل هر یک با همدیگر و CSS می‌پردازیم. این وضعیت می‌تواند تا حدودی شبیه به یادگیری مفاهیم پیچیده باشد، اما زمانی که به تمرین نوشتن CSS بپردازید، روش کار برای شما بدیهی‌تر خواهد بود.
آبشاری بودن
استایل‌شیت‌های آبشاری در ساده‌ترین سطح به این معنی است که ترتیب قواعد CSS مهم هستند. زمانی که دو قاعده که Specificity یکسانی دارند روی یک عنصر اعمال می‌شوند، آن که در CSS بعدتر می‌آید، همان است که در عمل اعمال خواهد شد.
در مثال زیر دو قاعده داریم که روی h1 اعمال می‌شوند. h1 در نهایت به رنگ آبی در می‌آید. این قواعد یک سلکتور یکسان دارند و از این رو واجد specificity یکسانی هستند. بنابراین آن که در ترتیب بعدتر می‌آید برنده می‌شود.
سطح خصوصیت
سطح خصوصیت یا Specificity به شیوه تصمیم‌گیری مرورگر در مورد اعمال قواعد چندگانه با سلکتورهای مختلف گفته می‌شود، اما می‌تواند روی یک عنصر واحد نیز اعمال شود. Specificity اساساً معیاری برای میزان خاص بودن انتخاب یک سلکتور به صورت زیر است:
- اگر سلکتور یک عنصر سطح خصوصیت پایین‌تری داشته باشد - همه عناصر از نوع آن که در یک صفحه ظاهر می‌شوند را انتخاب می‌کند و از این رو امتیاز پایین‌تری به دست می‌آورد.
- یک سلکتور کلاس که سطح خصوصیت بالاتری دارد – تنها عناصری را روی صفحه انتخاب می‌کند که یک مقدار خصوصیت class خاص داشته باشند و از این رو امتیاز بالاتر می‌گیرد.
اینک نوبت به بررسی این مفاهیم با مثال می‌رسد. در ادامه دو قاعده را می‌بینید که می‌توانند روی h1 اعمال شوند. h1 زیر در نهایت به رنگ قرمز در می‌آید. زیرا سلکتور کلاس قاعده خود را به سطح خصوصیت بالاتر می‌دهد و از این رو علی‌رغم این که قاعده با همان عنصر در ادامه کد مجدداً ظاهر می‌شود، اما سلکتور اول اعمال خواهد شد.
در مورد جزییات امتیازبندی سطح خصوصیت و موارد دیگر در ادامه بیشتر صحبت خواهیم کرد.
وراثت
وراثت نیز باید در همین چارچوب درک شود. برخی مقادیر مشخصه CSS روی عناصر والد تنظیم می‌شوند و به عناصر فرزند به ارث می‌رسند، و برخی دیگر چنین حالتی ندارند.
برای نمونه اگر یک color و font-family را روی عنصری تنظیم کنید، هر عنصر درون آن نیز با آن رنگ و فونت استایل‌بندی می‌شود مگر این که مقادیر رنگ و یا فونت دیگری مستقیماً برای آن‌ها تعیین شده باشد.
برخی مشخصه‌ها به ارث نمی‌رسند. برای نمونه اگر مقدار width یک عنصر را روی 50% تعیین کنید، همه فرزندان آن عرضی برابر با 50% عرض والد خود نمی‌گیرند. اگر چنین حالتی وجود می‌داشت، استفاده از CSS بسیار وحشتناک می‌شد.
درک طرز کار این مفاهیم در کنار هم
سه مفهومی که تا به اینجای مقاله معرفی کردیم، در کنار همدیگر می‌توانند تعیین کنند که کدام CSS روی چه عنصری اعمال می‌شود.
در بخش‌های بعدی طرز کار آن‌ها را در کنار همدیگر خواهیم دید. برخی اوقات این وضعیت کمی پیچیده به نظر می‌رسد، اما زمانی که تجربه بیشتری در CSS به دست آورید، آن‌ها را به خاطر می‌سپارید و البته می‌توانید جزییاتی که فراموش کرده‌اید را نیز با مراجعه مجدد به خاطر آورید. حتی توسعه‌دهندگان با تجربه نیز همه این جزییات را به خاطر نمی‌سپارند.
درک وراثت
ما توضیح خود را از وراثت آغاز می‌کنیم. در مثال زیر یک h1 داریم که دو سطح از لیست‌های نامرتب تو در تو درون خود دارد. به <ul> بیرونی یک حاشیه، فاصله‌گذاری و رنگ قلم می‌دهیم.
رنگ روی فرزندان مستقیم و همچنین غیرمستقیم، یعنی <li>-های فرزند بی‌واسطه و مواردی که درون لیست تودرتوی نخست هستند اعمال می‌شود. سپس یک کلاس special به لیست تودرتوی دوم اضافه می‌کنیم و رنگ متفاوتی به آن می‌دهیم. این خصوصیت از طریق فرزندان به ارث می‌رسد.
چیزهایی مانند عرض (چنان‌که پیش‌تر اشاره کردیم)، لبه، فاصله‌گذاری، و حاشیه‌ها ارث‌بری ندارند. اگر لازم باشد یک حاشیه از سوی فرزندان لیست به ارث برسد، هر لیست منفرد و آیتم لیست می‌تواند یک حاشیه بگیرد و این احتمالاً وضعیتی نیست که مطابق انتظار ما باشد!
این که کدام مشخصه‌ها به صورت پیش‌فرض ارث‌بری دارند و یا ندارند عموماً وضعیت معقولی دارد.
کنترل کردن وراثت
CSS چهار مقدار مشخصه برای کنترل کردن وراثت ارائه کرده است. هر مشخصه CSS سه مقدار می‌پذیرد.
- Inherit – مقدار مشخصه اعمال شده روی یک عنصر منتخب را به همان مقدار عنصر والد تعیین می‌کند. این وضعیت در عمل موجب فعال شدن ارث‌بری می‌شود.
- Initial – مقدار مشخصه اعمال شده روی یک عنصر منتخب را به همان مقدار تعیین شده برای عنصر در استایل‌شیت پیش‌فرض مرورگر تنظیم می‌کند. اگر هیچ مقداری از سوی استایل‌شیت پیش‌فرض مرورگر تعیین شده نباشد و مشخصه به صورت طبیعی ارث‌بری کند، در این صورت مقدار مشخصه به جای آن به صورت inherit خواهد بود.
- unset - مشخصه را به مقدار طبیعی‌اش ریست می‌کند. معنی این حرف آن است که اگر مشخصه به صورت طبیعی ارث‌بری داشته باشد، مانند inherit عمل می‌کند و در غیر این صورت مانند initial عمل خواهد کرد.
نکته: یک مقدار جدیدتر به نام revert نیز وجود دارد که پشتیبانی مرورگر محدودی دارد.
شما می‌توانید در مثال زیر به فهرستی از لینک‌ها نگاه کنید و با طرز کار مقادیر سراسری آشنا شوید. مثال زنده زیر امکان بازی کردن با CSS و دیدن اتفاقاتی که پس از هر تغییر رخ می‌دهند را فراهم کرده است. بازی کردن با کد در واقع بهترین روش برای مسلط شدن بر HTML و CSS است.
برای نمونه روی آیتم لیست دوم کلاس my-class-1 اعمال شده است. این وضعیت رنگ یک عنصر تودرتوی درونی را به صورت ارث‌بری شده تعیین می‌کند. فکر می‌کنید اگر این قاعده را حذف کنیم، رنگ لینک چه تغییری می‌یابد؟ آیا می‌دانید که چرا لینک‌های سوم و چهارم، آن رنگی که می‌بینید را دارند؟ اگر نمی‌دانید توضیح‌های بالا را مجدداً مطالعه کنید. اگر برای مثال با کد a { color: red; }، یک رنگ جدید برای عنصر <a> تعیین کنیم، رنگ کدام یک از لینک‌ها عوض می‌شود؟
ریست کردن همه مقادیر مشخصه
مشخصه میانبر CSS به نام all می‌تواند برای اعمال یکی از این مقادیر وراثت روی (تقریباً) همه مشخصه‌ها به صورت یکباره مورد استفاده قرار گیرد. مقدار آن می‌تواند هر یک از مقادیر وراثت یعنی inherit ،initial ،unset یا revert باشد. این یک روش راحت برای بازگردانی تغییرات صورت گرفته روی استایل است و به این ترتیب می‌توانیم به نقطه آغازین مشخصی قبل از آغاز تغییرهای جدید برسیم.
در مثال زیر دو نقل قول داریم. در نقل قول اول، استایل مستقیماً روی عنصر اعمال شده است. در مورد دومی، کلاسی اعمال شده که مقدار all را به صورت unset تنظیم کرده است.
تلاش کنید all را روی برخی مقادیر ممکن دیگر تعیین کنید و تفاوت‌ها را ببینید.
درک آبشاری بودن
ما اینک درک کردیم که چرا وقتی عنصری در اعماق ساختار تودرتوی HTML قرار می‌گیرد همان رنگی که CSS روی body اعمال کرده است را می‌گیرد. در بخش‌های قبلی نیز درکی از چگونگی اعمال CSS روی یک عنصر در سند چه از طریق انتساب CSS به یک عنصر یا ایجاد یک کلاس به دست آورده‌ایم. اینک نگاهی دقیق خواهیم داشت به طرز کار آبشاری بودن در مورد این که کدام قواعد CSS در زمان اعمال بیش از یک استایل‌بندی روی یک عنصر عمل می‌کنند.
در این زمینه باید سه عامل را در نظر بگیریم که در ادامه به ترتیب کاهش اهمیت رتبه‌بندی شده‌اند. در واقع موارد بالاتر بر موارد پایین‌تر تقدم دارند.
- اهمیت
- سطح خصوصیت
- ترتیب در سورس کد
ما سه عامل فوق را به ترتیب معکوس بررسی می‌کنیم تا ببینیم مرورگرها در زمان اعمال CSS دقیقاً چگونه عمل می‌کنند.
ترتیب در سورس کد
پیش‌تر دیدیم که ترتیب در سورس چه اهمیتی در آبشاری بودن دارد. اگر بیش از یک قاعده داشته باشید که وزن دقیقاً یکسانی داشته باشند، آن قاعده‌ای برنده خواهد بود که در CSS متاخرتر است. این وضعیت را می‌توان این گونه تصور کرد که قواعد نزدیک‌تر به خود عنصر انواع قدیمی‌تر را لغو می‌کنند تا این که آخری در زمینه استایل‌بندی عنصر برنده می‌شود.
سطح خصوصیت
حال که این واقعیت را درک کردید که ترتیب در سورس کد اهمیت دارد، باید بدانید برخی موقعیت‌ها وجود دارند که قاعده‌ای در سورس کد در مراحل متأخرتر می‌آید، اما یک قاعده متقدم و معارض اعمال می‌شود. دلیل این وضع آن است که قاعده متقدم سطح خصوصیت (Specificity) بالاتری دارد، یعنی خاص‌تر است و از این رو از سوی مرورگر به عنوان قاعده‌ای که باید عنصر را استایل‌بندی کند انتخاب می‌شود.
چنان که در بخش‌های قبلی این مقاله دیدیم، سلکتور کلاس، وزن بیشتری از یک سلکتور عنصر دارد و از این رو مشخصه‌های تعریف شده روی کلاس، انواعی را که مستقیماً روی آن عنصر اعمال شده‌اند نقض می‌کنند.
نکته‌ای که باید در این جا توجه کرد این است که گرچه در این جا در مورد سلکتورها و قواعدی که روی عنصر منتخب اعمال می‌شوند صحبت می‌کنیم، اما این کل قاعده نیست که بازنویسی می‌شود، بلکه فقط مشخصه‌هایی که تطبیق می‌یابند بازنویسی خواهند شد.
این رفتار از بروز تکرار در CSS جلوگیری می‌کند. یک رویه معمول این است که استایل‌های عمومی برای عناصر ابتدایی تعریف می‌شوند و سپس کلاس‌هایی برای آن موارد که تفاوت دارند ایجاد می‌شود. برای نمونه در استایل‌شیت زیر برخی استایل‌های ژنریک برای عناوین سطح 2 تعریف کرده‌ایم و سپس برخی کلاس‌ها ایجاد کرده‌ایم که تنها برخی مشخصه‌ها و مقادیر را تغییر می‌دهند. این مقادیر تعریف شده اولیه روی همه عناوین اعمال می‌شوند و سپس مقادیر خاص‌تر روی عناوینی که آن کلاس را دارند اعمال می‌شوند.
;
اکنون به بررسی شیوه محاسبه سطح خصوصیت از سوی مرورگر می‌پردازیم. از قبل می‌دانیم که سلکتور یک عنصر، سطح خصوصیت پایینی دارد و می‌تواند از سوی یک کلاس بازنویسی شود. اساساً امتیازهای متفاوتی در نقاط مختلف به انواع مختلفی از سلکتورها اعطا می‌شود و با جمع زدن این موارد در کنار هم، وزن کلی آن سلکتور خاص به دست می‌آید که می‌توان در ادامه آن را با موارد دیگر مقایسه کرد.
مقدار سطح خصوصیت یک سلکتور با استفاده از چهار مقدار (یا مؤلفه) مختلف اندازه‌گیری می‌شود که آن‌ها را می‌توان مانند هزارگان، صدگان، دهگان و یکان تصور کرد. چهار رقم منفرد که در چهار ستون قرار دارند.
- هزارگان: در صورتی که اعلان درون یک خصوصیت style قرار دارد، یعنی استایل درون‌خطی است مقدار آن یک خواهد بود. چنین اعلانی سلکتور ندارد و از این رو سطح خصوصیت آن 1000 است.
- صدگان: در این ستون برای هر ID سلکتور که درون سلکتور کلی است، عدد یک قرار داده می‌شود.
- دهگان: در این ستون برای هر سلکتور کلاس، سلکتور خصوصیت یا شبه کلاس قرار داده شده درون سلکتور کلی، عدد یک در نظر گرفته می‌شود.
- یکان: در این ستون برای هر سلکتور عنصر یا شبه عنصر که درون سلکتور کلی قرار دارد، عدد یک قرار داده می‌شود.
نکته: سلکتور سراسری (*)، ترکیب‌کننده‌ها (+, >, ~, ' ') و شبه کلاس منفی‌ساز (not:) هیچ تأثیری روی سطح خصوصیت ندارند.
در جدول زیر چند مثال منفرد مشاهده می‌کنید که شما را با این محاسبات بیشتر آشنا می‌کنند. این موارد را بررسی کنید و مطمئن شوید که دلیل تعیین میزان خصوصیت آن‌ها را درک می‌کنید. در این مثال‌ها به جزییات سلکتورها نپرداخته‌ایم.
پیش از ادامه بحث به مثال زیر نیز توجه کنید.
ابتدا باید اعلام کنیم که ما تنها به هفت قاعده نخست کد فوق علاقه‌مند هستیم. چنان‌که متوجه شده‌اید مقادیر سطح خصوصیت را در کامنت های زیر هر یک اعلام کرده‌ایم.
- دو سلکتور اول بر سر استایل‌بندی رنگ پس‌زمینه لینک در رقابت هستند. سلکتور دوم برنده می‌شود و رنگ پس‌زمینه را آبی می‌کند، زیرا یک سلکتور ID دوم در زنجیره خود دارد که سطح خصوصیت آن 201 است و بالاتر از مقدار اولی یعنی 101 است.
- سلکتورهای سوم و چهارم بر سر استایل‌بندی رنگ متن لینک در رقابت هستند. دومی برنده می‌شود و رنگ متن را سفید می‌کند زیرا گرچه یک سلکتور عنصر کمتر دارد، اما سلکتور مفقود با یک سلکتور کلاس جایگزین شده است که ده برابر بیش از آن ارزش دارد. از این رو سطح خصوصیت 113 در برابر 104 می‌شود.
- سلکتورهای 5 تا 7 بر سر استایل‌بندی حاشیه لینک در زمانی که ماوس روی آن می‌رود (Hover) در رقابت هستند. سلکتور شش با سطح خصوصیت 23 در برابر 24 رقابت را به سلکتور 5 واگذار می‌کند، چون سکتورهای عنصر کمتری در زنجیره دارد. اما سلکتور هفتم هر دو سلکتور پنج و شش را شکست می‌دهد، زیرا تعداد سلکتورهای فرعی آن در زنجیره پنج است، اما یک عنصر با سلکتور کلاس تعویض شده است. بنابراین سطح خصوصیت برنده 33 است که از 23 و 24 بیشتر است.
نکته: توجه کنید که مثال فوق تقریبی است که برای سهولت درک شما طرح شده است. در عمل هر سلکتور سطح خصوصیت خاص خود را دارد که نمی‌تواند از سوی سلکتورهای با سطح خصوصیت پایین‌تر بازنویسی شود. برای نمونه اگر یک میلیون سلکتور کلاس با هم ترکیب شوند، نمی‌توانند قاعده‌های یک سلکتور id را بازنویسی کنند.
یک روش دقیق‌تر برای ارزیابی سطح خصوصیت، امتیازبندی سطوح خصوصیت به صورت منفرد است که از بالاترین مقدار آغاز می‌شوند و در صورت لزوم به سمت پایین‌ترین مقدار حرکت می‌کنند. تنها زمانی که تعارضی بین امتیازهای سلکتور درون یک سطح خصوصیت رخ دهد به ارزیابی سطح آن‌ها نیاز داریم، در غیر این حالت سلکتورهای با سطح خصوصیت پایین‌تر می‌توانند نادیده گرفته شوند، زیرا هرگز نمی‌توانند سطوح با خصوصیت بالاتر را بازنویسی کنند.
کلیدواژه important!
یک بخش خاصی در CSS وجود دارد که می‌تواند برای کنار زدن همه محاسبات فوق مورد استفاده قرار گیرد و آن important! است، با این حال باید در مورد استفاده از آن هوشیار باشیم. این کلیدواژه برای این طراحی شده است که یک مشخصه و مقدار آن بالاترین سطح خصوصیت را به دست آورند و از این رو قواعد عادی آبشار را بر هم می‌زند.
به مثال زیر توجه کنید. در این جا دو پاراگراف داریم که یکی از آن‌ها یک ID دارد.
در ادامه کد فوق را بررسی می‌کنیم تا ببینیم چه اتفاقاتی رخ می‌دهند. اگر این توضیحات را دشوار یافتید می‌توانید با حذف برخی کدها به طور عملی با تغییر رفتار عناصر آشنا شوید.
- چنان که می‌بینید مقادیر color و padding در قاعده سوم اعمال شده‌اند، اما background-color اعمال نشده است. در واقع هر سه این موارد قطعاً باید اعمال شوند، زیرا قواعد متاخرتر در ترتیب سورس عموماً قواعد قبلی را کنار می‌زنند.
- با این حال قواعد بالاتر برنده می‌شوند، زیرا سلکتورهای کلاس سطح خصوصیت بالاتری نسبت به سلکتورهای عنصر دارند.
- هم دو عنصر دارای یک class از نوع better هستند، اما عنصر دوم دارای id به نام winning نیز هست. از آنجا که ID-ها، دارای سطح خصوصیت بالاتری نسبت به کلاس‌ها هستند، رنگ پس‌زمینه قرمز و حاشیه سیاه 1 پیکسلی باید هر دو روی عنصر دوم اعمال شوند و عنصر اول، رنگ پس‌زمینه خاکستری و بدون حاشیه باشد که به وسیله کلاس تعیین شده است.
- عنصر دوم رنگ پس‌زمینه قرمز می‌گیرد، اما حاشیه ندارد. دلیل این امر آن است که اعلان important! در قاعده دوم وجود دارد. گنجاندن آن پس از border: none به این معنی است که این اعلان بر مقدار حاشیه در قاعده قبلی پیروز می‌شود، گرچه ID دارای سطح خصوصیت بالاتری است.
نکته: تنها روش برای کنار زدن این اعلان important! این است که یک اعلان important! دیگر روی اعلانی با همان سطح خصوصیت در ادامه در ترتیب سورس یا اعلانی با سطح خصوصیت بالاتر قرار دهیم.
اطلاع از وجود important! مفید است. به این ترتیب می‌توانید وقتی آن را در کد افراد دیگر می‌بینید درک کنید. اما قویاً پیشنهاد می‌شود که هرگز از آن استفاده نکنید، مگر این که نیازی واقعاً ضروری برای استفاده از آن وجود داشته باشد. important! طرز کار معمول آبشاری CSS را بر هم می‌زند و از این رو موجب بروز مشکلاتی در دیباگ CSS می‌شود که یافتن آن‌ها به خصوص در استایل‌شیت‌های بزرگ واقعاً دشوار است.
یکی از موقعیت‌هایی که ممکن است لازم باشد از آن استفاده کنید، زمانی است که روی یک CMS کار می‌کنید و نمی‌توانید ماژول‌های اصلی CSS را ویرایش کنید و واقعاً می‌خواهید یک استایل را که نمی‌توانید به روش دیگری override کنید، کنار بزنید. اما در هر حالتی که امکان عدم استفاده از آن وجود داشته باشد، باید از این کار خودداری کنید.
تأثیر مکان CSS
در نهایت اشاره به این نکته نیز خالی از فایده نیست که اهمیت یک اعلان CSS به آن استایل‌شیتی که در آن ذکر شده نیز وابسته است. کاربران می‌توانند استایل‌شیت‌های سفارشی برای override کردن استایل‌های توسعه‌دهندگان تعیین کنند. برای نمونه یک کاربر با نقص بینایی می‌تواند اندازه فونت را روی همه صفحه‌های وب که بازدید می‌کند دو برابر اندازه معمول تنظیم کند تا خوانایی بهتری داشته باشد.
جمع‌بندی
اعلان‌های متعارض در ترتیب زیر اعمال می‌شوند و اعلان‌های متأخرتر، اعلان‌های متقدم را کنار می‌زنند:
- اعلان‌های موجود در استایل‌شیت کاربر (مانند استایل پیش‌فرض مرورگر) در مواردی که هیچ استایل دیگری تعیین نشده باشد مورد استفاده قرار می‌گیرند.
- اعلان‌های نرمال در استایل‌شیت‌های کاربر (استایل‌های سفارشی تعیین شده از سوی کاربر).
- اعلان‌های نرمال در استایل‌شیت‌های توسعه‌دهنده (این‌ها استایل‌هایی هستند که از سوی توسعه‌دهنده تعیین شده‌اند)
- اعلان‌های مهم در استایل‌شیت‌های توسعه‌دهنده.
- اعلان‌های مهم در استایل‌شیت‌های کاربر.
کنار زدن استایل‌شیت‌های کاربر از سوی استایل‌شیت‌های توسعه‌دهنده، کار معنی‌داری است و بدین ترتیب می‌توان طراحی را دست‌نخورده حفظ کرد، اما برخی اوقات کاربران دلایل موجهی برای کنار زدن استایل‌های توسعه‌دهنده وب دارند که برخی از آن‌ها را مورد اشاره قرار دادیم. در این موارد می‌توانند از important! در قواعدشان استفاده کنند.
سخن پایانی
اگر فکر می‌کنید بخش عمده این مقاله را درک کرده‌اید، در این صورت شما موفق شده‌اید با سازوکار بنیادی CSS آشنا شوید. در بخش بعدی، سلکتورهای CSS را دقیق‌تر مورد بررسی قرار می‌دهیم.
اگر مفاهیم آبشاری بودن، سطح خصوصیت و وراثت را به خوبی درک نکرده‌اید، باز هم جای نگرانی نیست. این مفاهیم پیچیده‌ترین مباحثی هستند که تا به این جا مطرح شده‌اند و چیزی هستند که حتی توسعه‌دهندگان حرفه‌ای وب هم گاهی آن را دشوار می‌یابند. پیشنهاد می‌کنیم که در ادامه مطالعه این سری مقالات، چند بار دیگر به این بخش سر بزنید و در مورد آن به مطالعه و تفکر بپردازید.
اگر در طی کار متوجه شدید که با موارد عجیبی مواجه می‌شوید و استایل های موردنظرتان روی عناصر اعمال نمی‌شوند، دوباره به این بخش بازگردید و آن را به دقت مطالعه کنید. برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت با HTML و CSS
- آموزش طراحی وب با CSS
- مجموعه آموزش‌های برنامهنویسی
- مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
- طراحی شبکه تصاویر واکنش گرا با CSS Grid Layout — از صفر تا صد
- آموزش CSS Grid — گام به گام، کاربردی و پروژه محور
==
