راه های نوشتن کد های css
سه راه برای نوشتن استایل شیت ها (style seet) یا همان شیوه نامه ها وجود دارد.
- External style sheet یا شیوه نامه خارجی (استایل خارجی)
- Internal style sheet یا شیوه نامه داخلی (استایل داخلی)
- Inline style یا سبک درون خطی
External style sheet یا شیوه نامه خارجی
استایل های خارجی فایل هایی هستند که بوسیله تگ <link> در صفحه وب قرار گرفته اند و بهترین راه برای تغییر دادن ظاهر یک سایت که از صفحات زیادی درست شده اند می باشند.
در استایل های خارجی یک فایل را با پسوند css در اینترنت ذخیره (آپلود) می کنیم و آدرس آن را در تگ <link> می گذاریم. در آن فایل باید از سلکتور هایی استفاده کنیم که بتوان آنها را به کد ها و تگ های موجود در صفحه وصل کرد.
توجه داشته باشید که همیشه باید تگ <link> درون تگ <head> قرار داشته باشد تا عملکردی مناسب داشته باشد. البته نه ازلحاظ کد نویسی بلکه از لحاظ سئو بودن.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
شیوه نامه ها یا استایل های موجود در استایل های خارجی را با هر نوع ویرایشگر متنی می توان نوشت ولی باید حتما با یپوند .css ذخیره شوند وگرنه عمل نخواهند کرد.
نحوه تغییر فرمت یک فایل پس از ساخت آن
در استایل ها باید به شیوه زیر عمل کرد و در این فایل های استایل نباید از کد ها و تگ های HTML استفاده کرد.
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
توجه: در قسمت value موجود در انتخابگر p و مانند آن نباید بین 20 و px فاصله (space) وجود داشته باشد. باید به همان صورت نوشته شود.
Internal style sheet یا شیوه نامه داخلی (استایل داخلی)
یک استایل داخلی زمانی باید استفاده شود که معمولا این استایل به یک تگ html وصل است اما اگر همین استایل ها را نیز مانند استایل های داخلی به کار ببریم بهتر است چون کاربر با چند کلیک و رفتن به صفحات دیگر ، دیگر نیازی نیست این استایل ها را دوباره دانلود کند.
نحوه نوشتن این استایل ها مانند استایل خارجی می باشد ولی تنها فرق آن این است که به جای تگ <link> از تگ <style> استفاده می کنیم. مانند زیر:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline style یا سبک درون خطی
در این نوع استایل ها که در درون یک کد اچ تی ام ال قرار می گیرند بعضی از امکانات استایل های خارجی و داخلی را ندارند. برای مثال شما در این نوع استایل ها نمی توانید تعیین کنید که با بردن ماوس روی این لینک چه شکلی شود.
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
استایل ها یا شیوه نامه های چندگانه
شیوه نامه ها و یا استایل های چندگانه ، استایل هایی هستند که خاصیت یک تگ HTML را در کل صفحه برای تمام تگ های موجود در سلکتور (انتخابگر) را تعیین می کنند. برای مثال:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
{
color:red;
text-align:left;
font-size:8pt;
}
