آموزش تخصصی CSS (قسمت اول)
- CSS مخفف Cascading Style Sheets است
- styleها چگونگی نمایش عناصر HTML را تعریف می کنند
- styleها برای حل یک مشکل به HTML 4.0 اضافه شدند
- External Style Sheets می تواند در در انجام کار صرفه جویی کند
- External Style Sheets در فایل های CSS ذخیره می شوند
نمایش CSS
سند HTML را می توان با styleهای مختلف نمایش داد.
Styleها مشکل بزرگی را حل کردند
HTML هرگز به قصد در برگرفتن tag برای فرمت کردن یک سند ایجاد نشد.
HTML هرگز به قصد تعریف محتوای یک سند ایجاد نشد.
وقتی tagهایی مانند <font> و attributeهای رنگ به HTML 3.2 اضافه شد، کابوسی برای برنامه نویسان بود. develop کردن وبسایت های بزرگ، که فونت ها و اطلاعات رنگ به هر صفحه مجزا اضافه شدند، فرآیندی طولانی و پرهزینه شد.
برای حل این مشکل، کنسرسیوم World Wide Web، تصمیم گرفت CSS را ایجاد کند.
در HTML 4.0، می توان کل فرمتینگ را از سند HTML حذف کرد، و در فایل CSS جداگانه ای ذخیره کرد.
امروزه، همه مرورگرها CSS را ساپورت می کنند.
CSS، در انجام مقدار زیادی کار صرفه جویی می کند
CSS، تعریف می کند عناصر HTML چگونه نمایش داده می شوند.
معمولاً Styleها در فایلهای .css ذخیره می شوند. style sheetهای خارجی شما راتنها با ویرایش یک فایل قادر به تغییر ظاهر و layout همه صفحات موجود در یک وبسایت می کند.
مثال
فایل HTML زیر، لینکی به یک style sheet خارجی با تگ <link> است:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="ex1.css" />
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
این، فایل style sheet است:
body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}
سینتکس CSS
قاعده CSS، دارای دو بخش اصلی است: یک selector، و یک یا چندین تعریف (declaration):
|
Declaration |
Selector |
|
{ color: blue; font-size: 12px;} |
H1 |
|
Property^ value ^ Property^ value ^ |
|
selector، معمولاً عنصر HTML است که می خواهید style کنید.
هر declaration، از یک property و یک value تشکیل شده است.
property، استایل اتریبیوتی (style attribute) است که می خواهید تغییر دهید. هر property دارای یک value است.
نمونه از CSS
declarationهای CSS، همیشه با یک نقطه ویرگول (;) تمام می شوند، و گروههای declaration در کمانک {} قرار می گیرند:
p {color:red;text-align:center;}
برای اینکه CSS را بیشتر قابل خواندن کنید، می توانید هر declaration را در یک خط قرار دهید، مانند مثال زیر:
p
{
color:red;
text-align:center;
}
Commentهای CSS
می توانید از commentها برای توضیح کدتان استفاده کنید، و ممکن است هنگامی که source code را ویرایش می کنید، به شما کمک کنند. مرورگرها، کامنت ها را نادیده می گیرند.
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Selectorهای id و class
CSS علاوه بر تنظیم یک style برای عنصر HTML، به شما اجازه تعیین selectorهای خودتان به نام های "id" و "class" را هم می دهد.
سلکتور id
از سلکتور id برای تعیین style برای عنصر واحد و چندگانه استفاده می شود.
سلکتور id از اتریبیوت عنصر HTML استفاده می کند، و با یک "#" تعریف می شود.
قانون style زیر به عنصری با آی دی ="para1" اعمال می شود:
#para1
{
text-align:center;
color:red;
}
نام id را با عدد شروع نکنید! زیرا در Mozilla/Firefox کار نمی کند.
سلکتور class
از سلکتور class برای تعیین یک style برای گروهی از عناصر استفاده می شود. برخلاف سلکتور id، سلکتور class اغلب روی چندین عنصر بکار می رود.
این کار به شما اجازه تعیین یک style معین برای هر عنصر HTML با همان کلاس را می دهد.
سلکتور کلاس از اتریبیوت کلاس HTML استفاده می کند، و با یک "." تعریف می شود.
در مثال زیر، همه عناصر HTML با کلاس ""center، وسط چین خواهند شد:
.center {text-align:center;}
هرگز نام یک کلاس را با عدد شروع نکنید! زیرا فقط در Internet Explorer ساپورت می شود.
سه راه برای insert کردن CSS
- External style sheet
- Internal style sheet
- Inline style
Style Sheet خارجی (external)
Style Sheet خارجی، هنگامی که style به صفحات زیادی اعمال می شود، مناسب است. با یک Style Sheet خارجی، می توانید ظاهر کل یک سایت ر با تغییر دادن یک فایل عوض کنید. هر صفحه باید با استفاده از تگ <link> به style sheet لینک شود. تگ <link>، درون بخش head قرارمی گیرد:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Style Sheet خارجی، را می توان در یک text editor نوشت. این فایل نباید حاوی هیچ تگ html باشد. style sheet شما باید با پسوند .css ذخیره شود. نمونه ای از یک style sheet در زیر نشان داده شده است:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Style Sheet داخلی (internal)
Style Sheet داخلی باید هنگامی مورد استفاده قرار گیرد که یک سند واحد، style منحصر به فردی دارد. styleهای داخلی با استفاده از تگ <style> در بخش head صفحه HTML تعریف می شود، مانند مثال زیر:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>