parsgreen.com
article

آشنایی با کلاس (class) و آی دی (id) در css

css-style-id-class

یکی از ویژگی ها و قابلیتهای اصلی css استفاده از کلاس و آی دی در تعریف استایل (style) مشخص برای عناصر موجود در صفحات وب (html) است، کلاس و آی دی الگوهایی کلی را تعریف می کنند که از آن الگوها در شکل دهی ظاهری و ایجاد قابلیتهای تگ های html استفاده می شود؛ در ادامه خواهیم گفت که هر کدام از موارد گفته شده (class و id) برای هدف خاصی استفاده می شوند و خواهیم دید که چگونه می توانیم آنها را تعریف و استفاده نمائیم.

تعریف کلاس و آی دی در css


آی دی و کلاس با علائم خاصی در کدهای css شناخته می شوند، برای آی دی از علامت # و برای کلاس از علامت نقطه استفاده می کنیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کلاس و آی دی در css</title>
<!-- http://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">
این یک متن در کلاس text و آی دی main است.
</div>
</body>
</html>
پیش نمایش
توضیح:
- از آی دی برای عناصر یکتا استفاده می شود (یعنی هر آی دی مخصوص تنها یک تگ است) و استفاده از چند آی دی هم نام در یک صفحه مجاز نیست.
- از کلاس ها می توان به هر اندازه تکرار در صفحه استفاده کرد (هدف از ایجاد کلاس ها نیز همین است تا از یک الگو برای عناصر متعدد بتوان استفاده نمود).

تعریف ویژگی، بدون کلاس و آی دی در css


علاوه بر کلاس و آی دی، برخی از موارد در css به صورت کلی قابل تعریف شدن هستند، مثلا body استایل خود را به تگ body و زیر مجموعه آن اختصاص می دهد یا p به تمام عناصر پاراگرافی استایل خود را اختصاص می دهد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | استایل بدون کلاس و آی دی</title>
<!-- http://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;
}
#main{
    display:block;
    background-color:#069;
}
.text{
    color:#FFF;
}
</style>
</head>
<body>
<div id="main" class="text">
<p>
این یک متن در کلاس text و آی دی main است. برخی از ویژگی های کلی از div و p استفاده می کنند.
</p>
</div>
</body>
</html>
پیش نمایش
در مثال بالا علاوه بر استفاده از آی دی main و کلاس text به صورت کلی استایلی را برای تگ های div و p اختصاص داده ایم، با این کار تمام عناصر پاراگراف و بلاک های div آن ویژگی را خواهند داشت.
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» کار با Backgrounds و ویژگی های آن در CSS
» کار با ویژگی position و float در CSS
» کاربرد خاصیت height و width در css
» کار با ویژگی های font و text در css
» کاربرد خاصیت display در CSS
commentنظرات (۴۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: مریم
زمان: ۱۳:۱۶:۱۰ - تاریخ: ۱۳۹۱/۰۶/۱۹
سلام ببخشید من تازه دارم طراحی وب یاد می گیرم میشه راهنماییم کنید برا search
چی کار باید کنم
پاسخ: 
سلام
search باکس ها از تگ های input در html استفاده می کنند، پس باید با استفاده از css و نسبت دادن کلاس به تگ های input، استایل مورد نظر را ایجاد کنید (تسلط نسبی بر css نیاز است)، ضمن اینکه قبل از این کار یعنی استایل نویسی، باید با ساختار و نحوه کار آنها در html نیز آشنا باشید.
نویسنده: mina
زمان: ۲۱:۵۳:۰۰ - تاریخ: ۱۳۹۱/۰۸/۱۸
يه دنيا ممنون.
نویسنده: محمد
زمان: ۲۰:۰۲:۴۴ - تاریخ: ۱۳۹۲/۰۴/۲۹
سلام
من یه کلاس برای تغییر پس زمینه موقع mouseover پیدا کردم :
<style type="text/css">
.test
{
background-image: url('?');
display: block;
width: 40px;
height: 40px;
}
.test:hover
{
background-image: url('?');
}
</style>
مشکل من اینجاست که وقتی می خوام چند لینک کنار هم از این کلاس استفاده کنند نمیشه و لینک بعدی تو سطر پایین قرار می گیره. راهکارش چیه ؟ ممنون
پاسخ: 
سلام
به جای مقدار block برای خاصیت display، از inline-block استفاده کنید، احتمالا مشکل حل شود.
نویسنده: محمد
زمان: ۰۰:۵۶:۴۵ - تاریخ: ۱۳۹۲/۰۴/۳۰
داداش گلم دستت درد نکنه.
اصلا نمی دونستم همچین صفتی هم هست.
حل شد.
نویسنده: خلیل
زمان: ۰۱:۱۱:۴۵ - تاریخ: ۱۳۹۲/۰۷/۲۶
ممنون از اموزش خوبتون
نویسنده: ReYhAnE
زمان: ۰۹:۱۱:۵۸ - تاریخ: ۱۳۹۲/۰۸/۱۱
سلام..خسته نباشید.. خیلی ممنون از مطالبتون..خیلی کمکم کرد...با سپاس فراوان ;))))
نویسنده: محمد وطن‌دوست
زمان: ۱۰:۱۴:۲۴ - تاریخ: ۱۳۹۲/۰۹/۲۸
با سلام
من قالب سایتم را که بررسی می کردم متوجه شدم ۷۷ بار از کد زیر استفاده شده:
cellspacing="0" cellpadding="0"
که همه ی آن ها در تگ table هستند
برای مثال:
<table width="100%" border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
یا
<table width="100%" border="0" cellspacing="0" cellpadding="0">
یا
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dnews" style="margin-top: 0px;">
و...
این نکته هم بگویم که در قالبم به جای div از table استفاده کردم و شده میخواستم بدونم که اگر من جهت سبک سازی قالبم تمام ۷۷ کد
cellspacing="0" cellpadding="0"
در قالبم را پاک کنم اتفاقی میافته یا نه؟ یعنی قالب خراب میشه یا اینکه در قالب تاثیر نداره و مشکلی برای حذف وجود نداره؟
باتشکر
پاسخ: 
cellspacing و cellpadding تنها در ایجاد حاشیه بین سلول ها نقش دارند (که حاشیه را برابر 0 می کنند) در حالت معمول بیشتر مرورگرها حاشیه پیش فرض برای سلول ها در نظر می گیرند، اما در کل این روش تاثیر خاصی در سبک شدن قالب ندارد و توصیه نمی شود، باید سعی کنید اگر امکان دارد از div استفاده کنید یا اینکه از جدول به همین صورت فعلی.
نویسنده: محمد وطن‌دوست
زمان: ۱۷:۱۹:۳۷ - تاریخ: ۱۳۹۲/۰۹/۳۰
ممنون از راهنمایی
مهندس اگر روش تبدیل table به div رو یه مطلب آموزشی در موردش بذارین خیلی لطف کردین
مثلا یه همچین چیزی رو چگونه میتونم div بکنم:
ضمن اینکه td و tr ها هم داخلش هستند.....
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dnews" style="margin-top: 0px;">
پاسخ: 
قانون خاصی برای تبدیل table به div وجود ندارد! div معمولا با CSS تنظیم می شود، یعنی باید کدنویسی HTML و CSS را خوب یاد بگیرید تا بتوانید به راحتی کار با جداول، با div فرمت بندی کنید.
نویسنده: محمد اسکندری
زمان: ۰۲:۳۹:۵۴ - تاریخ: ۱۳۹۲/۱۲/۱۴
با سلام
در توضیح تفاوت ID و Class گفتید که :
" از آی دی برای عناصر یکتا استفاده می شود (یعنی هر آی دی مخصوص تنها یک تگ است) و استفاده از چند آی دی هم نام در یک صفحه مجاز نیست. "
ولی عملا چنین چیزی نیست و میتوان از یه ID برای دو تگ استفاده کرد . یعنی در عمل میبینم که تفاوتی ندارن البته توضیح شما معقوله و باید اینطور باشه ولی چرا اینطور نیست ؟ :|
پاسخ: 
سلام
در ظاهر این کار شدنی است (یعنی چند آی دی همسان داشته باشید) اما به لحاظ استاندارد و اعتبارسنجی validator.w3.org این کار مجاز نیست، همچنین این کار مشکلاتی نیز ایجاد می کند، به فرض در مواقعی که با جاوا اسکریپت یک عنصر را از طریق آی دی آن انتخاب کنید.
نویسنده: alireza
زمان: ۱۵:۵۱:۲۸ - تاریخ: ۱۳۹۳/۰۲/۰۱
سلام می خواستم بدونم چطور میشه رنگ یا فونت صفت title رو با css تغییر داد
پاسخ: 
سلام
با استفاده از CSS3 می توان خاصیت های title را با استایل خاص تنظیم کرد، مثال و نمونه کد آماده برای تگ a:
http://jsfiddle.net/tDQWN
نکته: توصیه می کنیم برای اینگونه موارد از جاوا اسکریپت استفاده کنید، چون در حال حاضر توسط تمام مروگرها پشتیبانی می شود.
نویسنده: payam
زمان: ۲۰:۴۷:۳۵ - تاریخ: ۱۳۹۳/۰۲/۲۷
با تشکر از مطلب خوبتون! من الان یه قالب دارم که میخوام ازش استفاده کنم ولی برای هدر مطالب از id استفاده شده که در صفحه اصلی این 10 id بار تکرار میشه که خب درست نیست!
وقتی خودم هم تگ ایجاد کننده id مطلب رو به قالب اضافه میکنم دیگه استایل کار نمیکنه؟
این مورد رو چطور میتونم حل کنم؟
امیدوارم که متوجه منظورم شده باشید :دی باتشکر
پاسخ: 
اینکه id تکرار می شود بستگی به سیستمی دارد که از آن استفاده می کنید و نمی توان راه حل ساده ای ارائه کرد، اما برای استایل دهی به صورت مجزا اگر مقدور است باید کلاس های مختلف برای هر تگ تعریف کنید، اما اگر خروجی به صورت خودکار تولید می شود و به تگ ها به صورت تک تک دسترسی ندارید، متاسفانه کار خاصی نمی توان کرد.
نویسنده: ورق پی وی سی
زمان: ۱۳:۱۶:۵۳ - تاریخ: ۱۳۹۳/۰۳/۱۸
کد های کامل css و کاربردهای انها رو دارید؟
پاسخ: 
متاسفانه خیر، آموزش ها صرفا از طریق سایت منتشر می شوند و هیچ سورس یا منبع جداگانه ای در اختیار نداریم.
نویسنده: مهدی ناصحیان
زمان: ۰۱:۲۱:۴۴ - تاریخ: ۱۳۹۳/۰۴/۱۰
با سلام و خسته نباسید و تشکر فراوان به خاطر زحمات شما. شما گفتید که تو سی اس اس میشه مواردی رو تعیین کرد که نه کلاس هستند ، نه آیدی. مثلا body که تمام خصوصیات تعریف شده به تگ <body> در html نسبت داده میشه (یا مثلا تگ p)
می خواستم بپرسم آیا میشه کاری کرد که تمام تگ های <span> هم از خصوصیات تعریف شده در یک استایل سی اس اس استفاده کنند؟ حتی اگر در خود تگ ها به آن ها خصوصیاتی نسبت داده بشه. ولی از اون ها پیروی نکنند و فقط همون استایل های تعریف شده روشون اعمال بشه.
مثلا به صورت زیر به اون ها خصوصیاتی نسبت داده بشه:
<span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: large;">
ولی باز هم از همون استایلی که تعریف کردیم استفاده کنه. اگر میشه هرچه زودتر پاسخ بدید.
پاسخ: 
سلام
پیروی تگ ها از خصوصیات CSS به چند عامل برمی گردد:
- استایل خطی مقدم بر استایل درون صفحه ای و استایل درون صفحه ای مقدم بر استایل وارد شده به صورت لینک خارجی در صفحه است (به شزط اینکه استایل درون صفحه ای بعد از لینک فایل CSS خارجی در صفحه قرار بگیرید).
- وقتی یک عنصر استایل خطی یا کلاس CSS دارد، از خصوصیات خود پیروی می کند نه از حالت عمومی، تنها در مواردی که یک خصوصیت به صورت خطی یا در کلاس CSS تعریف نشده باشد، از حالت عمومی پیروی می کند.
- استفاده از دستور important! که در این حالت استایل در اولویت برتر قرار می گیرد، مثال:
span{
color:#FF0004 !important;
}
با این حساب جواب سوال شما استفاده از دستور important! است.
نویسنده: فریبا
زمان: ۱۰:۱۶:۱۹ - تاریخ: ۱۳۹۴/۰۲/۱۱
با سلام اگر در سی اس اس دو تا تگ دی آی وی داشته باشیم و بخواهیم کاری کنیم که این تگ ها روی هم یا در کنار هم قرار بگیرند باید چه کاری انجام دهیم؟
با تشکر
پاسخ: 
سلام
باید نحوه کار ویژگی position با مقادیر relative و absolute و همچنین ویژگی display با مقادیر inline-block، inline و... را فرا بگیرید!
نویسنده: داوود
زمان: ۱۸:۴۸:۲۸ - تاریخ: ۱۳۹۴/۰۳/۱۱
سلام آقای مهندس،
استاد در پاسخ به پرسش آقای ناصحیان آیا مقدار important نمیتونه ایشون رو به هدفش برسونه؟؟ وقتی که این گزینه رو اضافه می کنیم یعنی اینکه این تگ مهمتر از تعاریف مشابه هستش دیگه! اشتباه دارم می کنم؟؟
پاسخ: 
سلام
ضمن تشکر از نکته سنجی، بله حق با شما است، نکته ای که به علت کمتر استفاده شدن توجه به آن نشده بود!، پاسخ اصلاح شد.
paged صفحه 1 از 3




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

4 × 9
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...