آموزش CSS – آشنایی با Selector های سی اس اس (CSS) (جلسه ۶)

اولین و رایج ترین نوع Selector ها در زبان سی اس اس (CSS) تحت عنوان Element Selector شناخته می شوند. همانطور که در دوره اچ تی ام ال (HTML) توضیح دادیم منظور از Element تگ های اچ تی ام ال (HTML) به همراه محتوای داخل آنها است. به طور مثال برای تگ <h1> می بایست از Element Selector یی تحت عنوان {} h1 استفاده کرد. همانطور که می بینیم علامت های <> که در زبان اچ تی ام ال (HTML) مورد استفاده قرار می گیرند به علامت های {} در زبان سی اس اس (CSS) تبدیل می شوند.
به طور کلی این نوع از Selector ها بسیار گسترده هستند. به عبارت دیگر چنانچه از Selector یی تحت عنوان {} p استفاده کنیم، این Selector کلیه تگ های پاراگراف در صفحات وب سایت ما را تحت تاثیر قرار خواهد داد.
نوع دوم از Selector ها تحت عنوان class Selector شناخته می شوند. به طور کلی یکی دیگر از Attribute های زبان اچ تی ام ال (HTML) تحت عنوان class شناخته می شود که آن را در کلیه تگ ها می توان مورد استفاده قرار داد. نحوه نام گذاری class ها به این شکل است که هر نامی که بخواهیم می توانیم برای آن ها در نظر بگیریم و علاوه بر این class مد نظر را به هر تعداد و برای هر تعداد تگ که نیاز داشته باشیم می توانیم مورد استفاده قرار دهیم. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p class="myClass">استفاده از کلاس در کدهای اچ تی ام ال</p>
   </body>
</html>

همانطور که در کد فوق ملاحظه می کنیم، داخل تگ <body> یک تگ <p> قرار داده و داخل تگ آغازین پاراگراف از Attribute یی تحت عنوان class استفاده کرده و نامی دلخواه همچون myClass برای آن در نظر گرفته ایم (نحوه نوشتن myClass به این شکل است که حرف اول به صورت کوچک نوشته شده سپس اولین حرف کلمه دوم با حرف بزرگ نوشته شده است. این نوع نامگذاری اصطلاحاً camelCase گفته می شود. واژه camel به معنی “شتر” است و از آنجا که این طور نامگذاری شبیه به کوهان شتر است camelCase نامیده می شود. البته این نوع نامگذاری اجباری نبوده و صرفا برای خوانایی بیشتر مورد استفاده قرار می گیرد).
حال فایل main.css خود را به صورت زیر تکمیل می کنیم:

.myClass {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

همانطور که در کد فوق می بینیم، داخل فایل main.css ابتدا یک نقطه قرار داده سپس نامی که برای class در نظر گرفتیم را می نویسیم و هر کدی که بخواهیم به این class اختصاص یابد را داخل دو علامت {} می نویسیم:

به خاطر داشته باشیم که همواره برای اختصاص استایل به class های داخل کدهای اچ تی ام ال (HTML) بایستی داخل فایل سی اس اس (CSS) از علامت نقطه پیش از نام کلاس استفاده کنیم.
حال کد فوق را به صورت زیر تکمیل می کنیم:

   <body>
       <p class="myClass">استفاده از کلاس در کدهای اچ تی ام ال</p>
       <br/>
       <h1 class="myClass">استفاده از کلاس قبلی در یک تگ دیگر</h1>
   </body>

کاری که در کد فوق انجام داده ایم این است که با استفاده از تگ </br> یک فاصله مابین دو خط از کد ایجاد کرده ایم. سپس یک تگ <h1> نوشته ایم و class یی که قبلاً ایجاد کرده بودیم را به آن ضمیمه می کنیم:

می بینیم که کدهای سی اس اس در مورد تگ <h1> هم اعمال شده اند.
Selector دیگری که می خواهیم مورد بررسی قرار دهیم id Selector نام دارد. id Selector هم همانند class Selector است از این جهت که هر دو به عنوان Attribute برای تگ های اچ تی ام ال (HTML) مورد استفاده قرار می گیرند اما این در حالی است که یک تفاوت عمده با class Selector ها دارند به این صورت که id Selector ها فقط به یک آیتم در صفحات اچ تی ام ال (HTML) اختصاص داده می شوند. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

   <body>
       <p id="myID">استفاده از کلاس در کدهای اچ تی ام ال</p>
   </body>

می بینیم که از Attribute یی تحت عنوان id استفاده کرده و مقدار آن را برابر با myID قرار داده ایم. حال به ویرایش فایل main.css خواهیم پرداخت:

#myID {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

به خاطر داشته باشیم که برای id Selector ها در نوشتن کدهای سی اس اس (CSS) از علامت # استفاده می کنیم که اصطلاحاً Pound Sign یا Hash Mark نامیده می شود:

به طور کلی نامگذاری در برنامه نویسی از اهمیت ویژه ای برخوردار است چرا که یک اشتباه کوچک منجر به این خواهد شد که برنامه به درستی اجرا نگردد. نامگذاری در اچ تی ام ال (HTML) و سی اس اس (CSS) هم از این قاعده مستثنی نیست. در نامگذاری id ها و class ها حتماً به خاطر داشته باشیم که از علائمی همچون @ و $ و % و … استفاده نکنیم. علاوه بر این اجازه نداریم تا در نامگذاری از Space یا فاصله هم استفاده کنیم.
سی اس اس (CSS) اصطلاحاً case-sensitive است. به عبارت دیگر نام myClass با myclass دو چیز مجزا تلقی می شوند. بنابراین همواره نام هایی که برای id ها یا class های خود انتخاب می کنیم را می بایست به خاطر داشته باشیم.

آموزش CSS – آشنایی با Selector های سی اس اس (CSS) (جلسه ۷)

مدیر کل سایت 221