گزینشگرهای CSS را بشناسید!

گزینشگرهای CSS ساختارهای دستوری CSS هستندکه لازم است در کنار HTML یاد بگیریدش. اما این دستورات چجوری روی تگ ها اثر می گذارند؟

سی اس اس با دستورات و تغیرراتی که به تگ های HTML می دهد، ترکیب ظاهری سایت را مطابق با نوع گزینشگرهایی که به کار می برید، تغییر میدهد.

در صورتی که از کمی خلاقیت در به کارگیری انواع گزینشگرهای CSS به کار ببرید، توانایی خلق سایتها جذابی را پیدا می کنید.

گزینشگرهای CSS

گزینشگرهای  CSSاز ۶ روش روی تگ ها تاثیر و آنها را از نظز ظاهری و کارکردی تغییر می دهد.

گزینشگرهای برچسب   (Tag Selectors)

این گزینشگر، مثل همان تگ های اچ تی ام ال است که طرح مورد نظر را برای آن تعریف می کنید.

بیشترین کاربرد این گزینشگر زمانی است که قصد ایجاد یک تغییر عمده را به صورت پیش فرض در سایت دارید.

مثلا می خواهید به صورت پیش فرض، فونت تمامی مطالب را یک دست کنید.

گزینشگرهای کلاس کاذب (Pseudo-Class Selectors)

پویایی سایت را با این گزینشگر CSS می توانید نشان دهید.

فعالیت هایی مثل رنگی کردن لینک ها، تغییر رنگ آیکون ها و تغییر آیکون ها با حرکت های موس را توسط گزینشگرهای کلاس کاذب انجام میدهند.

گزینشگرهای کلاس (Class Selectors)

وقتی می خواهید برای دو تگ یکسان، دو دستور ظاهری متفاوت درست کنید باید از گزینشگر های کلاس استفاده کنید.

برای مثال می خواهید برای دو پاراگراف یکسان، رنگ و فونت متفاوتی ترتیب دهید.

همچنین می توانید برای یک تگ، کلاس های CSS بیشتری به کار ببرید.

گزینشگرهای مفهومی (Contextual Selectors)

وقتی برای یک تگ HTML، کلاسی به کار ببرید که در تگ دیگر هم از آن استفاده کرده باشید، تگ ها یک شکل ظاهری یکسان می گیرند.

گزینشگرهای خصوصی  (ID Selectors)

برای گزینشگرهای خصوصی ، برای تگ باید نام ID را به کار ببرید.

گزینشگر عمومی (Universal Selector)

زمانی که بخواهید برای همه تگ ها یک ویژگی یکسان در نظر بگیرید.

مثلا فونت این مقاله را عموما NAZANIN B بگذارید و یا رنگ نوشته های این مقاله را کلا قرمز کنید.

این گزینشگر CSS ، یک حالت کلی است که بر خلاف گزینشگرهای برچسب به صورت پیش فرض نیست.

چکیده:

امیدواریم هدف و کاربرد انواع گزینشگرهای CSS را به خوبی یاد گرفته باشید.

هر کذام از این گزینشگرها می توانند در کنار یکی از تگ های HTML قرار بگیرند و دستور تغییر و چگونگی تغییر را صادر کنند.

برای مشاهده مطالب بیشتر به پیج اینستاگرام ما سر بزنید.

برای مطالعه بیشتر در ارتباط با css روی این جمله کلیک کنید.