در این درس با معنا و مفهوم استایل شیتها آشنا می شویم. استایل شیت در واقع راه میانبر در برنامه نویسی وب است که با تعریف الگو و فایلهای خاص از نوشتن کدهای تکراری جلوگیری می شود و به همین دلیلدر بین طراحان سایت پرطرفدار می باشد.
استایل شیتها ( Style Sheets )
در نسخه جدید(4) HTML امکان جداسازی کامل فرمت دهی از ساختار صفحات HTML فراهم شده است. در این نسخه توصیه می شود که تمامی اطلاعات مربوط به نمایش و ترازبندی به فایلهائی مجزا از صفحه HTML منتقل شوند. بخشی از صقحات HTML که مربوط به نمایش، ترازبندی و فرمت دهی است، استایل شیت یا "Style Sheet" نامیده شده و معمولا به صورت فایلی مجزا درون بخش <head> صفحات HTML معرفی میگردند. در این درس به صورت بسیار خلاصه با روشهای مختلف استفاده از استایل شیتها در صفحات HTML آشنا خواهید شد.
چگونگی استفاده از استایل شیتها:
مرورگرها از روی استایلهای تعریف شده توسط استایل شیتها به فرمت دهی و نمایش اطلاعات درون صفحه HTML می پردازند. تعریف و استفاده از استایل ها در صفحات HTML به سه روش مختلف ممکن میباشد:
{rsmembership category="1"}
1) استایل شیتهای خارجی (external style sheet)
در این روش تمامی استایلها و تعاریف نمایشی ،درون فایلی جداگانه قرار گرفته و بسیار مناسب حالتهائی است که قرار است استایلی به بیش از یک صفحه HTML اعمال شود. مزیت این روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و برای یک تغییر کلی در سایت کافی است که فایل استایل شیت کل سایت که معمولا یک فایل واحد است تغییر داده شود. (باید توجه داشت که در این حالت تمامی صفحات سایت باید به یک فایل استایل شیت واحد لینک شده باشند.) استایل شیتهای خارجی توسط تگ <link> که درون بخش head صفحات HTML قرار میگیرد، معرفی میشوند.
در مثال زیر با کمک شناسه href از تگ link نام و در حالت کلی url فایل در برگیرنده استایلهای تعریف شده تعیین میگردد:
مثال:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2)استایل شیتهای داخلی (Internal Style Sheet)
کاربرد این روش در حالتهائی است که صفحه HTML نیازمند تعریف استایلی منحصر به فرد و مجزا بوده و استایل طراحی شده فقط بدرد آن صفحه خواهد خورد. در این حالت باید کدهای حاوی تعریف استایل درون تگ های <style> و <style/> قرار گرفته و معمولا نتیجه درون بخش head صفحه HTML گذاشته میشود.
مثال:
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
3)استایل شیتهای درجا (Inline Styles)
کاربرد این روش در مواردی است که باید برای یک المان (یا گروهی) خاص استایلی اعمال شود. در این حالت باید از شناسه ای به نام style که تقریبا در تمامی تگها قابل اعمال است استفاده شود.
مثال:
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
تگ های استایل
purpose start tag کاربرد
<style>
Defines a style in a document تعریف استایلها درون یک سند
<link> Defines the relationship between two linked documents تعیین و تعریف فایل استایل شیت خارجی
<font> Deprecated. Use styles instead کنار گذاشته شده.از استایل شیتها استفاده شود.
<basefont> Deprecated. Use styles instead کنار گذاشته شده.از استایل شیتها استفاده شود.
<center> Deprecated. Use styles instead کنار گذاشته شده.از استایل شیتها استفاده شود