در ادامه جلسات آموزش css خود در این جلسه آموزشی به مباحث استایل شیت های داخلی و چگونگی تعیین چند فایل css جایگزین برای صفحه خواهیم پرداخت.
استایل شیتی که توسط خصوصیت rel=”stylesheet” به صفحه لینک شده باشد امافاقد خصوصیت title باشد همانند اولین مثال جلسه قبل (لینک دادن به استایل شیت های داخلی و خارجی در صفحه وب) به عنوان استایل شیت های دائم (persistent style sheet)معروفند و این بدان معناست که همیشه این استایل شیت ها به صفحه وب اعمال می شوند حتی اگر کاربر یک استایل شیت جایگزین را فعال کند.
استایل شیتی که توسط rel=”stylesheet” لینک شده باشد و همچنین title برای آن مشخص شده باشد ، به عنوان استایل شیت های ترجیحی (preferred stylesheet) معروفند و زمانی به صفحه وب اعمال خواهد شد که کاربر آن را فعال کرده باشد و در صورت انتخاب استایل شیت های جایگزین غیرفعال خواهد شد.
اجازه دهید که به یک مثال پیچیده تر نگاهی بیندازیم
کد:
<link rel="stylesheet" type="text/css"
href="/base.css" media="all">
<link rel="stylesheet" type="text/css"
href="/def_layout.css" media="screen" title="Default">
<link rel="stylesheet" type="text/css"
href="/def_colour.css" media="screen" title="Default">
<link rel="alternate stylesheet" type="text/css"
href="/alt_layout.css" media="screen" title="Custom">
<link rel="alternate stylesheet" type="text/css"
href="/alt_colour.css" media="screen" title="Custom">
<link rel="stylesheet" type="text/css" href="/print.css" media="print">
در این مثال base.css یک استایل شیت دائم (persistent stylesheet) است چرا که خصوصه title ندارد و به تمام رسانه های اعمال خواهد شد چرا که خصوصیت media=”all”.
به طور پیش فرض ، def_layout.css و def_colour.css به رسانه صفحه نمایش اعمال خواهند شد چرا که از نوع استایل شیت ترجیحی هستند.
اگر کاربر در مرورگر خود استایل شیت Custom را انتخاب کند فایل های def_layout و def_colour.css غیرفعال خواهند شد و alt_layout.css و alt_colour.css فعال خواهند شد.
در زمان چاپ فایل print.css فعال خواهد شد چرا که این فعال ویژگی media=”print” را شامل شده است.
توجه داشته باشید که base.css نیز اعمال خواهد شد چرا که این استایل شیت خصوصیت media=”alt” را داراست و بقیه استایل شیت ها اعمال نخواهند شد چرا که همگی آنها دارای خصوصیت media=”screen” هستند.
همواره می توانیم از استایل شیت های جایگزین استفاده کنیم تا چندین مد نمایش را آزادانه برای کاربر فراهم کرده باشیم .
در مثال “اریک می یر” می توانید ببینید که چطور آقای اریک چندین انتخاب را برای کاربر فراهم کرده است تا کاربر آزادانه انتخاب کند.
استفاده از استایل شیت های درونی (توکار)
استفاده از المان style که در داخل تگ head صفحه وب قرار می گیرد به عنوان استفاده درونی از استیل شیت نام برده می شود و تغییرات استایل فقط به صفحه ای که این المان را شامل شده است اعمال می گردد.
کد:
<style type="text/css" media="screen,projection">
CSS rules…
</style>
خصوصیت type ضروری است و باید با مقدار “text/css” مقدار دهی شود.
با توجه به قوانین مشخص شده در مستندات html4 که بیان می کند اگر شما نوع رسانه را برای استایل شیت خارجی تعریف نکنید ، نوع media=”screen” به آن اعمال می شود ، این مورد در عمل صادق نیست و مرورگر ها media=”all” را به استایل شیت های خارجی اعمال می کنند اگر خصوصیت media تعریف نشده باشد.
مرورگر هایی که قبل از html4 وجود داشته اند المان <style> را پشتیبانی نمی کردند و آنها محتوای استایل را همانند متن و text می دیدند و به همان صورت رندر می کردند و برای حل این مشکل در آن مرورگرها تگ style را مابین کامنت های SGML قرار می دادند اما امروزه به دلیل ساپورت این تگ در مرورگر ها و xhtml شما نیازی به این کار نمی بینید و در صورت قرار دادن استایل در بین کامنت مانع از اعمال شدن ظاهر خواهید شد.
کامنت کردن محتوای داخل تگ style امروزه منسوخ شده به شمار می آید و غیر ضروری است.
در زیر مثالی از استایل شیت های درونی را می بینیم که از دید مرورگر های قدیمی پنهان است
کد:
<style type="text/css" media="screen,projection">
<!-
CSS rules…
-->
</style>
استایل شیت های درون خطی (inline stylesheet)
در مثال زیر قوانین css نوشته شده باعث می شود که اندازه قلم محتوای لیست نامرتب زیر به ۱۲۰% و رنگ آن به سبز تیره تبدیل شود.
کد:
<ul style="font-size:120%; color:#060">
list items…
</ul>
استفاده از این روش به دلیل یکی کردن لایه محتوا و لایه نمایش اصولا غیر قابل توجیه است وبایستی صرف نظر شود.
روش استایل شیت های درون خطی (inline stylesheet) خیلی محدودتر از استایل شیت های خارجی و داخلی است و برای آنها نمی توان نوع رسانه media را مشخص نمود و به طور پیش فرض استایل ها به تمام رسانه ها اعمال خواهند شد.
از طرفی برای استایل شیت های درون خطی نمی توانید قوانین شبه کلاس ها (pseudo-class)را اعمال کنید.
مستندات html بیان می کند که اگر شما می خواهید از استایل شیت ها درون خطی در سند وب استفاده کنید بایستی زبان استایل شیت را در آن صفحه توسط http header مشخص کنید که نمونه آن را در زیر آورده ایم
کد:
<meta http-equiv="Content-Style-Type" content="text/css">
البته مرورگر های امروزه مستندات Html را مد نظر قرار نمی دهند و به طور پیش فرض نوع محتوای استایل شیت ها را به “text/css” قرار می دهند.
استفاده از استایل شیت های خارجی برای سند های xml توسط XML PI
در سند های xml از جمله xhtml استایل شیت های خارجی توسط دستورات پردازشی (pi) قابل آدرس دهی هستند. این دستورات پردازشی بخشی از دستورات xml هستند که بعد از خط تعریف xml و قبل از خط تعریف نوع سند xml در صورت وجود آورده می شوند.
در مثال زیر می توانید یک استایل شیت دائم base.css و یک استایل شیت ترجیحی default.css و یک استایل شیت جایگزین custome.css را ببینید.
کد:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="/base.css"?>
<?xml-stylesheet type="text/css" href="/default.css" title="Default"?>
<?xml-stylesheet type="text/css" href="/custom.css"
title="Custom" alternate="yes"?>
ادامه دارد ...
منبع
علاقه مندی ها (Bookmarks)