آموزش برنامه نویسی و مهارتهای وب
شنبه ۱۱ آذر ۱۴۰۲
Saturday, December 2, 2023 GMT +3:30
Saturday, December 2, 2023 GMT +3:30
سلکتور آی دی (ID) و کلاس (Class) در CSS
در آموزش قبل اشاره شد که CSS به خودی خود کاربرد خاصی ندارد و در کنار تگ های HTML است که معنی و کاربرد پیدا می کند، در واقع CSS صرفا برای تعریف استایل تگ های مختلف HTML به وجود آمده است، اما CSS چگونه این تگ ها را در صفحات وب شناسایی می کند؟ به طور مثال اگر بخواهیم از بین دهها تگ div موجود در صفحه div مربوط به یک مطلب مشخص را استایل دهی کنیم، CSS چه راه حلی برای این موضوع در نظر گرفته است؟ پاسخ این نوع سوالات عبارت سلکتور (Selector) است، سلکتور راهکاری در CSS است که با آن عنصر هدف در HTML برای استایل دهی مشخص می شود، تعداد سلکتورها نسبتا زیاد است، در این آموزش به دو مورد از مهم ترین و پرکاربردترین ها یعنی آی دی (ID) و کلاس (Class) خواهیم پرداخت که درک و تسلط بر نحوه کاربرد آنها در روند فراگیری CSS اهمیت زیادی دارد، در کنار این دو سلکتور پر کاربرد گذری خواهیم داشت بر مبحث قانون اولویت بندی سلکتورها در CSS که درک آن نیز برای مراحل بعدی و آموزش های پیشرفته تر ضرورت دارد.
معنی سلکتور (Selector) در CSS
همان طور که گفتیم سلکتور (Selector) در واقع راهکاری در CSS است که با آن عنصر هدف در HTML برای استایل دهی مشخص می شود، سلکتورها الگوهای تعریف شده (Pattern) در CSS هستند که با آنها عنصر یا عناصری که می خواهیم استایل بر آنها تاثیر داشته باشد را انتخاب (Select) می کنیم لذا می توانیم در ترجمه تحت الفظی این عبارت به آن انتخابگر نیز بگوییم، برای مثال سلکتور p در CSS استایل را به تمام تگ های p موجود در کدنویسی HTML صفحه نسبت می دهد یا به عبارتی دیگر تمام تگ های p در صفحه را جهت اعمال استایل CSS مد نظر انتخاب می کند:
<style type="text/css">
p {
font-size:16px;
color:#818181;
}
</style>
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>
<p>پاراگراف سوم</p><style type="text/css">
.color-text {
font-size:16px;
color:#818181;
}
</style>
<p>پاراگراف اول</p>
<p class="color-text">پاراگراف دوم</p>
<p>پاراگراف سوم</p>نحوه تعریف آی دی (ID) و کلاس (Class) در CSS
گفتیم که سلکتورها الگوهای تعریف شده (Pattern) در CSS هستند، منظور از این عبارت قراردادی بودن نحوه تعریف سلکتورها در CSS با قواعد خاص خود است، آی دی (ID) و کلاس (Class) جزء پرکاربردترین سلکتورها هستند که بر اساس قانون الگو با علائم خاصی در کدهای CSS تعریف می شوند، برای تعریف آی دی از علامت # و برای کلاس از علامت نقطه در ابتدای الگو استفاده می کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | آی دی و کلاس در CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
#main{
display:block;
background-color:#069;
}
.text{
color:#FFF;
}
</style>
</head>
<body>
<div id="main" class="text">
این یک متن در آی دی main و کلاس text است.
</div>
</body>
</html>همان طور که در کد بالا مشخص است یک تگ HTML می تواند از چند سلکتور مختلف در CSS استایل دهی شود، در اینجا برخی خصوصیات تگ div از سلکتور آی دی و برخی موارد دیگر از سلکتور کلاس به آن نسبت داده شده اند.
کجا از آی دی (ID) و کی از کلاس (Class) استفاده کنیم؟
شاید با دیدن و بررسی این نمونه کدها این سوال به ذهنمان خطور کند که کجا باید از آی دی (ID) و کی از کلاس (Class) استفاده کنیم؟ در پاسخ باید گفت که هر سلکتوری در CSS با هدف خاصی ایجاد شده که در ارتباط مستقیم با کدنویسی HTML است، در HTML برای شناسایی تگ های مختلف از هم از ID استفاده می شود، به طور مثال:
<div id="id-1"></div>
<div id="id-2"></div>
<div id="id-3"></div><div id="id-1" class="class-1"></div>
<div id="id-2" class="class-1"></div>
<div id="id-3" class="class-1"></div>تعریف ویژگی، بدون آی دی و کلاس در CSS
علاوه بر کلاس و آی دی، برخی از موارد در CSS به صورت سلکتورهای کلی قابل تعریف شدن هستند، به طور مثال سلکتور body استایل خود را در حالت پیش فرض به تگ body و زیر مجموعه آن اختصاص می دهد یا سلکتور p به تمام عناصر پاراگرافی (تگ های p) موجود در صفحه وب استایل خود را اختصاص می دهد:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استایل دهی بدون آی دی و کلاس</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
p,div{
border:#CCC 1px solid;
padding:4px;
color:#000;
}
#main{
display:block;
background-color:#069;
}
.text{
color:#FFF;
}
</style>
</head>
<body>
<div id="main">
<p class="text">
این یک متن در آی دی main و کلاس text است، برخی ویژگی های کلی از سلکتور div و p تاثیر می پذیرند.
</p>
</div>
</body>
</html>در مثال بالا علاوه بر استفاده از آی دی main و کلاس text به عنوان سلکتورهای اصلی، به صورت کلی نیز استایلی را برای تگ های div و p موجود در صفحه اختصاص داده ایم، با این کار تمام عناصر پاراگراف و بلاک های div آن ویژگی را خواهند داشت، دقت کنیم که در CSS قوانینی برای اولویت بندی سلکتورها وجود دارد، به طور مثال اگر دو ویژگی مشترک (به فرض color) هم در سلکتور p و هم در کلاس تعریف شده باشند، CSS اولویت را به کلاس می دهد و color موجود در سلکتور p را که به صورت کلی تعریف شده نادیده می گیرد، در نمونه کد بالا color برای سلکتور p به صورت مقدار کد هگز 000 (رنگ مشکی) در نظر گرفته شده، اما در کلاس text این مقدار FFF (رنگ سفید) است، در نتیجه رنگ متن تگ های p که کلاس text داشته باشند سفید خواهد بود، برای آشنایی بیشتر با این موضوع در ادامه به طور مختصر به مسئله قانون اولویت بندی سلکتورها در CSS می پردازیم.
قانون اولویت بندی سلکتورها در CSS
در آموزش قبل در خصوص عبارت Cascading یا آبشاری بودن CSS توضیحاتی ارائه شد، گفتیم که منظور از این عبارت پیروی سلسه مراتبی مرورگر از استایل های CSS موجود در صفحه است، یعنی اگر دو استایل مشترک در صفحه وجود داشته باشند، خاصیتی غالب می شود که در پائین ترین سطح درج شده باشد، به طور مثال در استایل های زیر ویژگی دوم غالب می شود چون در سطح پائین تری در صفحه درج شده:
<style type="text/css">
p.text{
font-size:16px;
}
</style>
<style type="text/css">
p.text{
font-size:12px;
}
</style>
<p class="text">پاراگراف</p><style type="text/css">
p{
font-size:12px;
color:#D3181B;
}
p.text{
font-size:16px;
color:#1740DD;
}
</style>
<p>پاراگراف اول</p>
<p class="text">پاراگراف دوم</p>بر اساس قانون اولویت، هر سلکتور CSS را می توان در چهار رده
A, B, C, D1, 0, 0, 00, 1, 0, 00, 0, 1, 00, 0, 0, 1A - Inline Style => 1000 => <div style=""></div>
B - ID => 0100 => <style type="text/css">#your-id {}</style>
C - Class => 0010 => <style type="text/css">.your-class {}</style>
D - Element => 0001 => <style type="text/css">div {}</style><style type="text/css">
p{
font-size:12px;
color:#D3181B;
}
</style>
<p style="font-size:24px;">پاراگراف</p>1, 0, 0, 00, 0, 0, 1<style type="text/css">
div p.text{
font-size:16px;
text-decoration:underline;
}
#main p{
font-size: 12px;
text-decoration:overline;
}
</style>
<div id="main">
<p class="text">پاراگراف</p>
</div>0, 1, 0, 10, 0, 1, 2با فهم این الگوها می توانیم درک روشنی از قوانین اولیت بندی در CSS داشته باشیم تا از سردرگمی و تعریف استایل های مبهم اجتناب کنیم.
دسته بندی: آموزش مقدماتی » CSS
مطالب بیشتر:کاربرد ویژگی position و float در CSS
کار با ویژگی margin و padding در CSS
کاربرد خاصیت height و width در CSS
مقدمه ای بر CSS و استایل دهی صفحات وب
ویژگی های Font و Text در CSS
دیدگاه
۵۴ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.بابک خان
۰۹:۵۵ ۱۳۹۵/۱۱/۲۶
اقا دمتون گرم کارتون حرف نداره عالی هستین عااااااللللللللللی
۰۲:۳۴ ۱۳۹۵/۱۲/۰۶
سلام ممنون از مطلب خوبتون
بنده در داخل سایتم از ووکامرس استفاده می کنم وقتی می خوام یک کلاس یا یک آی دی رو در css استایلشو تغییر بدم بفرض می خوام کلاس price رو در صفحه محصول براش border بزارم ولی وقتی این کار رو انجام می دم در صفحه ارشیو محصولات (دسته محصولات) هم نیز دور قیمت border می افته برای اینکه تغییرات کلاس css رو از این عمومیت در بیارم باید چه کار کنم؟
بنده در داخل سایتم از ووکامرس استفاده می کنم وقتی می خوام یک کلاس یا یک آی دی رو در css استایلشو تغییر بدم بفرض می خوام کلاس price رو در صفحه محصول براش border بزارم ولی وقتی این کار رو انجام می دم در صفحه ارشیو محصولات (دسته محصولات) هم نیز دور قیمت border می افته برای اینکه تغییرات کلاس css رو از این عمومیت در بیارم باید چه کار کنم؟
این موضوع به خروجی سیستم مدیریت محتوای شما بر می گردد که برای چند قسمت متفاوت از یک کلاس CSS مشترک استفاده می کند، اگر بخواهید این حالت را تغییر دهید، باید به دنبال پارامتری متفاوت در خروجی باشید (به فرض ID قسمت ها متفاوت باشد، یا احتمال دارد هر قسمت از چند کلاس استفاده کند)، اگر این پارامتر متفاوت وجود نداشت (همه قسمت صرفا یک کلاس مشترک داشتند)، باید سورس کدهای خروجی ساز برنامه مدیریت محتوای خود را ویرایش کنید، قاعدتا انجام این کار زمانبر بوده و نیاز به تسلط کافی بر PHP دارد.
زهرا
۱۵:۵۴ ۱۳۹۵/۱۲/۱۹
اگر دو کلاس ویژگی های مشترکی داشتند و یک تگ از هر دو کلاس استفاده می کرد ویژگی کدام یک اعمال میشه؟
CSS برای تعیین اولیت بین اعمال ویژگی های مختلف از قانون خاص خود پیروی می کند، بر این اساس اگر هر دو کلاس دارای خاصیتی مشترک باشند (به طور مثال background-color)، کلاسی که در نهایت (سطح انتهایی تر) در صفحه تعریف شده غالب می شود، مگر اینکه کلاس اول در استایل CSS به طور مثال مستقیما به تگ خاصی نسبت داده شده باشد (به طور مثال div.your-css-class)، در این موارد کلاس اول در مقایسه با حالت عادی، امتیاز بیشتری کسب می کند و غالب خواهد شد، یک حالت دیگر نیز این است که هر کلاس ویژگی های جداگانه داشته باشند که در اینصورت هر دو بدون تداخل اعمال خواهند شد.
اکبر
۲۰:۰۰ ۱۳۹۷/۰۸/۳۰
سلام. خواستم ازتون تشکر کنم بابت راهنمایی.
من هفته پیش راجع به ضخامت تگ hr پرسیده بودم که شما راهنمایی کردید و کار من راه افتاد. ببخشید دیر تشکر میکنم چونکه یکی از قطعات کامپیوترم سوخته بود تا بیام بخرم و ویندوز نصب کنم دیر شد.
در ضمن من کل صفحات css و نظراتو گشتم اون قسمتو پیدا نکردم. دیگه اینجا از شما تشکر میکنم. باز هم مرسی.
من هفته پیش راجع به ضخامت تگ hr پرسیده بودم که شما راهنمایی کردید و کار من راه افتاد. ببخشید دیر تشکر میکنم چونکه یکی از قطعات کامپیوترم سوخته بود تا بیام بخرم و ویندوز نصب کنم دیر شد.
در ضمن من کل صفحات css و نظراتو گشتم اون قسمتو پیدا نکردم. دیگه اینجا از شما تشکر میکنم. باز هم مرسی.
خوشحالیم که راهنمایی مفید واقع شد، یادداشت قبلیتان در قسمت درج علامت های خاص در HTML مطرح شده است!
نهال
۰۴:۰۳ ۱۳۹۸/۰۵/۰۵
سلام . فوق العاده بود مرسی.
مسعود
۱۷:۵۳ ۱۳۹۹/۰۹/۲۴
سلام خسته نباشید
من از hover برای لینکهام استفاده میکنم ولی متاسفانه با این که با آیدی و کلس از هم جداشون کردم باز هم روی همه لینکهام تغییرات hover انجام میشه بفرمایید چکار کنم این تداخل ایجاد نشه
من از hover برای لینکهام استفاده میکنم ولی متاسفانه با این که با آیدی و کلس از هم جداشون کردم باز هم روی همه لینکهام تغییرات hover انجام میشه بفرمایید چکار کنم این تداخل ایجاد نشه
اگر لینک ها را در بلاک های والد قرار دهید مشکلی نخواهد بود، مثال:
<style>
a, a:hover {
color: blue;
border: 1px solid #C5C5C5;
padding: 4px;
}
.class-name a, .class-name a:hover {
color: red;
}
</style>
<div class="class-name">
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
</div>عبداله
۱۶:۵۱ ۱۴۰۰/۰۵/۲۵
سلام من برای پیداکردن یک صفحه در یک سایت ای دی ۱۰۰۰۴۴۴۵ بهم دادن چطور وارد آن صفحه بشوم
منظور از ID در سوالتان مشخص نیست و ممکن است به سلکتور CSS مرتبط نباشد، ID می تواند اشاره به شماره مطلب یا موارد دیگری داشته باشد اگر ID شماره مطلب باشد شاید به صورت نمونه زیر بتوانید به صفحه دسترسی پیدا کنید:
example.com/10004445۰۳:۴۱ ۱۴۰۰/۰۵/۳۰
با سلام و مچکر از مطلب مفیدتون
میخواستم بدون امکان داره این مطلب بصورت pdf باشه که ذخیره کنم یا به نحوی دیگه؟
میخواستم بدون امکان داره این مطلب بصورت pdf باشه که ذخیره کنم یا به نحوی دیگه؟
متاسفانه چنین امکانی برای سایت تعریف نشده اما می توانید اطلاعات مورد نیاز را کپی و در برنامه Word برده و در نهایت به صورت PDF ذخیره کنید، لطفا "شرایط استفاده" از محتوا که لینک آن در انتهای صفحه موجود است را مطالعه بفرمایید.
آرمین
۰۰:۵۷ ۱۴۰۲/۰۱/۲۱
سلام خسته نباشید یک سوال داشتم خدمتتون برای ایدی دادن به عکس باید کجای کد نوشت؟
<"img id="your-id" src = "xxxxxxxxxx >در نمونه کدی که درج کرده اید یک ID فرضی اضافه شد.
صفحه 4 از 4آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.معراج
سلام من در قدیم سیستم مدیریت محتوا استفاده میکردن که وقتی متغیر بدون محتوا ایجاد میکردی ارور نمیداد و نیازی هم به @ قبلش...۱۴۰۲/۰۹/۰۸
ابوالفضل
سلام استاد وقتتون بخیر مثل همیشه من با یک مشکل بزرگ مواجه شدم و مجدد مزاحمتون میشم من به یک regex نیاز دارم تا...۱۴۰۲/۰۹/۰۶
بهاره هوشمندی
استاد ببخشید وقتی یه متن طولانی رو باهاش چک می کنم اگه تگ span و b داشته باشه چون تگ رو نمی بنده تا...۱۴۰۲/۰۹/۰۲
بهاره هوشمندی
با سلام استاد بزرگوار از لطف و محبت شما بسیار ممنون و سپاسگزارم خیلی عالی بود اینطوری خیلی خوب شد دستتون درد نکنه...۱۴۰۲/۰۹/۰۱
بهاره هوشمندی
با سلام و از شما من این کد رو امتحان کردم واسه متن عادی خوبه و جواب میده ولی واسه متن طولانی که رنگ...۱۴۰۲/۰۹/۰۱
بهاره هوشمندی
با سلام و خسته نباشید استاد بزرگوار آیا راهی وجود داره تفاوت دو تا متن رو با php پیدا کرد؟ مثلا با...۱۴۰۲/۰۸/۳۰
مهراد
سلام در جدول موقعی که عکس رو با php فراخوانی میکنم نمیاره تصویر عکس. لطفا راهنمایی کنید. ۱۴۰۲/۰۸/۱۷
بهاره هوشمندی
با سلام و درود استاد بزرگوار یه مشکل برام پیش اومده توی مطالب ارسالی سایت محتوایی به این صورت به متن ها اضافه شده...۱۴۰۲/۰۸/۱۷
بهاره هوشمندی
با تشکر از شما استاد گرامی پس کد رو باید اینطوری وارد کنم؟ اینطوری واسه من کار می کنه سپاسگزارم از شما...۱۴۰۲/۰۸/۰۹
بهاره هوشمندی
با سلام از لطف و محبت شما بسیار ممنون و سپاسگزارم دست شما درد نکنه لینکهای شما رو بررسی کردم یعنی باید کل کدهایی...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
با سلام و تشکر از شما من توی یه صفحه خالی هم امتحان کردم و یه amar.html هم توی پوشه root هاست ساختم بازم...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
با سلام با تشکر از شما من کاری که گفتید رو انجام دادم ولی بازم صفحه لاگین رو که میزنم باز آمارگیر اونو...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
سلام خسته نباشید من یه کد واسه آمارگیر دارم که جاو هست از سایت وبگذر بعد توی همه صفحه ها فعاله چطوری می تونم...۱۴۰۲/۰۸/۰۷
hossein
سلام وقت شما بخیر کدی هست که بشود با کمک اون، به محض حذف محصول توسط فروشندگان (افزونه دکان)، تصاویر محصول نیز حذف شوند...۱۴۰۲/۰۷/۲۵
hossein
سلام وقت شما بخیر ممنون میشم اگه راهنماییم کنید میخوام کدی در اختیارم بزارید که بتونه برام سقف درصد مدیر را تعیین کنه توی...۱۴۰۲/۰۷/۱۴
در انتظار بررسی: ۲
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.