اضافه کردن CSS به فایل HTML – استفاده از CSS
خوش اومدین به دومین جلسه از دوره آموزش CSS. ما در جلسه قبلی یاد گرفتیم که CSS چیست و چه کاربردی دارد. همچنین با syntax و قواعد نوشتار کدهای CSS آشنا شدیم. امروز قصد دارید که به نحوه اضافه کردن CSS به فایل HTML و روش های استفاده از CSS بپردازیم و با این موضوع آشنا بشیم. ما از جلسه بعد به سراغ ویژی های متنوعی میریم که امکان تنظیم اونها در CSS وجود داره.
استفاده از CSS
ما به طور کلی 3 روش برای استفاده از CSS داریم. این 3 روش عبارتند از:
- External CSS یا CSS خارجی
- Internal CSS یا CSS داخلی
- Inline CSS یا CSS درون خطی
1. استفاده از CSS خارجی
برای استفاده از این روش لازم است که ابتدا کدهای CSS خودمون رو داخل یک فایل دیگر بنویسیم و آن فایل را با پسوند css ذخیره کنیم. پس از اینکه فایل رو ذخیره کردیم با استفاده از تگ link در داخل تگ head فایل HTML اون فایل رو فراخوانی میکنیم. به این ترتیب میتونیم از کدهای CSS نوشته شده در اون فایل استفاده کنیم.
به عنوان مثال من یک فایل با نام mystyle.css ایجاد کردم (با استفاده از یک کد ادیتور مثل notepade میتونیم یک فایل css ایجاد کنیم) و محتوای زیر رو داخل اون قرار دادم:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}همونطور که میبینید من در این فایل css برای 2 selector ویژگی هایی رو تعریف کردم. این دو selector هر دو تگ هستند. تگ های body و h1 . اگر این فایل را در داخل فایل HTML خودم فراخوانی کنم تگ های body و h1 من خصوصیات ذکر شده در این فایل CSS رو میگیرند.
حالا به درون فایل HTML خودم به این صورت فایل mystyle.css رو فراخوانی میکنم:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>همونطور که میبینید من با استفاده از تگ link در داخل تگ head فایل mystyle.css رو به پروژه خودم اضافه کردم. تصویر زیر رو ببینید:
همونطور که میبینید من در خط هفتم با استفاده از تگ link فایل خارجی mystyle.css رو فراخوانی کردم و این کار با موفقیت انجام شده. در خروجی ویژگی هایی که برای تگ body و h1 تعریف کرده بودم به اونها اختصاص پیدا کرده. همینطور تگ p که ویژگی براش تعریف نشده بود به صورت پیشفرض نمایش داده شده است.
همانطور که در دوره HTML در درس تگ لینک a توضیح دادم، ما دو نوع آدرس دهی داریم. آدرس دهی مطلق و نسبی. این موضوع در خصوص صفت href تگ link هم صدق میکنه و ما میتونیم به صورت مطلق یا نسبی آدرس دهی کنیم. برای آشنایی با این موضوع بخش آدرس دهی مطلق و نسبی رو مطالعه کنید.
2. استفاده از CSS داخلی
دومین روش استفاده از تگ style در تگ head فایل HTML است. به این ترتیب کدهای CSS ما نه در یک فایل خارجی بلکه در داخل فایل HTML نوشته میشود. مثال زیر را ببینید:
همونطور که در تصویر بالا میبینید من ویژگی هایی را برای تگ های body و h1 در داخل تگ style تعریف کردم. در این روش نیازی به فایل css خارجی نیست. تگ style را درون تگ head استفاده میکنیم.
در خروجی میتونیم ببینیم که تنظیماتی که انجام داده ایم به درستی در خروجی نمایش داده میشود. رنگ پس زمینه body تغییر کرده و همچنین رنگ متن h1 نیز تغییر کرده و همچنین h1 از سمت چپ صفحه 40 پیکسل فاصل گرفته.
اما تگ p که هیچ استایلی برایش تعریف نکردیم، با شکل و شمایل پیشفرض نمایش داده شده.
3.استفاده از CSS درون خطی
در این روش ما با استفاده از صفت style برای هر تگی به صورت مستقل استایل دهی رو انجام میدیم. قطعه کد زیر رو ببینید:
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>در خط اول برای تگ h1 با استفاده از صفت style دو ویژگی رو مقداردهی کردم و در خط دوم این کد برای تگ p نیز با استفاده از صفت style ویژگی رنگ متن رو به قرمز تغییر دادم.
نکته مهم در مورد این روش این هست که طبیعتا کدهای CSS ما فقط و فقط برای همان تگی اعمال میشود که در آن استایل را مینویسیم.
از کدام روش برای نوشتن کد CSS استفاده کنم؟
خب حالا که با 3 روش استفاده از CSS در HTML آشنا شدیم و تفاوتهای اونها رو دیدیم، این سوال پیش میاد که از کدوم روش استفاده کنیم؟
در پاسخ به این سوال باید گفت که بهترین روش، روش شماره 1 یعنی استفاده از CSS خارجی هست. به چه دلیل؟
- کدهای CSS و HTML یک صفحه وب بسیار زیاد است. جدا بودن فایل CSS ، باعث میشه کدهای HTML ما خلوت تر و مرتب تر باشن.
- امکان استفاده از کدهای CSS در چندین فایل HTML وجود داره. در حالی که در دو روش دیگه این امکان وجود نداره.
- بهترین شیوه استفاده از CSS از منظر موتورهای جستجو و مبحث SEO است.
- اگر قصد تغییر یک ویژگی را داشته باشیم به راحتی این ویرایش امکان پذیرهست.
همونطور که دیدید نتیجه نهایی هر 3 روش یکسان هست ولی به شما توصیه میکنم، هیچگاه از استایل درون خطی استفاده نکنید. علاوه بر اینکه مدیریت و ویرایش CSS درون خطی در پروژه بزرگ بسیار بسیار سخت و زمان بر است، این شیوه از نظر موتورهای جستجو هم مورد پسند نیست.
نکته مهم: من در آموزش ها ممکن هست برای اینکه کدها رو در کنار هم داشته باشیم از CSS درون خطی استفاده کنم. این کار صرفا برای آموزش انجام میشه و به معنی تأیید این سبک استایل دهی نیست.
