آموزش برنامه نویسی

آشنایی با 6 نوع از selector در CSS

 selector در CSS چیست؟

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

این نوعی تماس است. یعنی مجموعه ای از ویژگی های یک عنصر را در پرونده css مشخص می کنید.

به عنوان مثال ، اگر متن باشد ، چه رنگی باید باشد. چه فونت دارد. اندازه قلم این متن چیست و ..

یا در مثال دیگر ، اگر ویژگی هایی راجع به یک عکس مشخص کنید ،

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

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

در ادامه با سئو شو همراه باشید.

 selector در CSS چیست؟
selector در CSS چیست؟

منطق کدهای CSS

selector در CSS | قبل از هرچیزی، باید منطق استفاده از دستورات CSS رو متوجه بشیم. منطقش بسیار سادست. با یک سوال بیاین شروع کنیم:

چطور یک انسان رو توصیف می‌کنیم؟

خب مثلا یک دوستی مثل بهرام، بینی قشنگی داره! چطور این موضوع رو توصیف می‌کنیم؟ مسلما با جمله ی زیر:

بهرام، بینی قشنگی داره

طبق فرم کلی‌ای که برای ساختار کدهای CSS گفته شد، می‌تونیم جمله ی بالا رو به این فرم بنویسیم:

Bahram{ nose: beautiful; }

در اینجا، کلمه “Bahram” یک انتخابگر یا selector هست. چون میگه ویژگی ها متعلق به چه کسی یا چیزی هستن.

کلمه “nose” یک ویژگی یا property از بهرام هست. یعنی شکل بینی بهرام.

و در نهایت کلمه “beautiful” یک مقدار یا value برای بینی بهرام هست. مقداری که میتونه کلمات زیبا، نازیبا و غیره رو در به داشته باشه.

در CSS هم دقیقا با اینطور منطقی، چه بسا ساده تر، سر و کار داریم! مراحل کار به شکل زیره:

  1. یک عنصر از صفحه رو انتخاب کن.
  2. ویژگی عنصر رو (قیافه اون رو! ) با مقادیر مختلف تغییر بده.

مرحله اول با استفاده از انتخابگر ها انجام می‌گیره. برای مثال، در کد زیر، ما عناصر h1 رو در صفحه انتخاب می‌کنیم و چهره مورد نظرمون رو در {…} وارد می‌کنیم. عنصر متناسب با اطلاعات نوشته شده توسط ما، تغییر می‌کنه.

h1{ … }

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

 selector در CSS چیست؟
selector در CSS چیست؟

ویژگی ها و چهره ی یک عنصر

selector در CSS | حالا میون {…} چی باید قرار بدیم؟ چطور چهره ی عنصر رو مشخص کنیم؟ بسیار سادست، ما در CSS ویژگی ها و به تناسب با اون ویژگی ها، مقادیر مختلفی داریم. برای مثال، میخوایم رنگ عنصر h1 که انتخاب کردیم، قرمز باشه:

h1 { color : red ; }

این کد بیان می­کنه، رنگ تمام متن­هایی که داخلh1ها هستن، به رنگ قرمز تغییر کنه.

حالا سه نکته رو با هم بررسی کنیم:

۱. ما می­‌تونیم به هرتعداد که می­خوایم، به انتخابگر ویژگی اختصاص بدیم:

h1 { color: red ; font-size: 10px ; text-align: center ; }

۲. عموما برای راحتی کدنویسی، بهتر هست که کدها رو در خطوط جداگانه بنویسیم، یعنی:

h1{
color: red;
font-size: 10px;
text-align: center;
}

۳. یک عنصر، نمی­تونه ویژگی تکراری داشته باشه، برای مثال، کد زیر اشتباهه:

div { color: blue; color: black; }

حالا چند مثال رو با هم بررسی کنیم:

p {
color: black;
background-color: blue;
}

تمام پاراگراف ­ها در صفحه، به رنگ مشکی ظاهر بشن و رنگ پس‌­زمینه اون ­ها، آبی باشه.

span {
font-family: IranSansWeb;
opacity: 0.8;
}

عناصر span در صفحه، دارای فونت IranSansWeb و شفافیت 0.8 باشند.

 

 selector در CSS چیست؟
selector در CSS چیست؟

انواع selector در CSS

selector در CSS | ذر زیر انواع سکتور ها در سی اس اس را مرور میکنیم.

  • عناصر
  • کلاس ها
  • آیدی ها
  • انتخابگر کلی
  • انتخاب‌کننده‌های گروهی ( در جلسات آینده یاد خواهیم گرفت )
  • انتخاب‌کننده‌های پیشرفته ( در جلسات آینده یاد خواهیم گرفت )

عناصر

selector در CSS | تا اینجا یاد گرفتیم که می­‌تونیم نام خود عناصر رو به جای selector یا انتخابگر قرار داده و توسط دستورات اون­‌ها رو تغییر بدیم. مانند:

h1 {
color: red ;
}

که باعث می­شه متن درون عنصر h1 به رنگ قرمز باشه.

بحث جدیدی که در مورد نه تنها عناصر، بلکه به­‌طور کلی در مورد انتخابگر­‌ها باید یاد بگیریم، بحث روابط ” فرزندی و خانوادگی ” هست!

برای یادگیری این بحث، نیازمند تسلط کافی و مناسب در HTML هستیم. همون­طور که می‌­دونیم، کدهای HTML با هم دارای رابطه فرزند و خانواده هستن. نکته این هست:

” اگر به عنصری،یک سری دستورات CSS اعمال شود، به فرزندان آن عنصر هم همان دستورات CSS اعمال می­‌شود “

کد زیر رو در نظر بگیرید.

 

seosho css

 

seosho html

 

seosho javascript

 


همونطور که مشاهده می­شه، عناصر p، فرزند عنصر div به حساب میان. فرض کنیم کد CSS ما به شکل زیر باشه:

div {
color: blue;
}

نتیجه به فرم زیر خواهد بود:

از تکنیک فرزند خانواده در CSS، در آینده به وفور استفاده می‌کنید.

حالا سوالی که پیش میاد این هست: اگه ما ۵ پاراگراف داشته باشیم و فقط بخوایم به پاراگراف اول و سوم، رنگ قرمز رو اضافه کنیم، از چه کدی باید استفاده کنیم؟

این مشکل، با کلاس‌­ها رفع می­شه!

 selector در CSS چیست؟
selector در CSS چیست؟

کلاس ها

selector در CSS |کلاس­ ها زمانی به کار میرن که بخوایم به عناصر معدودی، دستورات CSS رو مرتبط کنیم. روش استفاده از کلاس ها به ترتیب زیر هست:

  • در فایل HTML یک کلاس با نام دلخواه، برای عناصر موردنظر، تعریف می­‌کنیم. (برای اطلاعات بیشتر در رابطه با کلاس ها می توانید مقاله آشنایی با class ها سئو شو را بخوانید.)
  • در فایل CSS، قبل از نام کلاس یک نقطه ” . ” گذاشته و خصوصیات رو برای اون می­‌نویسیم.
یک مثال
کد در فایل HTML

class=”class-name”> seosho css classes


کد در فایل CSS
.class-name{
color: yellow;
}

خصوصیات ذکر شده در کد CSS تنها به عناصری اعمال می­‌شن که کلاس “class-name” رو دارا هستن.

یه مثال دیگه
فایل HTML

  • class=”special”>Link1
  • Link2
  • class=”special”>Link3
  • Link4
  • class=”special”>Link5
فایل CSS
.special {
background-color: yellow ;
}

 

آیدی­ ها

selector در CSS | نحوه­‌ی استفاده از آیدی­‌ها در HTML و CSS به فرم زیر هست:

  • در فایل HTML، برای عنصر موردنظر یک آیدی دلخواه انتخاب می­ کنیم.
  • در فایل CSS، قبل از نام آیدی، هشتگ ( # ) قرار داده و ویژگی­‌ها رو برای عنصر مورد نظر تعریف می­‌کنیم.

مثال:

کد HTML:

seosho Id tutorial


کد CSS:

#id-name{
color: yellow;
}

تقریبا می­شه گفت که آیدی­‌ها شباهت بسیاری به کلاس­‌ها دارن. اما تفاوت­‌های مهمی هم دارن که اون هارو در جلسه آینده بررسی می‌کنیم.

انتخابگر کلی

selector در CSS | انتخابگر کلی، انتخابگری هست که می‌تونه تمام عناصر موجود در صفحه رو با یک ویژگی معین تغییر بده. این انتخابگر با علامت * مشخص می‌شه.

به طور مثال در کد زیر، ما می‌گیم که فونت تمام نوشته های درون صفحه، باید b nazanin باشه:

*{
 font-family: b nazanin;
 
}

جمع بندی

selector در CSS | در این مقاله به صورت کامل با انتخابگر ها آشنا شدیم، در جلسه آینده در رابطه با کلاس ها و آی دی ها و نحوه معرفی آن ها در CSS آشنا خواهید شد.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش سئو شو ارسال کنین.

Understanding CSS selectors. When learning CSS, the selectors that ...

 

نمایش بیشتر

امیرحسین شمس

امیر حسین شمس | هم اکنون در زمینه های مختلفی چون طراحی سایت ، بهینه سازی سایت ، سئو (SEO) ، امنیت سایت ، آموزش طراحی سایت ، دیجیتال مارکتینگ ، سئو و مشاوره‌ کسب و کارهای اینترنتی فعالیت دارم. از سال 1385 تحصیلات خود را در زمینه ی علوم کامپیوتر شروع کرده و دوره های هوش مصنوعی ، شبکه های عصبی ، منطق فازی ، برنامه نویسی دات نت، طراحی سایت ، دیتابیس ، امنیت دیتابیس ، دیجیتال مارکتینگ، ایمیل مارکتینگ و سئو سایت را بصورت تخصصی گذرانده ام.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
× چگونه می‌توانم به شما کمک کنم؟