در نسخه جدید HTML ، امکان جداسازی کامل قالب بندی از تگ نویسی صفحات وب فراهم شده است و مرورگرها از روی تنظیمات تعریف شده با استایل شیت‌ها به فرمت دهی و نمایش اطلاعات درون صفحه HTML می‌پردازند. در این نسخه توصیه میشود که تمام تنظیمات مربوط به نحوه نمایش و فرمت دهی به صورت جداگانه و حتی در فایل های مجزا قرارگیرد. تنظیمات استایل‌شیت به صورت مجموعه ای از قواعد تعریف شده که قابل اعمال به عناصر صفحه وب هستند. هر قاعده دارای یک یا چند خاصیت برای تنظیم جنبه های نمایشی مختلفمی باشد. در این بخش با نحوه تعریف قواعد استایل‌شیت، استفاده از آنها برای تنظیم عناصر صفحه و روش‌های مختلف استفاده از استایل شیت‌ها در صفحات وب آشنا خواهید شد.
قواعد استایل شیت
هر دسته از تنظیمات استایل شیت یک قاعده نامیده شده و شامل یک یا چند خاصیت (poperty) استایل شیت و نیز یک یا چند انتخابگر(selector) بصورت زیر است:
selector {
property1 : value1;
property2 :value2;
…
}
انتخابگر(selector) ها تعیین می کنند که تنظیمات موجود در قاعده به کدام گروه تگ های صفحه اعمال شوند. بطور کلی انتخابگرها میتوانند یکی از موارد زیر باشند:
تگ (tag): نام یک تگ است که تنظیمات قاعده بطور خودکار به تمام تگ های همنام آن در صفحه اعمال خواهد شد. بعنوان مثال تنظیمات زیر به تمام تگ های td اعمال خواهد شد:
td {background-color:red;}
کلاس (class): یک کلمه شروع شده با علامت نقطه است. که تنظیمات آن به تگ‌های موجود در این کلاس داده خواهد شده ، یعنی تگهایی که خاصیت classآنها با نام این کلاس مقداردهی شده باشد.
.row1{background-color:green;}
براي اعمال تنظیمات یک قاعده کلاس به یک تگ باید خاصیت class آن تگ را با نام کلاس مقداردهی کنیم :
<<td class="row1"><p class="row1">
شناسه (identifier): يك كلمه شروع شده با علامت #است. که تنظیمات به یک تگ با شناسه مساوی آن داده خواهد شد.
#menu {Background-color:blue;}
براي اعمال تنظیمات یک قاعده کلاس به یک تگ باید خاصیت id آن تگ را با نام شناسه مقداردهی کنیم :
لازم به ذکر است که تنظیمات انتخابگر کلاس می تواند به گروهی از تگ ها اعمال شود. بعبارتی چندین تگ در یک صفحه می توانند دارای کلاس مشترک باشند، درحالی که تنظیمات انتخابگر شناسه برای اعمال روی تنها یک تگ نوشته می شود.زیرا از دید برنامه نویسی id برای هر تگ منحصر بفرد است و هیچ دو تگی نباید id یکسان داشته باشند.
در مثال زیر ، یک جدول طراحی شده که رنگ پس زمینه سطرهای زوج و فرد آن تفاوت دارد ضمن اینکه همه سلول ها دارای تنظیمات مشابه دیگری هستند.
<html>
<head>
<style>
th { background-color:#FF6600; }
td { font-family:tahoma; font-size:20px; }
.fard{ background-color:#FF9933;}
.zaoj{ background-color:#FFCC66;}
</style>
</head>
<body>
<table width="400" border="1">
<tr>
<th scope="col">Name</th><th scope="col">Family</th>
</tr>
<tr class="fard">
<td>Ali</td><td>Alavi</td>
</tr>
<tr class="zaoj">
<td>Reza</td><td>Razavi</td>
</tr>
<tr class="fard">
<td>Hassan</td><td>Hassani</td>
</tr>
<tr class="zaoj">
<td>Majid</td><td>Majidi</td>
</tr>
</table>
</body>
</html>
انواع استایل شیت
تعریف و استفاده از استایل ها با توجه به محل قرارگیری قواعد در صفحات وب به سه روش ممکن میباشد:
1- استایل شیتهای داخلی
کاربرد این روش در حالت‌هایی است که یک صفحه وب نیازمند تعیین تنظیمات قالب بندی منحصر به فرد و مجزا بوده،قواعد استایل‌شیت در داخل صفحه وب نوشته شده و فقط در همان صفحه هم قابل استفاده است . در این روش باید کدهای حاوی تعریف استایل درون تگ های <style> و <style/> قرار گرفته و معمولاً در بخش head صفحه نوشته می شوند.
برای درک بهتر این نوع استایل شیت به مثال زیر توجه کنید:
<html>
<head>
<style>
.aval {
background-color : green ;
font-family: Tahoma ;
}
.dovom {
background-color : red;
font-family: Arial ;
}
</style>
</head>
<body>
<table width=”300” align=”center”>
<tr class=”aval” ><td> Name </td><td> Famlily </td></tr>
<tr class=”dovom” ><td> Ali </td><td> Ahmadi </td></tr>
</table>
</body>
</html>
در مثال فوق یک جدول دارای دو سطر طراحی شده است که سطر اول از کلاس aval استفاده کرده و سطر دوم از کلاس dovom استفاده کرده است.
2- استایل شیتهای خارجی
در این روش تمامی استایل‌ها و تعاریف نمایشی درون فایلی جداگانه با پسوند CSSقرار گرفته و از داخل هر صفحه وب می توان پیوندی به آن برقرار کرده و از تنظیمات آن استفاده کرد. این نوع استایل شیت، بسیار مناسب حالت‌هایی است که قرار است که تنظیمات مشابه به بیش از یک صفحه وب اعمال شود. مزیت این روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و برای یک تغییر کلی در سایت کافی است که فایل استایل‌شیت کل سایت تغییر داده شود. استایل‌شیت‌های خارجی توسط تگ <link> که درون بخش head صفحات اچتمل قرار می‌گیرد.
در مثال زیر یک فایل test1.css حاوی قواعد استایل‌شیت نشان داده شده و با ایجاد یک پیوند در صفحه وب با نام page2.html ، از تنظیمات آن استفاده شده است. برای ایجاد پیوند به فایل CSS از تگ link در بخش head استفاده می شود. مثال فوق را دوباره با استایل شیت خارجی اجرا می‌کنیم، برای این کار ابتدا فایل متنی test1.css با محتوای زیر ایجاد میشود.
.aval {
background-color : green ;
font-family: Tahoma ;
}
.dovom {
background-color : red;
font-family: Arial ;
}
سپس صفحه وب page2.html را بصورت زیر طراحی می شود.
<html>
<head><link href="test1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width=”300” align=”center”>
<tr class=”aval” ><td> Name </td><td> Famlily </td></tr>
<tr class=”dovom” ><td> Ali </td><td> Ahmadi </td></tr>
</table>
</body>
</html>
استفاده از استایل‌شیت خارجی اول اینکه: باعث صرفه جویی در مصرف حافظه میشود، چون تنظیمات مشابه تنها یکبار در فایل CSS نوشته میشود و نیازی به تکرار آنها در صفحات مختلف نیست. دوم اینکه : باعث افزایش سرعت بارگذاری صفحات وب سایت می شود، چون با باز کردن اولین صفحه وب سایت، فایل CSS از سرور دریافت شده و روی سرویس گیرنده کش شده و هنگام ملاقات کردن صفحات دیگر نیازی به دریافت مجدد آن نیست. سوم اینکه: برای تغییر طراحی و تنظیمات صفحات وب سایت کافی است تنها فایل های استایل‌شیت دستکاری شود.
3- استایل شیتهای درجا
در این روش تنظیمات استایل‌شیت برای هر تگ بصورت جداگانه نوشته میشود و تنها روی همان تگ قابل استفاده است. کاربرد این روش در مواردی است که باید تنظیمات خاصی به یک عنصر اعمال شود. در این حالت باید از شناسه ای به نام style که تقریبا در تمامی تگها قابل اعمال است استفاده شود. برای طراحی یک صفحه که شامل یک جدول دارای دو سطر با رنگ پس زمینه دلخواه صفحه بصورت زیر عمل می شود.
<html>
<body>
<table width=”300” align=”center”>
<tr style=”background-color:green; font-family:tahoma;”>
<td> Name </td><td> Famlily </td>
</tr>
<tr style=”background-color:red ; font-family: Arial ;” >
<td> Nima </td><td> Ahmadi </td>
</tr>
</table>
</body>
</html>
خاصیت های مهم در استایل شیت
مهمترین خاصیت های قابل استفاده از ساخت قواعد استایل شیت در جدول زیر نشان داده شده است.
تنظیم پس زمینه
خاصیت background-color : برای تعیین رنگ پس زمینه استفاده می شود و می تواند با نام یا کد رنگ مقداردهی شود.
خاصیت background-image : برای تعیین تصویر پس زمینه استفاده می شود و می تواند با url مربوط به تصویر مقداردهی شود.
خاصیت background-repeat : نحوه تکرار تصویر پس زمینه را در صورت نیاز مشخص می کند.
background-repeat: no-repeat; تکرار شود
background-repeat: no-repeat; تکرار نشود
background-repeat: repeat-x;بصورت افقی تکرار شود
background-repeat: repeat-y;بصورت عمودی تکرار شود
تنظیم اندازه ها
خاصیت margin : برای تنظیم حاشیه عنصر از چهار طرف استفاده شده و یک عدد به همراه واحد اندازه گیری به آن نسبت داده می شود. (واحد px به معنی پیکسل است)
به این خاصیت می تواند یکی کلمات left ، top ، right و bottom را برای تعیین حاشیه در چهار جهت چپ، بالا، راست و پایین بصورت جداگانه تعیین کرد.
margin-top :5px;
margin-bottom : 10px ;
margin-left : 20px;
margin-right: 20px;
خاصیت padding : برای تنظیم میزان تورفتگی محتوای تگ از چهار طرف استفاده شده و یک عدد به همراه واحد اندازه گیری به آن نسبت داده می شود.
به این خاصیت می تواند یکی کلمات left ، top ، right و bottom را برای تعیین تورفتگی در چهار جهت بصورت جداگانه تعیین کرد.
padding -top : 5px;
padding -bottom : 10px ;
padding -left : 20px;
padding -right: 20px;
خاصیت float : برای تعیین محل قرارگیری خود عنصر از نظر افقی استفاده می شود و می تواند مقدار left یا right بگیرد.برای قرار دادن چند عنصر کنار هم روی خط افقی باید این خاصیت را برای آنها مقداردهی کرد.
float : left;
خاصیت width : عرض عنصر را تعیین می کند و بصورت مطلق (برحسب پیکسل) و یا نسبی (درصدی) مقداردهی می شود.
width : 300px;
width : 50% ;
خاصیت height :ارتفاع عنصر را تعیین می کند و بصورت مطلق (برحسب پیکسل) و یا نسبی (درصدی) مقداردهی می شود.
height : 300px;
height : 50% ;
خاصیت border : برای تنظیم کادر عناصر استفاده می شود و با استفاده از آن می توان ضخامت، نوع و رنگ کادر را تعیین کرد. همچنین امکان تعیین کادرهای دلخواه برای هرکدام از طرف های left ، right ، top و bottom بصورت جداگانه وجود دارد.
ضخامت بصورت یک عدد تعیین می شود، نوع کادر می تواند بصورت ممتد (solid)، خط چین (dashed) ، نقطه چین(dotted) ، دوخط (double) و … باشد و رنگ کادر می تواند بصورت نام یا کدرنگ تعیین شود.
border:2px solid #5645ff;
border-bottom:1px dashed green;
تنظیم بلاک
خاصیت direction : جهت نوشته و می تواند راست به چپ (rtl) یا چپ به راست (ltr) باشد.
خاصیت text-align : ترازبندی افقی متن را تعیین کرده و می تواند یکی از مقادیر left ، right ، center و justify (ترازبندی دوطرفه) باشد.
خاصیت vertical-align: : ترازبندی عمودی متن را تعیین کرده و می تواند یکی از مقادیر top،middle و bottom باشد.
خاصیت line-height : ارتفاع خطوط را تعیین می کند و بصورت یک عدد تعیین می شود. هر چه این عدد بزرگتر داده شود ، فاصله خطوط بیشتر می شود.
تنظیم متن
خاصیت font-family: برای تعیین قلم نوشته استفاده می شود و می تواند با نام یک یا چند قلم مقداردهی شود، تا در صورت نبود یک قلم روی سیستم از قلم بعدی استفاده کند.
خاصیت font-size : اندازه قلم
خاصیت font-weight : درشتی قلم که می تواند یک عدد یا کلمه مثل bold ، bolder ،normal یا lighter باشد.
font-size:12px;font-weight:600;
خاصیت font-style: سبک قلم که می تواند یکی از مقادیر italic ، oblique،normalیا noneباشد.
خاصیت color : رنگ متن، می تواند با نام یا کد رنگ مقداردهی شود.
خاصیت text-decoration : دکوراسیون متن را تعیین می کند و می تواند بصورت زیرخط دار (underline)، روخط دار (overline)، چشمک زن (blink) و … مقداردهی شود.
نکات مهم در استفاده از استایل شیت ها
1.برای محدود کردن تنظیمات یک قاعده به تگ خاصی، قبل از نام کلاس یا شناسه ، نام تگ را نیز بنویسید، در مثال زیر قاعده تعریف شده می تواند فقط به تگ‌های td اعمال شود.
td.row1 {
background-color:blue;
}
2.برای هر قاعده می توان چند انتخابگر هم استفاده کرد، در مثال زیر تعیین رنگ پس زمینه برای تگ های td و تگ های کلاسهای ali و reza به صورت مشترک انجام شده است.
td , .ali , .reza {
background-color:blue;
}
3.براي تگ های موجود در داخل تگ های دیگر هم می توان تنظیمات تعیین کرد. در مثال زیر تعیین رنگ پس زمینه برای تگ های کلاس item واقع در داخل تگ با شناسه menu انجام شده است. حال اگر تگی با کلاس item وجود داشته باشد که خارج از تگ با شناسه menu باشد نمی تواند از این تنظیمات استفاده کند.
#menu .item {
Background-color: #aaa;
}
این تنظیمات می تواند به تگ div داخلی زیر اعمال شود :
درحالی که تنظیمات نمی تواند به تگ div داخلی زیر اعمال شود:
4.براي اعمال تنظیمات به تگ aدر حالت‌های مختلف میتوان از قواعدی با انتخابگرهای زیر استفاده کنید:
a:visited {color: #C96;}روی پیوندهای ملاقات شده اعمال می شود
a:hover {color: #0F6;}روی پیوندی که نشانگر ماوس روی آن قراردارد، اعمال می شود.
a:active {color: #0CC;}روی پیوندهای فعال اعمال میشود.