در جلسه دوم از دوره آموزش css، قراره درباره نحوه اضافه کردن css به html با هم صحبت کنیم. درواقع بعد از طراحی صفحه وب به کمک تگ‌های html زمانی که اولین استایل‌های css رو می‌نویسیم، یه سوال مهم پیش میاد. اونم اینه که چطور این استایل‌ها رو به صفحه وب اعمال کنیم؟!. از اونجایی که طی جلسات قبل فقط درباره چیستی css و سلکتورهای css با هم صحبت کردیم، الان که این مطلب رو می‌خونید همه چیز یه مقدار براتون گنگه. میخوام بگم اصلا نگران نباشید و فقط قدم به قدم همراه من بیاید. به مرور زمان به همه اصطلاحات و کدهای css مسلط میشید.
منظور از استایل و استایل‌دهی چیه؟!
اولین اصطلاحی که ممکنه واستون مبهم و ناشناخته باشه، استایل هست. منظور از استایل هر یدونه کد css هست که جلوه ظاهری مشخصی به المان html ما اعمال میکنه. برای مثال کد css که رنگ پس زمینه یه المان رو تغییر میده یه استایل هست. به همین ترتیب وقتی میگیم قصد استایل دهی یه المان html رو داریم، منظور اینه که قصد داریم تعدادی کد css که جلوه ظاهری این المان رو تغییر میدن بهش نسبت بدیم. در آینده با تک تک کدهای مربوط به اعمال استایل‌های مختلف آشنا میشیم، بنابراین اصلا نگران نباشید.
وقتی یه صفحه وب رو به کمک html طراحی می‌کنید هیچ رنگ و لعابی نداره. درواقع html به خودی خود هیچ استایلی نداره. پس لازمه استایل‌های css به طور جداگانه معرفی و مقداردهی بشن و بعد به html اضافه بشن. به طور کلی برای اضافه کردن استایل‌های css به html سه روش کلی وجود داره که در ادامه این روش‌ها رو با ذکر مثال معرفی می‌کنیم.
روش اول: استایل‌دهی inline
اولین روش اضافه کردن css به html به روش inline معروفه. در این روش استایل‌های css درون فایل html و در همون خطی که کد html ما نوشته شده اضافه میشن. برای مثال اگه من یک تگ p داشته باشم و قصد داشته باشم رنگ نوشته رو به آبی تغییر بدم، استایل مربوط به تغییر رنگ رو درون تگ p می‌نویسم. کد زیر این مثال رو نشون میده.
<p style = “color:blue;” > this is a sample text </p>
خروجی تکه کد بالا به صورت this is a sample text در صفحه نمایش داده میشه. اگه دقت کنید برای انتساب استایل به یک تگ لازمه از خصیصه style درون تگ استفاده کنیم و بین ” “، استایل‌های css مورد نظرمون رو بنویسیم. همچنین نکته مهم در نوشتن استایل‌های css اینه که بعد از اتمام هر استایل لازمه از ; استفاده کنیم. درواقع ; (سمی کالن) به عنوان جداکننده کدهای css عمل میکنه. استایل‌های css به صورت کلید مقدار نوشته میشن. برای نمونه در این مثال color یک خصیصه css و blue مقدار اون هست. اگر قصد داشتیم رنگ متن رو به قرمز تغییر بدیم، عبارتcolor ثابت می‌موند اما مقدار blue به red تغییر میکرد. یعنی برای داشتن متنی قرمز رنگ کافی بود تکه کد زیر رو بنویسیم.
<p style = “color:red;” > this is a sample text </p>
در رابطه با روش inline لازمه بدونید که این روش به هیچ عنوان روش مناسبی برای اضافه کردن css به html نیست. دلیلش اینه که نوشتن استایل‌های inline فایل html ما رو شلوغ میکنن و باعث میشن حجم فایل html زیاد بشه. افزایش حجم فایل html سرعت لود صفحه وب رو پایین میاره که جدا برای سئو سایت خطرناکه. همچنین با شلوغ شدن فایل html قابلیت خوانایی و نگهداری فایل سخت میشه. این به این معنیه که اگه بعد از دو سال برای اصلاح و تغییر این فایل برگردید از بس همه چیز شلوغ و درهمه احتمالا نتونید به راحتی ازش سر در بیارید.
روش دوم برای اضافه کردن css به html
دومین روش خیلی شبیه روش اوله، تنها با این تفاوت که به جای اینکه استایل‌ها رو درون تگ‌های html بنویسیم اونها رو به ابتدای فایل html منتقل می‌کنیم. برای این کار لازمه از تگ باز و بسته <style> استفاده کنیم که در مثال زیر یک نمونه از استفاده این تگ رو می‌بینید. همونطور که می‌بینید در تکه کد زیر از سلکتور tag name استفاده شده و کاربرد سلکتورهای css درواقع همینجاست. تکه کد زیر رنگ متن همه تگ‌های p موجود در صفحه رو تغییر میده. اگه میخواستیم فقط رنگ یکی از تگ‌های p و یا تعدادی از اونها تغییر کنه، باید از سلکتورهای id و class استفاده کنیم. اگه نمیدونی این سلکتورها چی هستن می‌تونی آموزش مربوط به آشنایی با سلکتورهای css رو مطالعه کنی.
<head>
<style>
p {
color: red;
}
</style>
</head>
درباره این روش هم باید بدونید که روش دوم هم به اندازه استفاده از روش دوم نامناسبه. استفاده از این روش سرعت لود سایت، قابلیت خوانایی و قابلیت نگهداری صفحه وب رو کاهش میده و به همین دلیل بهتره که مورد استفاده قرار نگیره.
روش سوم اضافه کردن css به html
سومین روش اضافه کردن cssبه html، بهترین روش انجام این کار هست. در این روش ما استایل‌های css رو درون یک فایل متنی جدا از نوع Css می‌نویسیم و این فایل رو به فایل html لینک می‌کنیم. برای لینک کردن این دو فایل به هم، از تگ link که مخصوص این کار هست و در مثال زیر مشاهده می‌کنید، استفاده می‌کنیم. استفاده از این روش قابلیت خوانایی و نگهداری سایت رو کاهش نمیده و باعث کم شدن سرعت لود سایت و لطمه به سئو هم نمیشه. بنابراین میشه گفت استفاده از این روش بهترین روش برای اضافه کردن css به html هست.
<link rel = “stylesheet” href =”style.Css” />
فرض کنید استایل‌های css موردنظرتون رو در فایلی به نام style.Css قرار دادید. به این ترتیب برای اضافه کردن css به html کافیه فایل style به کمک تگ link به سند html لینک کنیم. خصیصه rel با مقدار stylesheet در این تگ ثابته و تغییر نمیکنه. اما خصیصه href به محل قرارگیری فایل حاوی استایل‌های شما، اشاره داره. بنابراین مقدار اون با توجه به اینکه اسم فایل شما چیه و در چه مسیری قرار داره بستگی داره.
حرف آخر
در این جلسه درباره اضافه کردن css به html با هم صحبت کردیم. میشه گفت این مبحث شروع کار شما با css هست. به مرور زمان تک تک تگ‌های css رو با هم یاد می‌گیریم و بهشون مسلط میشیم بنابراین اصلا نگران نباشید. اگه هر سوال و یا مشکلی دارید می‌تونید زیر همین آموزش برام کامنت کنید تا جواب بدم. موفق و پیروز باشید و آموزش‌های بعدی سایت رو دنبال کنید.
