آشنایی کامل با انتخاب گرهای css به زبان ساده

در این مطلب می خواهیم بعد از آموزش ساختار دستورات نحوی CSS به سراغ آشنایی با انتخاب گرهای CSS برویم و نحوه ی اعمال دستورات استایل دهی را بر روی تگ های HTML آموزش دهیم.

آشنایی با انتخاب گرهای CSS : کلاس و شناسه (Class و ID)

در جلسه قبلی بخش ساختار نحوی دستورات CSS را مشاهده کردید، در بخش Selector ( انتخاب گرهای css ) عنصری که می خواهیم استایل روی آن اعمال شود را ذکر میکنیم. به عنوان نمونه در تمامی دستورات در مثال زیر عنصر مورد نظر پاراگراف هست و استایل های نوشته شده در داخل براکت ها، بر روی همه پاراگراف های موجود در صفحه وب اعمال می شود.

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

انتخاب گرهای CSS به شما این امکان را می دهد که المان های HTML را انتخاب کرده و متناسب با نیاز خود آن ها را تنظیمن و دستکاری (manipulate) کنید.

با استفاده از انتخاب گرهای CSS می توان المان های دلخواه و مورد نظر HTML را براساس شناسه (ID)، کلاس (Class)، نوع (Type)، خصیصه (Attribute) پیدا و یا انتخاب و گزینش کرد.

انتخاب گر المان (the element selector)

انتخاب گر عنصر در واقع المان ها را براساس اسم المان مربوطه انتخاب می کند. می توانید کلیه ی المان های <p> را روی صفحه درست بدین ترتیب انتخاب کنید (کلیه ی عناصر <p> وسط چین (align-center) شده و متن آن با رنگ قرمز نشان داده می شود.)

مثال :

p { 
    text-align: center; 
    color: red; 
}

مثال :

p
{
color:red;
text-align:center;
}

حالا اگر بخواهیم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال شود باید از id و Class استفاده کنیم.

دستورات انتخاب گرهای CSS فقط بر روی یک عنصر واحد توسط شناسه id

id selector از خصیصه ی شناسه (id attribute)  در HTML برای انتخاب یک المان معین بهره می گیرد.

یک شناسه داخل صفحه باید منحصر بفرد باشد، بنابراین انتخاب گر CSS شناسه زمانی بکار گرفته می شود که بخواهید یک عنصر تک و منحصر بفرد را انتخاب کنید.

جهت انتخاب یک المان با شناسه ی ویژه (مشخص)، باید یک کاراکتر hash (#) را تایپ کرده و بدنبال این کاراکتر شناسه ی المان را قرار دهید.

برای این منظور ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد “#” قبل از آن اضافه کنید

مثال : چنانچه بخواهیم دستورات فقط بر روی یک پاراگراف خاص اعمال شود، ابتدا برای آن پاراگراف یک صفت id در کدهای HTML تعریف میکنیم :

<p id="para1">This is a Paragraph.</p>

سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:

#para1
{
text-align:center;
color:red;
}

به این ترتیب این دستورات از انتخاب گرهای CSS فقط بر روی پاراگرافی اعمال میشوند که دارای id برابر با para1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نمی پذیرند.

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

دستورات انتخاب گرهای CSS فقط بر روی یک گروه از عناصر توسط Class

انتخاب گر کلاس المان ها را با یک خصیصه ی کلاس / class attribute ویژه آغاز می کند.

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

برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید.

سپس به بخش دستورات CSS رفته و در بخش Selector ( انتخاب گرهای css ) ، صفت Class که برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد “.” قبل از آن اضافه کنید.

مثال : چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Class مشترک در کدهای HTML تعریف میکنیم :

در این مثال کلیه ی عناصر HTML با کلاس “center”، وسط چین (align-center) خواهند بود.

<p class="cneter">This is a Paragraph.</p>

سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.” می نویسیم:

.cneter
{
text-align:center;
}

بدینوسیله این دستورات انتخاب گرهای CSS فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیر پذیر نیستند.