روش های فراخوانی سی اس اس و چند نکته دیگر

روش های فراخوانی سی اس اس و چند نکته دیگر

وقتی مرورگر با کدهای سی اس اس روبرو می شود، سند HTML را طبق آن فرمت (قالب بندی) می کند.

روش های سبک دهی

سه روش برای درج و استفاده از فرامین سی اس اس وجود دارد:

  • سبک دهی بیرونی (خارجی)
  • سبک دهی درونی
  • سبک دهی درون خطی

سبک دهی بیرونی

سبک دهی خارجی در اکثر مواقع بهترین و رایج ترین شیوه فراخوانی سبک دهی می باشد که یکی از فواید اسفاده از آن در مقدمه گفته شد. از دیگر مزایای این روش نسبت به دو روش دیگر می توان عدم افزایش حجم فایل HTML را نام برد.

برای فراخوانی یک فایل CSS، باید به صورت زیر از تگ link در بخش head فایل HTML خود استفاده کنید:

view sourceprint?
۱ <head>
۲ <link rel="stylesheet" type="text/css" href="mystyle.css" />
۳ </head>

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

  1. فایل های استایل دهی نباید شامل کدهای HTML باشند.
  2. پسوند این فایل ها باید css باشد.

نمونه ای فرضی از محتوای یک فایل css:

view sourceprint?
۱ hr {color:sienna;}
۲ .ptitle {margin-left:20px;}
۳ #wrapper {margin: 0 auto;}
۴ body {background-image:url("images/back40.gif");}

نکته: بین مقدار خصوصیت ها و واحدها فاصله درج نکنید. درست: “margin-left:20px” نادرست: “margin-left:20 px”

سبک دهی درونی

یکی از دلایل استفاده از سبک دهی درونی، بازنویسی یک سبک خاص برای یک صفحه خاص است. مثلا فرض کنید ما در فایل css خود رنگ پس زمینه پاراگراف ها را برابر خاکستری تنظیم کرده ایم. اما مایلیم به طور استثنا رنگ پس زمینه پاراگراف های یک صفحه سفید باشد. بدین منظور، می توانیم از سبک دهی درونی استفاده کنیم. سبک های درونی باید درون تگ های style و در بخش head سند قرار گیرند. به یک مثال دیگر در این زمینه و شیوه ی سبک دهی درونی توجه کنید:

view sourceprint?
۱ <head>
۲ <style type="text/css">
۳ hr {color:sienna;}
۴ p {margin-left:20px;}
۵ body {background-image:url("images/back40.gif");}
۶ </style>
۷ </head>

سبک دهی درون خطی

با استفاده از سبک دهی درون خطی بسیاری از ویژگی های سبک دهی را از خود می گیرید. سعی کنید به ندرت از این روش استفاده کنید.

اما برای استفاده از این روش باید در سند HTML خود درون تگ عنصر مورد نظر خود، از خصوصیت style استفاده کنید و سبک های مورد نظر خود را بنویسید.

به مثال زیر و چگونگی سبک دهی درون خطی دقت کنید:

view sourceprint?
۱ <p style="color:sienna;margin-left:20px">This is a paragraph.</p></pre>

سبک دهی چندگانه (Multiple Style Sheets)

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

فرض کنید خصوصیات زیر در یک style sheet بیرونی (یک فایل css) مقدار دهی شده اند:

view sourceprint?
۱ h3
۲ {
۳ color:red;
۴ text-align:left;
۵ font-size:8pt;
۶ }

همچنین در یک style sheet درونی دستورات زیر وجود دارد:

view sourceprint?
۱ h3
۲ {
۳ text-align:right;
۴ font-size:20pt;
۵ }

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

view sourceprint?
۱ h3
۲ {
۳ color:red;
۴ text-align:right;
۵ font-size:20pt;
۶ }

یعنی ابتدا مقدار خصوصیات مطابق کامل ترین فایل css تنظیم می شوند و سپس مقادیر سبک دهی درونی جایگزین می شوند. در مثال فوق، ابتدا مقدار خصوصیت رنگ قرمز و جهت چینش من چپ به راست و اندازه قلم ۸ نقطه در نظر گرفته می شود سپس مقادیر مشترک از سبک دهی درونی جایگزین می شوند. یعنی رنگ قرمز ثابت خواهد ماند و جهت چینش متن به راست به چپ تغییر می کند و اندازه قلم هم به ۲۰ تغییر می کند. در پاراگراف بعدی، اولویت اعمال شدن style sheet ها توضیح داده شده است.

ترتیب اثر روش های سبک دهی

همانطور که می دانید می توان سبک ها را به سه صورت روی عنصر مورد نظر اعمال کرد:

  • سبک دهی درون تگ عنصر (درون خطی)
  • سبک دهی با استفاده از تگ style در بخش head (درونی)
  • سبک دهی با فایل های css (بیرونی)

نکته: می توانید چندین فایل css را برای سبک دهی به یک صفحه اضافه کنید.

ترتیب اثر

هنگامی که برای هر عنصر چند سبک مختلف فراخوانی شده است، کدام یک از سبک ها به عنصر مورد نظر ما اثر خواهد کرد؟

به صورت عامیانه می توان فرض کرد که تمامی سبک ها درون یک style sheet “مجازی” با توجه به قوانین زیر قرار داده می شوند و سپس به عنصر مورد نظر اعمال می شوند. از شماره یک به چهار، اولویت ها بیشتر می شوند به طوری که شماره یک دارای کمترین و شماره چهار دارای بیشترین اهمیت است.

  1. سبک های پیشفرض مرورگر
  2. سبک های فراخوانی شده از فایل های css (بیرونی)
  3. سبک های فراخوانی شده از تگ style در بخش head سند (درونی)
  4. سبک های فراخوانی شده از تگ عنصر هنگام تعریف آن در سند HTML (درون خطی)

پس سبک های درون خطی دارای بیشترین اولویت هستند و قادرند مقادیر سبک های فراخوانی شده با سبک دهی درونی، بیرونی و یا پیشفرض های مرورگر برای عنصر را، بازنویسی کنند.

نکته: اگر فراخوانی یک فایل css در بخش head پس از تگ style که برای سبک دهی درونی است باشد، مقادیر خصوصیات خود را جایگزین مقادیر آن ها در سبک دهی درونی بالای خود می کند.

More from my site