آموزش selector ها در css و معرفی انواع آنها

سلکتورها (selectors) در css چی هستند و به چه دردی میخورند ؟ اصلا سی اس اس در طراحی صفحات وب چه کاربردی داره ؟ یاد گرفنن سی اس اس و سلکتور های css سخته ؟ چه منابعی برای یادگیری css پیشنهاد میکنید ؟ بهترین روش یادگیری سی اس اس چیه ؟ اینها فقط یک سری سوال هستند که ممکنه در ذهن شما وبمستران عزیز وجود داشته باشند . در این مقاله ما سعی کرده ایم بیشتر سوالات مبهمی رو که ممکنه در ذهن شما وجود داشته باشه رو جواب بدیم.

برای آشنایی بیشتر با سلکتورها در css و استفاده از آنها به شیوه وبمستران حرفه ایی وبسایت  ( +معرفی منبع یادگیری و شیوه یادگیری css ) تا انتهای مقاله با وبیت همراه باشید و اگر سوالی در ذهن تون داشتید در قسمت نظرات ، اون را با ما و دیگر وبمستران وبیت به اشتراک بگذارید .

برای خیلی ها سوال شده بود که چطوری میتونیم المنت های html رو با css دچار تغییر و طراحی های خاص کنیم . شاید حتی در ذهن کسانی که تازه وارد دنیای وب میشوند هم نگنجد که با یک خط کد و لینک دادن میتونیم یک فایل html رو به فایل css (style) متصل کنیم .در هر صورت اینکه چطوری لینک بدیم و چطوری از سلکتور ها استفاده کنیم در طول مقاله ذکر شده است و برای یادگیری بیشتر مارو همراهی کنید .

معرفی زبان نشانه گذاری css و نقش آن در طراحی صفحات وب

( css ) سی اس اس یک زبان نشانه گذاری تحت وب است که به‌وسیله کدهای آن می‌توانیم به عناصر HTML استایل و ساختار خاص بدهیم . css هم مثل HTML یک زبان نشانه‌گذاری وب است و استایل صفحات html را مشخص می‌کند؛ درواقع این دو زبان مکمل یکدیگر نیز هستند. برای طراحی صفحات وب این دو به هم دیگر نیاز دارند . (حتی اگر از فریم ورک هایی مانند بوت استرپ استفاده کنید). css مخفف Cascading Style Sheets می‌باشد. در این اصطلاح، علت استفاده از کلمه Cascading (آبشاری) این است که دستورات به‌صورت خطی و به ترتیب خوانده می‌شوند.

آموزش اتصال فایل style (css) به فایل html

برای اتصال خارجی سی اس اس در html کافیه کد زیر را در بین تگ head قرار دهید . حالا در قسمت href  باید محل فایل سی اس اس رو قرار بدید .

<link rel="stylesheet"   href="...">

دو منبع فوق العاده برای یادگیری css

شاید اکثر شما به دنبال منابع فارسی زبان باشید ، اما یک حقیقت در دنیای مجازی اینه که برای یادگیری هر چیزی  بهتره که از زبان انگلیسی استفاده کنیم . Codecademy , w3schools دو نمونه از سایت هایی هستند که به صورت کاملا حرفه ایی میتونید html و css رو آموزش ببینید . (برای همه زبان ها این صدق نمیکند ، چراکه با یادگیری زبانی مانند php از این سایت ها حرفه ایی نمیشوید )

آشنایی با selector ها در css

بطور کلی (selectors) یا انتخابگر به این معنیست که انتخاب کن از صفحه وب من فلان تگ رو سپس یکسری ویژگی هارو توسط دستورات css اعمال کن . کاربرد مهم سلکتورها برای اینه که بتونیم تگ به تگ (عنصر به عنصر) رو در html با css رنگارنگ و دچار دگرگونی کنیم . مانند یک واسطه که باعث میشه ما بتونیم ویژگی هایی که دوست داریم رو به تگ های منحصربه فرد html بدهیم . حالا بریم و با انواع این سلکتورها آشنا بشیم .

انواع سلکتورها (selectors) :

انتخابگر عنصر (تگ) :

در این روش کافیه ما فقط اسم تگ رو بنویسیم. به همین سادگی! یعنی اگه من بخوام رنگ متن پاراگراف های موجود در صفحه رو قرمز کنم کافیه از تیکه کد زیر استفاده کنم :

p { color : red ; }

انتخابگر آیدی ( ID #) :

میدونیم که id یکی از attribute های تگ html هست . به این معنا که میتونیم به صورت زیر برای تگ p (پاراگراف ) یک آیدی منحصربه فرد در نظر بگیریم . نکته قابل توجه اینه که آیدی تگ های اچ تی ام ال مانند اثرانگشت انسان هستند و هر تگ باید یک آیدی منحصر به فرد داشته باشد در غیر این صورت دور از استاندارد هاست . به کد های زیر توجه کنید :

html

<section id="vebeet"> 
     <span>وبیت بهترین مرجع وبمستران <span>
</section >

css

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

انتخابگر کلاس (class) :

دقیقا مانند آیدی است با این تفاوت که میتوانیم از یک کلاس برای هزاران تگ استفاده کنیم و منحصربه فرد نیست ! یعنی هر چندتا تگ که لازم باشه میتوانند یک کلاس مشخص و ویژگی های مشابه داشته باشند .

html 

<section>
  <p class="class_vebeet" > وبیت</p>
  <p class="class_vebeet" > وبمستران وبیت</p>
  <p class="class_vebeet" > مقالات حرفه ایی</p>
  <p class="class_vebeet" >قالب و افزونه </p>
  <span class="class_vebeet" > فیلم و موسیقی</span>
</section>

css

.class_vebeet {
  text-align: center;
  color: green;
  font-family:vazir;
}

انتخابگرهای گروهی (تگ و کلاس و آیدی) :

خب پرکاربردترین سلکتورهارو (selectors) با هم بررسی کردیم فقط میرسیم به یک مدل دیگه که بعضی جاها کار رو واقعا ساده میکنه و به راحتی میتونیم با استفاده از این روش از تکرار کد ها جلوگیری کنیم. به تیکه کد زیر توجه کنید :

h1, p , .class_vebeet , #vebeet {
  text-align: center;
  color: blue;
}