index   E-mail to me   Google

STYLE SHEET

در نسخه جديد (4/0) اچتمل امکان جداسازی کامل فرمت دهی از ساختار صفحات اچتمل فراهم شده است. در اين نسخه توصيه ميشود که تمامی اطلاعات مربوط به نمايش و ترازبندی به فايلهائی مجزا از صفحه اچتمل منتقل شوند. بخشی از صفحات اچتمل که مربوط به نمايش، ترازبندی و فرمت دهي است، استايل شيت يا "Style Sheet" ناميد شده و معمولا به صورت فايلي مجزا درون بخش <head> صفحات اچتمل معرفی ميگردند. در اين درس به صورت بسيار خلاصه با روشهای مختلف استفاده از استايل شيتها در صفحات اچتمل آشنا خواهيد شد.

چگونگی استفاده از استايل شيتها:

مرورگرها از روی استيلهاي تعريف شده توسط استايل شيتها به فرمت دهی و نمايش اطلاعات درون صفحه اچتمل ميپردازند. تعريف و استفاده از استايل ها در صفحات اچتمل به سه روش مختلف ممکن ميباشد:

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

 کنار گذاشته شده.از استايل شيتها استفاده شود.

تغييرات در نسخه جديد اچتمل (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>

 

 

Top page

Backup_ID.htm Best_Google_Search.htm Chat_Rome_Full.htm Firewall1.htm Firewall2.htm Help_Google_For_You.htm Html.htm* Metateg.htm Page_Rank_In_Google.htm Ranking_Internet.htm Search.htm Service_Google.htm Technical_Search.htm Web_Log_1&2.htm Web_Log_3&4.htm Web_Log_5&6.htm Buy_Computer.htm Buy_Mobail.htm Buy_Printers.htm Corner_Timer.htm Dictionary_Computer.htm Media_Pic.htm NTFS.htm Partition_Magic1.htm Partition_Magic2.htm Short_Key_IE.htm Short_Key_Win_Xp.htm Short_Key_Winamp.htm Show_Desktop.htm Sound_Card.htm System_Restore.htm Technologist_Win_XP.htm Introduction.htm Web_HTML.htm Elements.htm Tags.htm Farsi.htm Formatting.htm Characters.htm Links.htm Tables.htm Frames.htm** Lists.htm Forms.htm Images.htm Background.htm Fonts.htm Style_Sheet.htm Ex_Frames_1.htm Ex_Frames_2.htm