نحوه استفاده از CSS

استفاده از CSS به صورت استایل خارجی

این روش هنگامی مفید است که شما قصد دارید قالب بندی یک فایل css را به چندین صفحه اعمال کنید.

با این کار می توانید تمامی صفحات سایت خود را تنها با یک فایل css مدیریت کنید.

تنها کافی است به ابتدای صفحات خود تگ لینک را به صورت زیر اضافه کنید،

توجه کنید که تگ <link> در بین تگ <head></head> قرار خواهد گرفت:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

یک فایل css خارجی را می توانید در هر ویرایشگر متنی ای ایجاد کنید

.توجه کنید که فایل css نباید شامل هیچ تگ html باشد و در هنگام ذخیره کردن آن فرمت آن را به .css تغییر دهید

.به مثال زیر توجه کنید ، این یک نمونه کوچک از یک صفحه css میباشد:

hr {color:sienna;}
p {margin:20px;}
body {background-image:url("images/x.gif");}

نکته : بین مقدار یک مشخصه (value) و واحد آن (مثلا px) فاصله ای

قرار ندهید تا قابلیت اجرای درست در تمام مرورگر ها را داشته باشد.

به عنوان مثال به جای “margin:20 px” بنویسید “margin:20px”.

استفاده از css در طراحی سایت

استفاده از CSS به صورت استایل داخلی

یک استایل داخلی را هنگامی مورد استفاده قرار می دهیم که قصد داشته باشیم فقط یک صفحه را قالب بندی کنیم.

برای این منظور استایل خود را که با تگ <style> شروع می شود در بخش <head> صفحه قرار میدهیم.به مثال زیر دقت نمایید:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin:20px;}
body {background-image:url("images/x.gif");}
</style>
</head>

استفاده CSS درون تگ های html

با استفاده از این روش،بسیاری از مزایای css را از دست خواهید داد.

پس تا جای ممکن از این روش استفاده نکنید مگر در جایی که ضرورت داشته باشد.
روش استفاده از این متد اینگونه است که شما مشخصه ی style را به تگ مورد نظر اضافه می کنید.

مشخصه style میتواند تمام خصوصیات یک فایل css را دریافت نماید.

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

<p style="color:red;margin-right:20px">این یک نمونه پاراگراف میباشد</p>

برگه های استایل چندگانه

اگر برای یک انتخابگر(selector) چند مشخصه در برگه های متفاوت تعیین شود،

مقدار آن مشخصه (value) از یک استایل خاص ارث خواهد برد.به عنوان مثال فرض کنید

که برای انتخابگر h3 استایل زیر را به صورت برگه ی خارجی ایجاد کرده ایم:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

همچنین برای همین انتخابگر h3 یک استایل به صورت داخلی مانند زیر هم ایجاد کرده ایم:

h3
{
text-align:right;
font-size:20pt;
}

حال هنگامی که مرورگر این صفحه را بررسی می نماید تگ <h3> موجود در صفحه رنگ خود را که قرمز می باشد

از استایل خارجی ارث می برد ولی text-align و font-size را از استایل داخلی ارث خواهد برد.

در واقع مرورگر همیشه آخرین مشخصه را برای یک انتخابگر اعمال میکند.

در مثال فوق هم از آنجاییکه تگ استایل خارجی زودتر از استایل داخلی در بخش <head> قرار میگیرد

پس اگر برای یک انتخابگر دو مشخصه با مقادیر متفاوت داشته باشیم مرورگر آخرین مقدار آن مشخصه را درنظر میگیرد .
در صورتی که تگ استایل خارجی را بعد از استایل داخلی قرار دهیم ،این قضیه برعکس خواهد بود!