آموزش css – درس چهارم – نحوه استفاده از css

[ آخرین بازنگری ۲۱ آبان ۱۳۹۵ ] [ نسخه چاپی ]

در دروس گذشته با هم مزیت های css را بررسی کردیم و ساختار آن را با هم فراگرفتیم و یاد گرفتیم که چگونه از انتخابگر استفاده کنیم و یا یک انتخابگر دلخواه ایجاد کنیم.در این درس به نحوه ی استفاده از فایل های css و اعمال آن بر صفحات خود می پردازیم.
هنگامی که مرورگر یک برگه استایل(فایل css) را میخواند صفحه را برحسب آن قالب بندی می کند.برای استفاده از برگه استایل سه روش وجود دارد:
۱٫    استفاده به صورت استایل خارجی
۲٫    استفاده به صورت استایل داخلی
۳٫    استفاده درون تگ های html

استفاده از 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> قرار میگیرد پس اگر برای یک انتخابگر دو مشخصه با مقادیر متفاوت داشته باشیم مرورگر آخرین مقدار آن مشخصه را درنظر میگیرد .
در صورتی که تگ استایل خارجی را بعد از استایل داخلی قرار دهیم ،این قضیه برعکس خواهد بود!

احتمالا این مطالب برای شما جالب هستند

آموزشcss – درس پنجم – تصویر زمینه
آموزش css – درس دوم-دستورات
آموزش css – درس ششم – ویرایش متن
تعیین فونت و قلم نوشته‌ها و استایل بندی آن در CSS
دوره‌ی مقدماتی آموزش کسب مهارت CSS
آشنایی با CSS و لزوم استفاده از آن در طراحی سایت
طراحی و استایل بندی جدول با کمک CSS

گفتگو پیرامون آموزش css – درس چهارم – نحوه استفاده از css

(منتشر شده: 3 | در انتظار تایید: 0)
ناشناس

همشونو.آخه حوصله آدم سر میره بخواد بخونشون این همه رو

پاسخ دهید
mitra mardomkhah

سلام و درود بر شما
بابت آموزش هایی که در سایت قرار داده اید بسیار تشکر می کنم چون خیلی مفید و مختصر هستن.
و 2 سوره از قرآن را به نیت تشکر از شما قرائت کرده و هدیه می کنم.

پاسخ دهید

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)