آموزش رایگان CSS- جلسه 5

در پنج جلسه ی گذشته با مفهوم CSS, ایجاد فایل CSS, انتقال فایل های CSS به HTML و کامنت گذاری در CSS و سینتکس آشنا شدیم.در این جلسه قصد داریم شما را با مفهوم selector یا انتخابگرها در CSS آشنا کنیم و این که اصلا چه نیازی به وجود یک انتخابگر است؟ پس با ما تا پایان این جلسه همراه باشید.

انتخابگرها در CSS

در درجه ی اول باید با مفهوم انتخابگر آشنا شویم و اینکه چه کاربردی در زبان CSS دارد؟

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

خب حالا سوال اینجاست که چطور باید عنصر مورد نظر را انتخاب کرد؟؟

برای انتخاب عنصر مورد نظر باید از انتخابگرها استفاده کنیم. بذارید با یک مثال ساده این موضوع را بیان کنیم.
در زبان CSS می خواهیم بگوییم که بینی علی زیباست!!! پس جمله ای که قراره بنویسیم چیه؛
علی بینی زیبایی دارد. طبق حالت کلی که از CSS می دانیم این جمله را به صورت زیر می نویسیم؛

Ali { nose: beautiful; }

• طبق چیزهایی که تا به این جا در جلسات CSS یاد گرفتیم, کلمه ی ” nose ” یک ویژگی یا property است که به علی تعلق دارد.
• کلمه ی” beautiful” یک مقدار یا value است که به بینی علی تعلق دارد. این مقدار می تواند زیبا, زشت یا هر چیز دیگر باشد.
• و در نهایت ” Ali ” یک انتخابگر است. در واقع این انتخابگر می گوید که به چه عنصری از صفحه مقدارها و ویژگی های مورد نظر اعمال شود.

مثالی که برایتان مطرح کردیم یک بیان ساده از کارکرد CSS است. دقیقا CSS نیز به همین صورت کار می کند, به همین سادگی🤗

 

 

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

انواع انتخابگرها در CSS

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

•  انتخابگر تگ
•  انتخابگر id
•  انتخابگر class
•  انتخابگر id یا class خاص
•  انتخابگر گروهی
•  انتخابگر کلی

انتخابگر تگ

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

p { color:red; }

مثال هایی که در ادامه مطرح می کنیم نمونه هایی از انتخابگرهای تگ در CSS هستند؛

انتخاب تمامی تگ های a یا لینک ها؛

<style>
a {
backgroung-color : orange;
color : white
}
</style>

انتخاب تمامی تگ های h2؛

<style>
h2{
background: linear-gradient(45deg, #40e6f7, #4d9cff);
color: black;
text-align:center;
}
</style>

انتخاب تگ body در صفحه؛

<style>
body{
text-align:center;
background-color : lightcyan;
direction:rtl;
}
</style>

انتخابگر id

برای این روش لازم است که آی دی تگ مورد نظرمان را به صورت زیر فراخوانی کنیم؛

#id_name { … }

یعنی اول علامت هشتگ قرا می دهیم و بعد نام آی دی مورد نظر را می نویسیم و در ادامه دستورات لازم را برای اعمال تغییرات قرار می دهیم.

مثال اول؛

<style>
#test{
background: lightblue;
border: 2px solid blue; ; /* ایجاد خط دور*/
border-radius: 10px; ; /* گرد کردن گوشه ها */
color: #fff;
}
</style>

 

مثال دوم؛

<style>
#test1{
background: gray;
border: 2px solid black; /* ایجاد خط دور*/
color: #fff;
box-shadow: 0px 0px 10px grey; /* test1 سایه دادن به */
}

#test2{
background-color:green;
color:white;
text-align:center;
}
</style>

انتخابگر class

این انتخابگر نیز مشابه دو انتخابگر دیگر است با این تفاوت که لازم است ابتدا کلاس مورد نظر را مشابه نمونه ی زیر فراخوانی کنیم؛

.class_name { … }

مثال زیر را با دقت بررسی کنید و سعی کنید آن را امتحان کنید؛

<style>
.test{
background: lightblue;
border: 2px solid blue;
border-radius: 10px;
color: #fff;
}
</style>

 

نکته 

انتخابگر تگ با id یا class خاص

یکی از پر استفاده ترین انتخابگرها, انتخابگر تگ با آی دی یا کلاس خاص است. انتخابگر تگ با آی دی خاص یعنی ما فقط می خواهیم تغییرات را روی تگ که یک آی دی خاص دارد اعمال کنیم و نه روی تمامی تگ ها.

شکل کلی انتخابگر تگ با آی دی خاص به صورت زیر است؛

Tag_name#id_name { … }

اول اسم تگ مورد نظر قرار می گیرد و سپس نام آی دی مورد نظر. این دو نام با یک علامت # از هم جدا می شوند و بعد تغییرات مورد نظر قرار داده میشود.

<style>
h2#test{
background-color:blue;
color:white;
text-align:center;
}
</style>

برای انتخابگر تگ با class خاص از فرمول کلی زیر استفاده می شود؛

 

Tag_name.Class_name { … }

مثالی برای این انتخابگر را در زیر مشاهده می کنید؛

<style>
h2.test{
background-color:orange;
color:white;
text-align:center;
}
</style>

 

انتخابگر گروهی

همانطور که از اسم این انتخابگر مشخص است برای اعمال تغییرات گروهی از تگ ها انتخاب می شوند و در نهایت تغییرات روی همه ی آنها اعمال میشود؛

مثالی از تگ های گروهی بدون کلاس و آی دی خاص؛

<style>
p , h2 , h3 , a , span , strong{
background-color: green;
color: black;
font-size:18px;
}
</style>

مثالی از تگ های گروهی با آی دی و کلاس خاص؛

 

<style>
a.test , h2#test {
background-color : #a44caf;
color : white;
font-size:16px;
}
</style>

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

<h2 id=”test” > my title </h2>
<style>
h2#test {
background-color : #a44caf;
color : white;
font-size:16px;
}
</style>

 

ولی اگر بخواهیم از آی دی یا کلاسی استفاده کنیم که در تگ دیگری قرار دارد با قرار دادن یک فاصله آن را می نویسیم مانند نمونه ی زیر؛

<h2>
<span class=”test1”> my title </span>
</h2>
<style>
h2 .test1 {
background-color : #a44caf;
color : white;
font-size:16px;
}
</style>

 

انتخابگر کلی

این انتخابگر تمامی تگ های موجود در یک صفحه را انتخاب می کند و تغییرات مورد نظر را وی آن اعمال خواهد کرد؛

<style>
*{
margin : 5px ; /*ایجاد فاصله از اطراف عنصر*/
text-align : center;
color : #3c3c3c ;
}
</style>

 

اگر مشتاق یادگیری HTML هستید به راحتی میتوانید به تمامی جلسات آموزش HTML  از طریق لینک قرار داده شده دسترسی داشته باشید.

در پایان

در این جلسه به طور کامل در مورد انتخابگر ها صحبت کردیم و مثال های کاملی از هر کدام از انواع آن نیز برای شما بیان کردیم. البته انواع دیگری از انتخابگرها نیز وجود دارند که در حوصله ی این جلسه نیست و شاید در جلسات آینده در مورد آنها بیشتر گفتیم.

در واقع انتخابگرها طیف گسترده ای دارند و در نسخه های آینده ی CSS شاید این گستردگی بیشتر هم شود.