جلسه ۰۵ – selector در CSS

طراحی سایت

..جلسه ۰۵ – selector در CSS..
طراحی سایت

جلسه ۰۵ – selector در CSS

 

در جلسه­‌ی گذشته، ساختاربندی و اجزای تشکیل­‌دهنده‌­ی کد CSS رو خلاصه وار معرفی کردیم.

در این جلسه، اون­‌ها رو به صورت مفصل بررسی می‌­کنیم و یاد می‌گیریم!

سرفصل‌های پست

منطق کدهای CSS

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

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

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

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

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

Bahram{ nose: beautiful; }

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

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

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

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

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

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

h1{ … }

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

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

حالا میون {…} چی باید قرار بدیم؟ چطور چهره ی عنصر رو مشخص کنیم؟ بسیار سادست، ما در 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 یا انتخابگر قرار داده و توسط دستورات اون­‌ها رو تغییر بدیم. مانند:

h1 { color: red ; }

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

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

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

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

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

<div> <p> mizfa css </p> <p> mizfa html </p> <p> mizfa javascript </p> </div>

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

div { color: blue; }

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

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

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

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

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

کلاس ها

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

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

برای مثال:

کد در فایل HTML

<p class="class-name"> mizfa css classes </p>

کد در فایل CSS

.class-name{ color: yellow; }

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

یه مثال دیگه:

فایل HTML:

<ul> <li class=”special”>Link1 </li> <li>Link2 </li> <li class=”special”>Link3 </li> <li>Link4 </li> <li class=”special”>Link5 </li> </ul>

فایل CSS:

.special { background-color: yellow ; }

نتیجه:

کلاس ها در انتخابگر ها
کلاس ها در انتخابگر ها

آیدی­ ها

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

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

مثال:

کد HTML:

<h1 id=” id-name “>Mizfa Id tutorial</h1>

کد CSS:

#id-name{ color: yellow; }

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

انتخابگر کلی

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

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

*{  font-family: b nazanin;   } 

جمع بندی

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

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

مدیر محتوا: علی اسمعیلی

20
17 مهر 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

6368
24 فروردین 1398
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

608
08 اسفند 1397
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

537
04 دی 1397