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