تو این پست قصد داریم در مورد شیوه‌های مختلف استفاده از CSS در درون صفحات HTML صحبت کنیم . به طور کلی به 3 شکل می‌تونید از CSS برای تعیین شیوه نمایش تگها ، در میان کدهای HTML استفاده کنید :
1. استفاده از CSS در درون تگها(inline CSS)
2. نوشتن تمامی تنظیمات CSS درون تگStyle در header صفحه اچ تی ام ال
3. نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML
1- استفاده از CSS در درون تگها (inline CSS) :
این روش به سبک درون خطی معروفه از مهمترین سبک ها در نوشتن Css هست . در وب سایت هایی که تعداد صفحات کمی دارند از روش css داخلی برای طراحی سایت استفاده می کنند.
این روش سایر روش ها را شامل میشه اما توصیه میشه جهت بهینه سازی سایت از این روش کمتر استفاده شود . شما می‌توانید تنظیمات و ویژگیهای CSS رو در درون هر کدوم از تگهای Htmlبیارید تا اون تنظیمات روی تگ مربوطه اعمال بشه . برای اینکار باید ویژگیهای CSS مورد نظر رو که می‌خواید روی تگ خاصی اعمال بشه درون ویژگی style اون تگ بیارید . ویژگی Styleبرای همه تگهای Html قابل تعریفه و به عنوان مقدار ، در درون خود میتونه چندین تا از ویژگیهای CSS رو که با علامت ; از هم جدا شدند بیاره ! برای درک بیشتر از چگونگی استفاده CSSدر درون تگها ، چند تا مثال براتون میارم :
فرض کنید می‌خواهید فقط یکی از پاراگراف‌های توی صفحتون رنگ متنش قرمز بشه . - تگ داشتن یک پاراگراف معمولی به شکل زیره :
<p>Css Learning</p>
حالا ما می‌خواهیم با استفاده از CSSدرون این تگ ، رنگ متنش رو قرمز کنیم . در این صورت کد پاراگراف بالا به شکل زیر باید تغیر پیدا کنه .
<p style="color:red" >Css Learning</p>
می بینید که فقط ویژگی style به این تگ اضافه شده و به عنوان مقدار یکی از ویژگیهای CSS که رنگ متن رو مشخص می‌کنه آورده شده
حالا همون پاراگراف بالا رو می‌خوایم نوع فونتش رو Tahoma و اندازه فونت رو 16 پیکسل کنیم . کدش مثل زیر میشه :
<p style="font-face:tahoma;font-size:12px;">Css Learning</p>
ملاحظه می‌کنید که همه ی تنظیمات CSS مورد نظر رو درون خود تگ و به عنوان مقدار ویژگی style آورردیم . استفاده ی به این شکل خیلی کار درستی نیست . مگر اینکه فقط در تگ خاصی بخواید تنظیمات رو اعمال کنید و این تنظیمات در تگهای دیگه به اشتراک گذاشته نشده باشند . اگه بخواید همه ی مواقع از این شیوه استفاده کنید بسیاری از مزایای CSS رو از دست خواهید داد !
2- نوشتن تمامی تنظیمات CSS درون تگ Style در header صفحه html
با استفاده از روش Css داخلی شما می‌تونید همه یا برخی از سلکتورهای CSS رو در تگ <style> تعریف کنید و در تگهای مختلف html با آوردن ویژگی class که نام یک سلکتور رو میگیره ، تنظیمات مربوط به سلکتور خاصی رو ، روی اون تگ اعمال کنید . این سبک مزایایی داره :
این سبک فقط برای صفحاتی قابل اجراست که از این سبک استفاده شده و با استفاده از این روش می توان خاصیت ارث بری کلاس ها استفاده کرد.به عبارتی می تونید از چند جای همان صفحه استفاده کنید. . تگ <style> در کدhtml باید درون تگ <head> قرار بگیره .
همون مثالی که برای روش اول زدیم اینجا باید به این شکل پیاده سازی بشه :
<html>
<head>
<title>7Learn.com Css Learning</title>
<style>
.p1 {color:red}
.p2 {font-face:tahoma;font-size:12px;}
</style>
</head>
<body>
<p class="p1">Css Learning</p>
<p class="p2">Css Learning</p>
</body>
</html>
می بینید که سلکتورهای p1 و p2 رو در تگ <style> تعریف کردیم و با استفاده از ویژگی class گفتیم که تنظیمات p1 روی پاراگراف اولی و p2 روی پاراگراف دومی اعمال بشه .
حالا فرض کنید با این دو روشی که گفتیم می‌خوایم یه پاراگراف دیگه اضافه کنید که خصوصیات هر دو پاراگراف اول و دوم رو داشته باشه .
در روش اول باید همه تنظیمات CSS رو درون تگ پاراگراف جدید بیاریم :
<p style="color:red;font-face:tahoma;font-size:12px;"> Css Learning</p>
ولی در روش دوم براحتی از ترکیب دو تا سلکتور p1 و p2 استفاده میکنیم :
<p class="p1 p2" >Css Learning</p>
و دیگه نیازی نیست کد تکراری و اضافی بنویسید .
وقتی تنظیمات CSS در صفحات html شما زیاد میشن کارایی روش دوم خیلی محسوس میشه . مخصوصا اگه تگهای مختلفی با تنظیمات مشترک در صفحه وجود داشته باشه ، استفاده از روش دوم باعث کاهش redundancy و جلوگیری از نوشتن کدهای تکراری میشه .
3- نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML
سبک Css خارجی را در طراحی سایت باید در تگ لینک داخل تگ head تعریف کنید.با استفاده از این سبک شما می تونید از چندین صفحه وب سایت خود استفاده کنید.در این سبک می تونید با تغییر یک فایل کل ظاهر وب سایت خود را عوض کنید.
این روش دقیقا شبیه روش قبلیه با این تفاوت که به جای نوشتن سلکتورهای CSS در تگ style اونها رو در یک فایل با پسوند css. مینویسیم و این فایل رو با تگ خاصی به صفحه html الصاق میکنیم .
برای چسبوندن یک فایل CSS جهت استفاده از سلکتورهای اون در یک صفحه html باید تگ زیر رو در header صفحه htmlتون در تگ <head> قرار بدید :
<link rel="stylesheet" type="text/css" href="cssFileURL">
به جای cssFileURL باید آدرس فایل CSS رو قرار بدید .
باز هم همون مثال بالا رو این بار با روش سوم اینجا میاریم :
خوب فرض کنیم ما سلکتورهامون رو در فایلی به نام styles.css نوشتیم و آپلود کردیم و محتویات فایل و آدرس رو به صورت زیر داریم :
css/sytles.css
.p1 {color:red}
.p2 {font-face:tahoma;font-size:12px;}
و کد صفحه html ما که شامل دو تا پاراگراف قبلی هستند به شکل زیر میشه :
<html>
<head>
<title> Css Learning</title>
<link rel="stylesheet" type="text/css" href="css/sytles.css">
</head>
<body>
<p class="p1">Css Learning</p>
<p class="p2">Css Learning</p>
</body>
</html>
با الصاق فایل CSS به صفحه html که شامل سلکتورهامون هستند ، شیوه استفاده از سلکتورها دقیقا شبیه روش قبلی و با استفاده از ویژگی class هست .استفاده از فایهای css میتونه نگهداری و مدیریت فایل‌های CSSتون رو راحت‌تر کنه .
در کل بهتره که از روش دوم یا سوم استفاده کنید تا از تمام مزایای CSS بهره ببرید .
