آشنایی با انواع انتخابگرها در CSS



در جلسه قبل ساختار کلی CSS را معرفی کردیم. حال می خواهیم بدانیم انتخابگر به چه معناست و انواع آن چیست؟ و در ادامه روش ساخت سند css را شرح می دهیم. سلکتور به معنای انتخابگر است. که می تواند انواع مختلفی داشته باشد. مانند انتخابگر عنصر، انتخابگر شناسه، انتخابگر کلاس و غیره، در حالت انتخابگر عنصر، نام یک تگ را قبل از علامت {property:value;} قرار می دهیم. فرض کنید می خواهیم رنگ تمام متن های داخل تگ p را به آبی تغییر دهیم. کافی است به صورت زیر بنویسیم: P {Color: blue ;} در این صورت همه تگ های p را انتخاب کرده ایم. حال اگر بخواهیم شناسه خاصی را انتخاب کنیم باید مانند قبل عمل کنیم با این تفاوت که به جای نام تگ از نام شناسه همراه با علامت # استفاده می کنیم. یعنی به صورت زیر: #mehr {Color: blue ;} در این حالت فقط برچسبی که شناسه mehr را دارد هدف قرار می گیرد. اما اگر بخواهیم تگ های حاوی کلاس را انتخاب کنیم و استایل مورد نظر خود را به آنها بدهیم، به صورت زیر عمل می کنیم: movafagh {Color: blue ;} که استفاده کرده ایم. در این مثال تمامی تگ هایی که دارای کلاس موفق هستند انتخاب شده و رنگ متن آنها آبی است. حال اگر بخواهیم برای همه تگ ها استایل بگذاریم چگونه باید عمل کنیم؟ در این حالت کافی است از سلکتور سراسری استفاده کنید. به عنوان مثال اگر بخواهیم رنگ متن را در تمام تگ ها تغییر دهیم به صورت زیر می نویسیم: *{Color:blue ;} حال سوال مهم این است که این کدهای css را در کجا قرار دهیم؟ همانطور که در جلسه قبل گفته شد، بهترین راه این است که کدهای CSS را به صورت جداگانه و در یک فایل خارج از سند html قرار دهید. اما چگونه؟ برای این کار باید وارد پوشه پروژه شده و یک سند جدید ایجاد کنیم. یعنی داخل پوشه کلیک راست کرده و گزینه new text document را انتخاب می کنیم. حال باید نام و پسوند آن را انتخاب کنیم. ما آن را styles می نامیم و پسوند .css را می نویسیم، به این معنی که فایل CSS ما styles.css خواهد بود. و سپس می توانیم روی آن راست کلیک کرده و با نرم افزار vs code آن را باز کرده و کدهای css را در آن بنویسیم. اما کار به همین جا ختم نمی شود، بلکه مهمترین و اصلی ترین اقدام استفاده از تگ لینک فایل css است. به سند html پیوست کنید. به شرح زیر است: توجه: باید این تگ را در داخل قرار دهیم برچسب زدن مهمترین و اساسی ترین ویژگی href است که باید آدرس فایل css را در رابطه با سند html قرار دهیم. هنگام نوشتن آدرس، اگر فایل های css و html با هم در پوشه پروژه ما هستند، کافی است نام فایل را به Write the title of address تغییر دهید. اما اگر داخل یک پوشه جداگانه باشد ابتدا باید نام پوشه و علامت / و سپس نام فایل css را بنویسیم. در صورتی که پوشه حاوی فایل css دیرتر از فایل html بود باید از علامت ../ و سپس نام فایل css استفاده کنیم.

دیدگاهتان را بنویسید