هیچ محصولی در سبد خرید نیست.
مدرس دوره
نبی عبدی
زمان ویدیو
13:57 دقیقه
برو به دیگر جلسات
برای دانلود ویدیو
آموزش class و id در css | انتخابگرها در CSS
با یکی دیگر از سری جلسات رایگان آموزش html و css در خدمت شما همراهان گرانقدر آکادمی وبکیما هستیم، اگر جلسات آموزش html و css را تا به اینجا به صورت عملی دنبال کرده باشید، تقریبا با مباحث اولیه زبان‌های HTML و CSS به خوبی آشنا شدید، از این جلسه به بعد که با انتخابگرها در CSS آشنا شوید، کم کم وارد مباحث جذاب HTML و CSS خواهید شد. پس اگر می‌خواهید به صورت کامل با کلاس‌ها و آیدی‌ها در زبان نشانه گذاری CSS آشنا شوید، این جلسه را نیز تا انتها و به صورت عملی دنبال کنید.
راهنمای مطالعه:
انتخاب‌گر یا همان سلکتور ـ Selector چیست؟
همانطور که در جلسات قبل هم گفتیم، زبان HTML و زبان CSS مکمل یکدیگر هستند، ما با استفاده از زبان اچ تی ام ال ساختار اسکلت مانند یک صفحه وب را می‌سازیم و توسط زبان CSS به آن رنگ و لعاب می‌دهیم، حال زمانی که بخواهیم به یکی از تگ‌های html یک سری استایل یا همان کد CSS بدهیم، باید بتوانیم آن را انتخاب کنیم! به عنوان مثال ما چندین تگ h1 در یک صفحه وب داریم، اما می‌خواهیم فقط به اولین تگ h1 یک فونت سایز بزرگتر نسبت بدهیم، چگونه باید این کار را انجام دهیم؟ اینجاست که انتخابگرها یا همان Selectors در زبان CSS به کمک ما می‌آیند.
انتخاب با استفاده از نام تگ‌ها
اگر بخواهید به تمامی تگ‌ها که از یک خانواده هستند استایل بدهید، می‌توانید از این انتخاب‌گر استفاده کنید، به عنوان مثال زمانی‌که بخواهیم به تمامی تگ‌های پاراگراف یا همان تگ‌های p یک سایز فونت خاص بدهیم، می‌توانیم نام تگ را به عنوان سلکتور انتخاب کنیم، مثال زیر را در نظر بگیرید:
p{
font-size: 14px;
}با نوشتن قطعه کد بالا، تمامی تگ‌های p در صفحه وب مورد نظر سایز فونت 14px را می‌گیرند، اما اگر بخواهید برخی از تگ‌های p سایز فونت‌شان با برخی دیگر متفاوت باشد، دیگر نمی‌توانید از این روش استفاده کنید.
انتخاب با استفاده از id
شما می‌توانید به هر کدام از تگ‌های html یک صفت id بدهید تا آن تگ را منحصر به فرد کنید، در واقع زمانی که به یکی از تگ‌های html یک آیدی می‌دهید، می‌توانید با استفاده از همان آیدی آن را در فایل استایل فراخوانی کنید و یک کد استایل را به آن آیدی خاص اختصاص بدهید، به مثال زیر دقت کنید:
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p id="firstname">My name is Nabi.</p>
</body>
</html>همانطور که در مثال بالا مشاهده می‌کنید، به تگ p یک شناسه یا همان آیدی با مقدار firstname نسبت داده شده است که در کدهای استایل برای انتخاب این آیدی از کاراکتر # استفاده شده است، توجه داشته باشید که فقط زمانی که # قبل از id قرار گیرد مرورگر متوجه می‌شود که باید کدام تگ را انتخاب کند.
نکته مهم: دقت کنید که هر id در صفحه وب باید منحصر به فرد باشد، یعنی شما از هر آیدی فقط یک بار می‌توانید در یک صفحه وب استفاده کنید و اگر یک آیدی را به دو یا بیشتر از دو تگ بدهید، در واقع کار اشتباهی انجام داده‌اید.
انتخاب با استفاده از class
همانطور که می‌توانید به هر تگ یک ایدی منحصر به فرد بدهید، می‌توانید به تگ‌ها در html صفت class بدهید، در واقع هر زمان که نیاز داشتید به یک سری تگ در html یک سری کدهای استایل نسبت بدهید، می‌توانید از صفت class استفاده کنید، به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p>My name is Nabi.</p>
<p>I live in Tehran.</p>
</div>
<p>Webkima Academy.</p>
<p class="intro">I Love My Job!</p>
</body>
</html>همانطور که در مثال بالا مشاهده می‌کنید، ما به تگ‌های مختلفی کلاس intro دادیم، و در بخش استایل‌ها مشخص کردیم که هر تگی که کلاس intro داشت پس زمینه آن زرد رنگ باشد. پس دیدید که class ها مثل id ها نیازی به منحصر به فرد بودن ندارند و شما می‌توانید از یک کلاس در هر تعداد تگ که نیاز داشتید استفاده کنید.
نکته مهم: برای انتخاب idها در کدهای css باید قبل از آیدی یک کاراکتر # قرار دهید، همچنین برای انتخاب classها در کدهای css باید قبل از کلاس یک نقطه {.} قرار دهید.
آیا می‌توان به یک تگ بیشتر از یک id یا class داد؟
بله! شما می‌توانید همزمان به یک تگ در html هم آیدی بدهید و هم چندین کلاس بدهید، در واقع طراحان سایت حرفه‌ای دقیقا به همین صورت عمل می‌کنند! به عنوان مثال یک کلاس می‌سازند که فقط مخصوص سایز فونت 14px است، و هر جا که نیاز به سایز فونت 14px داشتند از آن استفاده می‌کنند! یا یک کلاس می‌سازند برای رنگ آبی! و هر جا که نیاز به رنگ آبی و فونت سایز 14 داشتند از این دو کلاس همزمان استفاده می‌کنند! جالب است این طور نیست؟!
انتخاب همزمان چند کلاس و آیدی در CSS
شما می‌توانید با استفاده از قرار دادن ویرگول در بین کلاس‌ها و آیدی ها به صورت همزمان چند class و id را انتخاب کنید و یک سری کد css به آنها نسبت دهید، به مثال زیر توجه کنید:
.class-1, .class-2 , #my-1 , p {
font-size: 15px;
}در مثال بالا می‌توانید مشاهده کنید که به صورت همزمان دو کلاس class-1 و class-2 و یک آیدی my-1 و یک تگ p را انتخاب کردیم و به همگی این انتخابگرها فونت سایز 15 پیکسل داده‌ایم.
انتخاب تمامی المان‌های صفحه
بله درست شنیدید! اگر می‌خواهید تمامی عناصر موجود در صفحه وب را به صورت یکجا انتخاب کنید و به همه عناصر یک سری کد استایل بدهید، می‌توانید از کاراکتر * استفاده کنید، به مثال زیر توجه کنید:
* {
font-size: 14px;
}با قرار دادن قطعه کد بالا در پروژه خود به تمامی تگ‌ها در صفحه وب خود فونت سایز 14 پیکسل داده‌اید! جالب است نه؟! در دوره پیشرفته آموزش HTML و CSS از کاراکتر * استفاده‌های بهینه‌تری خواهیم کرد!
آیا انتخابگرها فقط همین‌ها بودند؟
خیر! ما در این جلسه سعی کردیم مهمترین انتخابگرها را برای شما عزیزان بررسی کنیم، اما همچنان در برخی از شرایط خاص ممکن است که با هیچ یک از این انتخاب‌گر ها کار شما به درستی انجام نشود! در آن شرایط خاص می‌توانید از یک سری انتخاب‌گرهای خاص استفاده کنید که البته این موارد را به صورت کامل در دوره پیشرفته آموزش HTML و CSS به صورت پروژه محور آموزش داده‌ایم.
جمع بندی
در انتها امیدواریم که آموزش class و id در css و آموزش کار با انتخابگرها در CSS برای شما مفید و جذاب بوده باشد، هر سوالی در رابطه با این جلسه دارید فقط کافیست سوال خود را با جزئیات در بخش نظرات همین جلسه مطرح کنید تا تیم پشتیبانی وبکیما در سریع‌ترین زمان ممکن پاسخگوی شما همراهان عزیز باشند، با تشکر از همراهی شما.