|
Cascading Style Sheet
آموزش استایل شیت
استایل شیت ها یکی
از مفید ترین عناصر وب میباشند که یکی از مزیتهای
آن ساخت یک فایل و الگوی مشترک و استفاده آن در کلیه
صفحات سایت می باشد. همین امر که از تکرار یک سری کد
جلوگیری میکند باعث محبوبیت این عنصر در نزد طراحان
وب شده است.
با استایل شیت چه
کارهایی میتوانید انجام دهید؟
با این عنصر شما میتوانید مدل، اندازه،
رنگ و نوع آرایش متن ، رنگ زمینه و حاشیه صفحات و جدولها ، تنظیمات لیستها و همچنین
عکسها را کنترل کنید.
تعیین الگو و style
هر style
باید برای
یک تگ خاص تعریف شود . به محتوای
داخل تگی
که میخواهیم یک
style نسبت دهیم
selector یا انتخاب کننده میگویند که
الگوی تعریف شده در تگ آغاز کننده یک عنصر تا تگ پایان
دهنده آن تاثیر خواهد داشت.
برای
تعیین و تعریف یک الگو ابتدا باید
selector را مشخص و بنویسیم مانند
h1 سپس خصوصیات و مقادیر آنها را بین دو
علامت { } بگذاریم که طرز نوشتن
خصوصیت و مقدار آن بین { } به این
ترتیب میباشد:
ابتدا خصوصیت را نوشته سپس علامت
: میگذاریم
و بعد مقدار مشخصه آنرا مینویسیم ،
h1 { color:green }
اگر بخواهیم چند خصوصیت را به یک
selector نسبت دهیم ، بعد از هر کدام یک
; میگذاریم،
h1 { color:green; text-align:center }
روشهای
تعریف الگو و style
Style ها را به سه
روش میتوان تعریف کرد:
-
روش اول: به عنوان یک الگوی
خارجی
که اطلاعات در یک فایل نوشته میشود و با پسوند .css
ذخیره میشود که در تگ <link>
داخل قسمت
head آدرس دهی
و فراخوانده میشود.
-
روش دوم: style
را میتوانیم در قسمت head
نوشته و جاسازی کنیم که با تگهای<style></style>
مشخص میشوند.
-
روش سوم: با قرار دادن style
به عنوان خصوصیت در یک تگ و مقدار دهی آن. مانند تگ زیر:
<div style=”color:green”>
نکته: اگر
برای
یک
selector به چند روش
style تعیین شود، آن الگویی
که به تگ نزدیکتر است اجرا خواهد شد، پس طبق این اصل روش سوم نسبت به بقیه مؤثرتر
است. در ضمن هیچ محدودیتی در تعیین selector
ها ویا خصوصیات آنها نیست. به مثال زیر توجه کنید:
<style>
body { color:yellow; background-color:red }
h1,h2, h3, p { color:green }
</style>
تعریف الگو از
طریق class
گاهی اوقات یک style
به روشهای اول یا دوم تعریف میشود، اما شما نمیخواهید که آن
الگو در همه جا اعمال شود، پس میایید یک اسم واحد برایselector
انتخاب میکنید ، بدین ترتیب که بلافاصله بعد از selector
یک نقطه میگذارید و اسمی را مینویسید. پس از این کار در هر
تگی که نیاز به آن الگو هست خصوصیت class=” “
را مینویسیم و برابر با آن اسم قرار میدهیم،
<head>
<style> p.name { color:green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body> فراخوانی
فایل css در تگ <link>
ارزش واقعی style sheet
زمانی به چشم میاید که یکبار آنرا تعریف کنید و در تمام
صفحات از آن بهره ببرید. برای این منظور شما فقط از طریق
روش اول میتوانید اینکار را انجام دهید، بدین ترتیب که style
ها را در برنامه ویرایشگر متن مانند notepad
مینویسید و سپس آن فایل را با پسوند .css
ذخیره کرده و در دایرکتوری
اصلی
وب سایتتان قرار میدهید.
css مخفف Cascading
Style Sheet است.
نکته: دراین روش نیازی به نوشتن تگهای<style></style>
نیست و فقط selector ها و خصوصیات
را مینویسید. در صورت رعایت نکردن این موضوع الگوهای تعریف
شده در آن فایل در صفحات اعمال نخواهند شد.
پس از ذخیره فایل style sheet
میتوانید برای هر صفحه که میخواهید آنرا فراخوانی
کنید، برای انجام این عمل باید تگ
<link> را در قسمت
head قرار دهید و سه خصوصیت مربوط به آنرا
وارد کنید. خصوصیت rel=” “ است که
برابر با کلمه stylesheet قرار
میدهید و سپس type=” " وبا
text/css مقداردهی
میشود و در آخر با خصوصیت href=” “
فایل را آدرس دهی میکنید،
<link rel=”stylesheet” type=”text/css” href=”آدرس
فایل “>
این تگ نیازی به
پایان دهنده ندارد.
ابتدای صفحه
 نسخه چاپی
این صفحه
|
