استفاده از انتخاب گرهای CSS

نحوه استفاده از کلاس های CSS و انتخاب گرهای ID

تا اینجا طریقه تنظیم کردن صفحات استایل دهی را یاد گرفته اید و می دانید که اگر یک انتخاب گر html تنظیم کنید، تمام تگهای html از آن نوع به مقدار ویژگی که شما تعیین کرده اید، تغییر می یابند. بعنوان مثال اگر html به صورت زیر داشته باشید:

                             

در این صورت متن تمام عنوان های H1 که در میان تگ BODY استفاده کرده اید به رنگ قرمز خواهند شد.

به عبارتی دیگر، برای استفاده از انتخاب گرهای جدید، لازم نیست که چیزی به کدهای html اضافه شود و تگها به طور معمول نوشته می شوند. اگر چه کلاس و انتخاب گرهای شناسه کمی متفاوت هستند.

انتخاب گر کلاس

برای تنظیم یک انتخاب گر کلاس، کد نویسی به صورت زیر بود:

{class selector{property:value.

{ویژگی:مقدار}نام انتخاب گر کلاس.

ابتدا یک نقطه تایپ می شود، سپس نام کلاس نوشته می شود که می تواند به دلخواه انتخاب شود. سپس ویژگی و مقدار به طور معمول نوشته می شوند.

مثال:

                          

 Fontone. در مثال فوق یک انتخاب گر کلاس است. عنوانی است که ما خودمان انتخاب کرده ایم. آنچه که داخل آکولاد قرار دارد می گوید که "هر زمانی که این قاعده استفاده می شود، متن رنگ قرمز شود".

شما می توانید این قاعده جدید را برای تمام تگهای html بکار ببرید. مانند زیر:

<H1 Class = "FontOne">My Heading</H1>

زمانی که از انتخاب گر کلاس استفاده می کنید، ولی کلمه "class" استفاده می شود. بعد از آن یک علامت مساوی (=) و بعد از آن عنوانی که برای کلاس انتخاب کرده اید تایپ می شود که در مثال ما Fontone است. اما دقت کنید که در اینجا از قرار دادن نقطه در ابتدای نام کلاس خودداری می کنیم. اگر نقطه را در ابتدای نام کلاس قرار دهید، قاعده شما کار نمی کند. توجه کنید که اگر چه ما از علامت نقل قول در دو طرف نام کلاس استفاده کرده ایم، ولی استفاده از آن ضروری نمی باشد ولی توصیه می شود که به این صورت استفاده شود.

استفاده از انتخاب گر ID

انتخاب گر ID دقیقا مشابه انتخاب گر کلاس استفاده می شود. تنها تفاوت آنها در کلمه ای است که در هنگام استفاده از قاعده بکار برده می شود. به جای کلمه class، از کلمه ID استفاده می کنیم.

                                

نتیجه کد بالا در مرورگر به صورت زیر خواهد بود:

                                

آموزش تئوری تا اینجا کافیست. بیایید کمی به صورت عملی کار کنیم. راههای متفاوتی که می شود استایل به صفحات سایت اضافه کرد را تمرین خواهیم کرد. اولین کدی که تمرین می کنیم، یک عنوان را در صفحه وسط چین می کند سپس می توانید همان کد را برای وسط چین هر چیزی در صفحه استفاده کنید. برای شروع روی درس بعدی کلیک کنید.