در نسخه جدید(4/0) اچتمل امکان جداسازی کامل فرمت دهی از ساختار صفحات اچتمل فراهم شده است. در این نسخه توصیه میشود که تمامی اطلاعات مربوط به نمایش و ترازبندی به فایلهائی مجزا از صفحه اچتمل منتقل شوند. بخشی از صقحات اچتمل که مربوط به نمایش، ترازبندی و فرمت دهی است، استایل شیت یا "Style Sheet" نامید شده و معمولا به صورت فایلی مجزا درون بخش <head> صفحات اچتمل معرفی میگردند. در این درس به صورت بسیار خلاصه با روشهای مختلف استفاده از استایل شیتها در صفحات اچتمل آشنا خواهید شد.
مثالها
استیلها در اچتمل
در این مثال نحوه تعریف استایل شیتها درون بخش <head> صفحات اچتمل شرح داده شده است. (Internal Style Sheet)
پیوندی بدون خط افقی زیری
در این مثال نحوه ایجاد پیوندی بدون "خط افقی زیری" شرح داده شده است. (Inline Styles)
اتصال به فایلهای استایل شیت خارجی
در این مثال نحوه استفاده از تگ <link> جهت اتصال به فایلهای استایل شیت خارجی شرح داده خواهد شد. (External Style Sheet)
چگونگی استفاده از استایل شیتها:
مرورگرها از روی استیلهای تعریف شده توسط استایل شیتها به فرمت دهی و نمایش اطلاعات درون صفحه اچتمل میپردازند. تعریف و استفاده از استایل ها در صفحات اچتمل به سه روش مختلف ممکن میباشد:
1)استایل شیتهای خارجی (external style sheet) :
در این روش تمامی استیلها و تعاریف نمایشی درون فایلی جداگانه قرار گرفته و بسیار مناسب حالتهائی است که قرار است که استایلی به بیش از یک صفحه اچتمل اعمال شود. مزیت این روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و برای یک تغییر کلی در سایت کافی است که فایل استایل شیت کل سایت که معمولا یک فایل واحد است تغییر داده شود.
(باید توجه داشت که در این حالت تمامی صفحات سایت باید به یک فایل استایل شیت واحد لینک شده باشند.) استایل شیتهای خارجی توسط تگ <link> که درون بخش head صفحات اچتمل قرار میگیرد، معرفی میشوند.
در مثال زیر با کمک شناسه href از تگ link نام و در حالت کلی url فایل در برگیرنده استایلهای تعریف شده تعیین میگردد:
 |
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
|
2)استایل شیتهای داخلی (Internal Style Sheet) :
کاربرد این روش در حالتهائی است که صفحه اچتمل نیازمند تعریف استایلی منحصر به فرد و مجزا بوده و استایل طراحی شده فقط بدرد آن صفحه خواهد خورد. در این حالت باید کدهای حاوی تعریف استایل درون تگ های <style> و <style/> قرار گرفته و معمولا نتیجه درون بخش head صفحه اچتمل گذاشته میشود.مثال:
|
<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> |
|
تگ های استایل
| Start Tag | Purpose | کاربرد |
|---|---|---|
| <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 | کنار گذاشته شده.از استایل شیتها استفاده شود. |
| ||
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
تغییرات در نسخه جدید اچتمل (4/0) :
هدف اولیه از طراحی زبان اچتمل ایجاد زبانی برای تعریف اطلاعات محض بدون در برداشتن جزئیات مربوط به فرمت و نمایش بود ولی با ایجاد نسخه 3/2 زبان اچتمل و اضافه شدن تگهای فرمت دهی مانند <font> و یا شناسه هائی مانند color و Align محتوا و نمایش در صفحات اچتمل ادغام گردیده و همین امر سبب بروز مشکلات عدیده ای برای طراحان و برنامه نویسان وب گردید. برای رفع این مشکل در نسخه 4/0 اچتمل توصیه بر جداسازی کامل این دو گروه از اطلاعات بوده و در نسخه های آینده اچتمل این جداسازی اجباری خواهد گردید و توصیه مدرسه وب نیز استفاده از استایل شیتها برای هر نوع تعریف فرمت و ترازبندی میباشد. برای مثال در کد اچتمل زیر که بر اساس نسخه 3/2 اچتمل میباشد، ساختار و محتوا (تگی از نوع پاراگراف با محتوای "This is a paragraph") با اطلاعات نمایش یعنی رنگ و ترازبندی (رنک قرمز متن و ترازبندی در وسط صفحه) همزمان و در کنار هم آورده شده اند و این ادغام امکان تغییر و توسعه کد را بسیار محدود خواهد کرد:
| |
| <p align="center"><font color="red">This is a paragraph</font></p> | |
| |
کد معادل مثال فوق با استفاده از استایل شیتها در این مثال شرح داده شده است.(هر چند که این مثال از تمامی امکانات استایل شیتها و ایجاد فایلی کاملا مستقل برای تعریف استایل استفاده نکرده است.)
