در جلسه ی قبل ساختار کلی سی اس اس را معرفی کردیم. اکنون می‌خواهیم بدانیم که سلکتور به چه معناست و چه انواعی دارد؟ و در ادامه نیز روش ایجاد یک سند css را بیان می‌کنیم.
سلکتور در CSS چیست ؟
Selector به معنای انتخابگر هست که می‌تواند انواع مختلفی داشته باشد. مانند انتخابگر عنصر، انتخابگر آیدی، انتخابگر کلاس و…
در حالت انتخابگر عنصر، اسم یک تگ را قبل از علامت {property:value;} قرار می‌دهیم. فرض کنید می‌خواهیم رنگ تمام متونی که درون تگ p قرار دارند را آبی کنیم. کافی است به صورت زیر بنویسیم:
P {
Color:blue ;
}
در این حالت تمام تگ‌های p را انتخاب کرده ایم. حال اگر بخواهیم آیدی خاصی را انتخاب کنیم باید به شکل حالت قبلی عمل کنیم با این تفاوت که به جای اسم تگ، از اسم آیدی همراه با علامت # استفاده کنیم. یعنی به صورت زیر:
#mehr {
Color:blue ;
}
در این حالت فقط تگی که دارای آیدی mehr هست مورد هدف قرار می‌گیرد. اما اگر بخواهیم تگ‌هایی که شامل یک کلاس هستند را انتخاب کنیم و استایل مورد نظر را به آن‌ها بدهیم، به شکل زیر عمل می‌کنیم:
.movafagh {
Color:blue ;
}
اگر توجه کرده باشید برای انتخاب کلاس از علامت . استفاده کرده‌ایم. در این مثال تمام تگ‌هایی که دارای کلاس movafagh هستند انتخاب شده‌اند و رنگ متون آن‌ها آبی شده است.
حال اگر بخواهیم یک استایل را برای تمام تگ‌ها قرار دهیم، باید چگونه عمل کنیم؟ در این حالت کافی ست از انتخابگر سراسری استفاده کنیم. برای مثال اگر بخواهیم رنگ متون در تمام تگ‌ها را تغییر دهیم به صورت زیر می‌نویسیم:
*{
Color:blue ;
}
نحوه ایجاد یک فایل CSS (سند سی اس اس)
اکنون سوال مهمی‌که وجود دارد این است که این کدهای css را کجا قرار دهیم؟ همان طور که در جلسه ی قبل گفته شد بهترین حالت این است که کدهای سی اس اس را به صورت جداگانه و درون یک فایل خارج از سند html قرار دهیم. اما چگونه؟
برای این کار باید وارد پوشه مربوط به پروژه شویم و یک سند جدید ایجاد کنیم. یعنی درون پوشه کلیک راست می‌کنیم و گزینه new text document را انتخاب می‌کنیم. حال باید نام و پسوند آن را انتخاب کنیم. اسم آن را styles می‌گذاریم و پسوند .css را می‌نویسم؛ یعنی فایل سی اس اس ما به صورت styles.css در می‌آید. سپس می‌توانیم روی آن کلیک راست کنیم و با نرم افزار vs code آن را باز کنیم و کدهای css را درون آن بنویسیم.
اما کار به همین جا ختم نمی‌شود بلکه مهم ترین و اصلی ترین اقدام این است که به وسیله ی تگ link فایل css را به سند html متصل کنیم. به صورت زیر:
<link href=”آدرس فایل css” rel=”stylesheet” type=”text/css”>
نکته: باید این تگ را درون تگ <head> قرار دهیم. مهم‌ترین و اساسی‌ترین اتربیوت href است که باید آدرس فایل سی اس اس را نسبت به سند html درون آن قرار دهیم.
آدرس دهی به فایل CSS
در هنگام نوشتن آدرس اگر فایل css و html درون پوشه پروژه‌مان در کنار هم بودند، فقط کافی است نام فایل را به عنوان آدرس بنویسیم. اما اگر درون یک پوشه جداگانه بود باید ابتدا نام پوشه و علامت / و سپس نام فایل css را بنویسیم. در حالتی که پوشه ی حاوی فایل css نسبت به فایل html عقب تر بود باید از علامت ../ و سپس نام فایل css استفاده کنیم.
