دپارتمان آموزش رایگان

دپارتمان آموزش رایگان --> بخش طراحی سایت
در انحصار شرکت رهیاب آفتاب
www.rahyabaftab.com

استایل شیت ها (Style Sheets)

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

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

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

1) استايل شيت هاي خارجي (external style sheet):

در اين روش تمامي استايل ها و تعاريف نمايشي درون فايلي جداگانه قرار گرفته و بسيار مناسب حالت هايي است که قرار است که استايلي به بيش از يک صفحه اچتمل اعمال شود. مزيت اين روش سهولت در تغيير ظاهر صفحات يک وب سايت می باشد و براي يک تغيير کلي در سايت کافي است که فايل استايل شيت کل سايت که معمولا يک فايل واحد است تغيير داده شود. (بايد توجه داشت که در اين حالت تمامي صفحات سايت بايد به يک فايل استايل شيت واحد لينک شده باشند.) استايل شيت هاي خارجي توسط تگ <link> که درون بخش head صفحات اچتمل قرار مي گيرد، معرفي می شوند.

در مثال زير با کمک شناسه href از تگ link نام و در حالت کلي url فايل در برگيرنده استايل هاي تعريف شده تعيين می گردد:

<head>

</head>

2) استايل شيت هاي داخلي (Internal Style Sheet):

کاربرد اين روش در حالت هايي است که صفحه اچتمل نيازمند تعريف استايلي منحصر به فرد و مجزا بوده و استايل طراحي شده فقط مناسب آن صفحه خواهد بود. در اين حالت بايد کدهاي حاوي تعريف استايل درون تگ هاي <style> و <style/> قرار گرفته و معمولا نتيجه درون بخش head صفحه اچتمل گذاشته می شود. مثال:

<head>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

3) استايل شيت هاي درجا (Inline Styles Sheet):

کاربرد اين روش در مواردي است که بايد براي يک المان (يا گروهي) خاص استايلي اعمال شود. در اين حالت بايد از شناسه اي به نام style که تقريبا در تمامي تگ ها قابل اعمال است استفاده شود. مثال:

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	کنار گذاشته شده. از استايل شيت ها استفاده شود.

در مثال زير نحوه تعريف استايل شيت ها درون بخش <head> صفحات اچتمل شرح داده شده است. (Internal Style Sheet)

<html>

<head>

<style>

h2 {color: red}

h3 {color: blue}

</style>

</head>

<body>

<h2>This is header 1</h2>

<h3>This is header 2</h3>

<hr/>

</body>

</html>

با استايل تعريف شده در کد بالا، سر تيترهای h2 به رنگ قرمز و سرتيترهای h3 به رنگ آبی خواهند بود.

مثال بعدی نحوه استفاده از تگ <link> جهت اتصال به فايلهاي استايل شيت خارجي را شرح خواهد داد. (External Style Sheet) و در واقع همان مثال قبلی را به شکلی جديد پياده سازی می کند.

<html>

<head>

</head>

<body>

<h2>This is header 1</h2>

<h3>This is header 2</h3>

</body>

</html>

کد زير نيز درون فايلی با نام mystyle.css تايپ شده و در کنار خود سند html قرار می گيرد.

<style>

h2 {color: red}

h3 {color: blue}

</style>

مثال بعدی نحوه ايجاد پيوند بدون "خط افقي زيرين" توسط استايل شيت درجا (Inline Styles) شرح داده شده است.

<html>

<head>

</head>

<body>

<a href="http://www.zorwan.com/" style="text-decoration:none">Click here </a>

<br>

<a href="http://www.yahoo.com/" >برای رفتن به سايت ياهو اينجا را کليک کنيد</a>

</body>

</html>

در مثال فوق، پيوند اول با استفاده از استايل ها خط افقی زير پيوند را حذف کرده است.

بازگشت به بالای صفحه