آموزش CSS – سلسله مراتب اجرای کدهای سی اس اس (CSS) (جلسه ۶)

همواره به خاطر داشته باشیم که در سی اس اس (CSS) آخرین دستوری که نوشته شود همواره برنده است. به عبارت دیگر آخرین دستورات سی اس اس (CSS) موجب می گردند دستورات پیشین تاثیر خود را از دست بدهند.
برای روشن شدن این موضوع کد زیر را مد نظر قرار می دهیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>آشنایی با سلسله مراتب کدهای سی اس اس</p>
   </body>
</html>

همانطور که می بینیم یک تگ <p> حاوی عبارتی را داخل تگ <body> قرار داده ایم. اکنون به ویرایش کدهای سی اس اس (CSS) خود می پردازیم:

p {
   color:white;
   font-size:20px;
}
h1 {
   font-size:20px;
}
h6 {
   font-size:10px;
}
p {
   color:red;
}

همانطور که در کد فوق می بینیم ابتدا در Selector یی تحت عنوان p رنگ و اندازه مد نظر خود را نوشته ایم سپس اقدام به نوشتن کدهای مرتبط با h1 و h6 نموده و در نهایت مجدد رنگ Selector تحت عنوان p را از سفید به قرمز تغییر داده ایم.
حال مرورگر ابتدا p اول را مد نظر قرار می دهد اما از آنجا که می بیند مجدد این Selector خصوصیت جدیدی به خود گرفته است، خصوصیت دوم را مد نظر قرار می دهد. به عبارت دیگر در بار اول رنگ تگ <p> سفید شده و اندازه آن ۲۰ پیکسل می شود ام از آنجا که مجدد در انتهای کد رنگ تگ <p> از سفید به قرمز تغییر یافته است، مرورگر اندازه را از مورد اول و رنگ را از مورد دوم اعمال خواهد کرد. به طور کلی همواره آخرین کدها مد نظر قرار داده می شوند:

more_than_one_selector_in_css

این قضیه در مورد ترتیب قرارگیری کدهای سی اس اس External و Internal هم صدق می کند. برای روشن شدن این موضوع کد زیر را مد نظر قرار می دهیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
       <style>
           p {
                   color:blue;
           }
       </style>
   </head>
   
   <body>
       <p>آشنایی با سلسله مراتب کدهای سی اس اس</p>
   </body>
</html>

همانطور که در کد فوق مشخص است پس از لینکی که به فایل main.css خود در تگ <head> داده بودیم تگ <style> را نوشته و در آن فقط رنگ p را به آبی تغییر داده ایم. از آنجا که تگ <style> بعد از تگ <link> که به فایل main.css لینک داده است آمده، انتظار می رود که رنگ آبی به جای رنگ قرمز در نظر گرفته شود:

internal_and_external_css_codes

اکنون برای دیدن تاثیر سلسه مراتب کدهای سی اس اس (CSS) به صورت زیر جایگاه تگ های <link> و <style> را تغییر می دهیم:

   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <style>
           p {
                   color:blue;
           }
       </style>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>

مرورگر را به روز رسانی می کنیم تا تاثیر تغییر فوق را مشاهده کنیم:

more_than_one_selector_in_css

می بینیم که کدهای سی اس اس External از آنجا که پس از کدهای سی اس اس Internal آمده اند اقدام به رونویسی کدهای Internal می کنند.
حال قصد داریم تا رنگ این پاراگراف را با استفاده از کدهای سی اس اس Inline هم تغییر دهیم. برای این منظور کد خود را به صورت زیر تکمیل می کنیم:

    <body>
        <p style="color:yellow;">آشنایی با سلسله مراتب کدهای سی اس اس</p>
    </body>

مجدد مروگر را به روز رسانی می کنیم:

inline_code_in_css

در واقع از آنجا که کدهای سی اس اس Inline پس از کدهای سی اس اس External و Internal قرار گرفته اند برنده این بازی هستند!

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان