امتیاز دهید:

اولین و رایج ترین نوع 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>Netshahr</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 اختصاص یابد را داخل دو علامت {} می نویسیم:

1. using class in css

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

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

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

2. using class in css

می بینیم که کدهای سی اس اس در مورد تگ <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 نامیده می شود:

id selectors in css

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


نظرات
نظرات
  • محمدی :

    عالی بود. عاااااااااااااااااااااااااااالی. مرسیییییییییییییییی


    1396/04/19 16:41:42
  • مازیار :

    i dont know how can i thank you.very very usefull.thanks alot.


    1396/03/08 14:08:36
  • عرفان :

    عالیییییییی یعنی مرسی داریا دمت گرم کاکو 2 ساعت درگیرش بوذم ممنون این سایت یک چیز کم داره اونم اینه که باید 10 ستاره بهش بدبد اگه موافقی لایک کن


    1395/09/15 15:30:17
  • بهزاد مرادی :

    در پاسخ به mnr73

    سلام و خسته نباشید
    من فرق ID و Class را به درستی متوجه نشدم میشه بیشتر توضیح بدید؟یعنی فقط یک بار میشه از ID‌ استفاده کرد؟ اگه بیشتر استفاده کنیم چه اتفاقی میفته؟


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



    با سپاس فراوان
    بهزاد مرادی
    تیم تولید محتوای نت شهر


    1393/05/30 04:54:37
  • mnr73 :

    سلام و خسته نباشید
    من فرق ID و Class را به درستی متوجه نشدم میشه بیشتر توضیح بدید؟یعنی فقط یک بار میشه از ID‌ استفاده کرد؟ اگه بیشتر استفاده کنیم چه اتفاقی میفته؟


    1393/05/29 16:31:38

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )