آموزش css – درس چهاردهم – گروه بندی انتخابگرها

طراحی سایت » آموزش CSS » آموزش css – درس چهاردهم – گروه بندی انتخابگرها
۳ اسفند ۱۳۹۷ چاپ

نقشه راه یادگیری دوره آموزشی CSS

در دوره مقدماتی آموزش CSS که مشتمل بر 13 درس بود، مقدمات کلی CSS را بیان کردیم و دانستید که چطور میتوان از css در طراحی صفحات وب استفاده کرد. نحوه ی ساختن و بکار گرفتن کلاسها و ID ها را یاد گرفتید و همچنین با مشخه ها و صفت های زیادی آشنا شدید که به طور کلی دوره مقدماتی را میتوان در لیست زیر خلاصه کرد:

  • تصاویر زمینه
  • قالب بندی متون و فونتها
  • قالب بندی لینک ها
  • کنترل نحوه نمایش لیست ها
  • استایل بندی جداول
  • نحوه اختصاص خطوط مرزی و کنترل نمایش آنها
  • آشنایی با margin و padding و تفاوت میان آنها

و چندین مورد دیگر.
دوره پیشرفته ی css نیز شامل 8 درس است که در ادامه ی دوره قبلی بیان خواهد شد (از جلسه چهاردهم تا جلسه بیست و یک) و با یادگیری این 21 درس به سادگی میتوانید بر تمام مواردی که مربوط به css میشوند مسلط شوید.

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

گروه بندی و خلاصه کردن انتخابگرها

هنگامی که بر روی یک پروژه کار میکنید انتخابگرهای زیادی را مورد استفاده قرار خواهید داد که بسیاری از این انتخابگرها دارای مقادیر یکسانی هستند. به مثال زیر دقت کنید:

H1{color:#000;}
H2{color:#000;}
P{color:#000;}

در مثال بالا تمامی تیترهای رده اول و دوم و پاراگرافها به رنگ مشکلی نمایش داده خواهند شد ولی تمام موارد دارای مقادیر یکسانی هستند. با این حساب مقدار color:#000 برای 3 بار تکرار شده است که 2 بار آن بیهوده میباشد و باعث افزایش تعداد سطرهای فایل css و متعاقب آن افزایش حجم فایل خواهد شد.

برای بهینه سازی فایلهای css تاجای ممکن باید حجم آنها را کم کنیم و یکی از این روشها گروه بندی انتخابگرهایی است که مقادیر یکسان دارند. در مثال فوق سه انتخابگر H1, H2 و P دارای مقادیر یکسانی هستند.

برای اینکه بتوانیم انتخابگرها را در یک گروه قرار دهیم از علامت کاما ” , ” استفاده میکنیم. به مثال زیر دقت کنید:

H1, H2, P {
color: #000;
}

همانطور که ملاحظه میکنید با گروه بندی انتخابگرها توانستیم 3 سطر را به یک سطر تبدیل کنیم.

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

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

<p> این یک پاراگراف است. </p>
<p class="red"> این یک پاراگراف است که کلاسی را دریافت کرده. </p>
<a class="red" href="#"> این یک لینک است </a>
<div class="green">
<p> این یک پاراگراف است که درون یک جعبه قرار گرفته است. </p>
</div>

در مثال فوق ما 3 پاراگراف و یک لینک داریم.

پاراگراف نخست، یک پاراگراف معمولی است. پاراگراف دوم و لینک دارای کلاسی با نام red هستند و پاراگراف سوم درون جعبه ای (Div) قرار گرفته است که این جعبه دارای کلاس green میباشد. حال فرض کنید در فایل css اینچنین داریم:

P { color: #000;}
با اعمال استایل فوق تمامی پاراگرافهایی که در مثال بالا گفته ایم به رنگ مشکی نمایش داده خواهند شد.

همانطور که گفتیم پاراگراف دوم و لینک، دارای کلاس red هستند. اگر کلاس red را در css تعریف کنیم، هم پاراگراف (p) و هم لینک (a) که دارای کلاس red هستند به رنگ قرمز نمایش داده خواهند شد. پس کلاس .red تمام عناصری را که دارای class=red باشند را تحت تاثیر قرار میدهد.

.red { color :#f00; }
اگر بخواهیم پاراگرافی که دارای کلاس red است به صورت توپر (bold) نمایش داده شود ولی لینک ما تحت تاثیر قرار نگیرد چکار باید بکنیم؟
بسیار ساده است، در اینجا از قابلیت تودرتو کردن انتخابگرها استفاده میکنیم. به مثال زیر توجه کنید:

.red { color: #f00; }
p.red { font-weight: bold; }
در مثال بالا، ابتدا تمام عناصری که دارای کلاس red بودند را به رنگ قرمز تغییر دادیم ولی در سطر دوم تنها پاراگرافهایی ( تگهای p ) که دارای کلاس red بودند را مورد هدف قرار دادیم.

پاراگراف سوم ما دارای هیچ کلاسی نیست ولی درون یک جعبه یا div قرار گرفته است که این div دارای کلاسی با نام green است. در اینجا نیز برای تغییر حالت و استایل بندی پاراگراف سوم می بایست از ویژگی انتخابگرهای تودرتو استفاده کنیم ولی با شیوه ای متفاوت از مثال قبل:

.green p { color: #0f0; }

در مثال فوق تمام پاراگرافهایی (تگهای p) که درون جعبه ای با مقدار class=green قرار گرفته اند مورد هدف هستند. ( پاراگراف سوم ما درون یک جعبه است که دارای کلاس green است. )

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

گفتگو پیرامون آموزش css – درس چهاردهم – گروه بندی انتخابگرها

(منتشر شده: 3 | در انتظار تایید: 0)
faride

با سلام و خسته نباشيد ميشه بگيد چند درس ديگه هنوز هست؟ و يه پيشنهاد شما که اينقدر زحمت کشيدين چرا فايل pdf که سر جمع کل مطالب است رو روی سايت نميزارين؟

پاسخ دهید
عصرعلم

در پاسخ به faride

سلام
آموزش css جمعا ۲۱ درست هستش که ۷ درس باقی مانده است و هر ۵ روز یک درس در سایت منتشر خواهد شد. (درس چهاردهم در تاریخ ۲ فروردین، درس پانزدهم در تاریخ ۷ فروردین، درس شانزدهم در تاریخ ۱۲ فروردین و … و نمایش همه درسها در ساعت ۱ ظهر (۱۳:۰۰) زمانبندی شده اند.
دلیل اینکه به صورت درس به درس در سایت مطالب رو منتشر میکنیم این هست که دوستان بتونند سوالات مربوط به هر بخش که براشون ایجاد شده در بخش مربوطه مطرح کنند. برای ما هم ساده تر هست که کل مطالب رو یکجا ارائه بدیم ولی در اون صورت امکان رفع اشکال وجود نخواهد داشت برای همین ترجیح دادیم به صورت درس به درس پیش بریم.
نسخه ی pdf هم در دست ساخت هست و تنها طراحی جلد و فهرست بندی اش باقی مانده و بعد از اینکه سری آموزشی تکمیل شد (در تاریخ ۶ اردیبهشت ۱۳۹۲ ساعت ۱۳:۰۰) نسخه ی PDF هم در بخش محصولات عصرعلم قرار خواهد گرفت.

پاسخ دهید
siavash-k

بسیار عالی

پاسخ دهید

فقط گزینه‌ی وسط را تیک بزنید. »مشاهده قوانین