استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها
جلوگیری کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن
HTML خود تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با
<STYLE/> به پایان می رسد. در قسمت زیر می توانید یک نمونه از استایل را که
مشخصاتی را برای تگ <SPAN> تعریف می کند مشاهده کنید که در بخش HEAD در متن
قرار گرفته است.
<head>
<style>
<!--
span { color:red; font-style:italic }
-->
</style>
</head>
|
همانطور که می بینید استایل با تگ <style> آغاز می شود.
سپس یک کامنت را شروع می کنیم تا مرورگرهایی که از CSS پشتیبانی نمی کنند
استایل را نادیده بگیرند و در صفحه به نمایش در نیاورند. در قسمت بعد این خط را
مشاهده می کنید:
span { color:red; font-style:italic }
|
این خط مشخص می کند که هر بار که در صفحه از تگهای <STYLE> <STYLE/> استفاده
می شود. متن بین آنها به رنگ قرمز و به صورت ایتالیک نمایش داده می شود. در
نوشتن استایل باید در نظر داشته باشید که نباید از علامتهای کوچکتر و بزرگتر (
< و > ) که در اطراف تگهای HTML استفاده می شود، استفاده کنید. همچنین به جای
استفاده از علامتهای نقل قول ( " " ) که در متن HTML استفاده می شود از آکولاد
( { } ) در اطراف خواص استایل استفاده می کنیم. خواص مختلف یک استایل هم به
وسیله یک نقطه ویرگول ( ; ) از هم جدا می شوند.
وقتی ما استایلی را در بخش HEAD متن خود برای یک تگ خاص تعریف می کنیم برای
محتویات همه تگهایی که استایل برای آن تعریف شده در صفحه مورد استفاده قرار می
گیرد. برای مثال وقتی که ما کد بالا را در HEAD متن خود قرار دادیم، هر تگ
<SPAN> که در صفحه استفاده شود دارای متنی قرمز و ایتالیک است و نیاز ندارید هر
بار دوباره مشخصات متن مورد نظر را تعریف شود.
برای مثال کد زیر را وارد متن HTML خود می کنیم:
<span>این متن قرمز و ایتالیک است،</span> اما
این متن خارج تگ <span> است و مشخصات آنرا ندارد.<br>
<span>این متن نیز قرمز و ایتالیک است.</span>
|
نتیجه را به صورت زیر مشاهده خواهید کرد:
این متن قرمز و ایتالیک است، اما این
متن خارج تگ <span> است و مشخصات آنرا ندارد.
این متن نیز قرمز و ایتالیک است.
با این روش ما می توانیم تقریباً خواص همه تگهای HTML را کنترل کنیم، اما
این کافی نیست. در قسمتهای بعدی روشهایی را معرفی می کنیم که یک استایل مشخص به
وسیله تگهای مختلفی مورد استفاده قرار بگیرد. این کا را با استفاده از CLASS و
ID انجام می دهیم که به آن خواهیم پرداخت.
فرض کنید می خواهیم برای چندین صفحه از یک سری استایل استفاده کنیم که در همه
صفحات مشابه هستند. در این مورد می توانیم از یک فایل استایل خارجی استفاده
کنیم تا نیازی به چندین بار نوشتن استایلها نباشد.
برای شروع با استفاده از
یک ویرایشگر متن مانند Notepad در ویندوز یک فایل متنی ایجاد کنید. سپس اطلاعات
زیر را در این فایل وارد کنید:
div { font-family:Arial }
.redtext { color:red }
|
حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی
که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که
پسوند فایل باید css. باشد. ).
برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK>
استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را
می توانید در اینجا ببینید:
<link rel="stylesheet" type="text/css"
href="URL">
|
شناسه "rel="stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.
شناسه "type="text/css مشخص کننده نوع متن فایل برای مرورگر است.
شناسه " "=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می توانید
از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای است که متن
HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.
حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید .
خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شوید که آدرس فایل CSS را
درست وارد کرده اید:
<link rel="stylesheet" type="text/css"
href="http://www.neopersia.org/css/example.css">
|
شما باید این کد را در همه صفحاتی که می خواهید از استایل تعریف شده در فایل
قبل استفاده کنید وارد کنید وگرنه صفحات آنگونه که طراحی شده اند نمایش داده
نمی شوند.
حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت
Arial خواهد داشت. برای مثال فایل example.css به همین صفحه پیوند شده است و در
صورتی که در این صفحه از DIV استفاده شود محتویات آن با فونت Arial نمایش داده
می شوند:
<div>این متن با فونت Arial نمایش داده خواهد
شد.</div>
|
این هم نتیجه:
این متن با فونت Arial نمایش داده خواهد شد.
همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش
داده می شود:
<p class="redtext">این متن به رنگ قرمز نمایش
داده خواهد شد.<p>
|
نتیجه به این صورت خواهد بود:
این متن به رنگ قرمز نمایش داده
خواهد شد.
