تفاوت هاي class و id

soroorweb · Apr 29, 2007

تفاوت هاي class و id چيه؟
چه زماني بايد از class و چه زماني بايد از id استفاده كرد؟

Ocarina · Apr 29, 2007

این دو موضوع وجح اشتراک و شباهتی با ندارند و قابل مقایسه نیستند و هر کدام برای کاربرد خودشان همه و ضروری هستند...

به زبان ساده class برای تعریف یک ساختار در صفحه وب استفاده میشود که میتوان آن را به تگهای مختلف موجود در صفحه ارائه کرد
class ها بخشی از بدنه CSS است و در داخل شیوه نامه تعریف میوند.
مثلاً ما در صفحه خود همواره قسمتهایی برای خبرهای مهم داریم ، دراینجا کلاس HotNews را برای خبرهای مهم با مشخصات زیر تعریف میکنیم

کد:

.HotNews{
color:#F00;
font-size:large;
}

و از آن به عنوان کلاس برای خبرهای مهم استفاده میکنیم.

*****

ID هم صفتی هست که برای اختصاص یک شناسه به هر تگ یا عنصر در صفحه . بزرگترین استفاده از id برای دسترسی به خواص عنصری است که id به آن اشاره میکند ، که معمولاً توسط زبانهای اسکریپتی مثل جاوا اسکریپت استفاده میشود
مثلاً :
برای تگ body یک شناسه (id) تعریف میکنیم:

کد:

<body id="bdy">

و با دستور جاوا اسکریپت زیر مثلا رنگ پس زمیته را تغییر میدهیم...

کد:

document.getElementById('bdy').style.background='#000';

بهر حال تگه تو بیان مطلب اشتباهی بود دوستان بزرگواری میکنند تصحیح میفرمایند :wink:

موفق باشید - علی

soroorweb · Apr 29, 2007

ممنون از توضيحاتتون، درسته حق با شماست اما فكر كنم منظورم رو درست متوجه نشديد.
منظورم class و id در css هست

ببينيد مثلآ ما مي خواهيم با استفاده از css يك باكس با مشخصات زير ايجاد كنيم:

اگر بخواهيم از class استفاده كنيم به اين صورت است:

HTML:

.box {
border:1px red dashed;
width:250px;
height:100px;
background-color:silver;
text-align:center;
}

و در فايل HTML:

HTML:

<html>
<head>
<title>SoroorWeb.com</title>
</head>

<body>
<div class="box">
<a href="http://www.soroorweb.com">SoroorWeb.com</a></div>
</div>
</body>
</html>

اما اگر بخواهيم از id استفاده كنيم به اين صورت است:

HTML:

#box {
border:1px red dashed;
width:250px;
height:100px;
background-color:silver;
text-align:center;
}

و در فايل HTML:

HTML:

<html>
<head>
<title>SoroorWeb.com</title>
</head>

<body>
<div id="box">
<a href="http://www.soroorweb.com">SoroorWeb.com</a></div>
</div>
</body>
</html>

خروجي هر دو فايل مثل هم هست در حالي كه ما در يكي از class و در ديگري از id استفاده كرديم

سوال من اين هست كه چه فرقي مي كنه كه ما در اين گونه طراحي ها از class استفاده كنيم يا id ؟

echessdesign · Apr 29, 2007

درود بر شما
المان های block-Lever و Inline
یک المان می تواند بخ صورت Block-Lever یا Inline ظاهر شود.
اگر به صورت Block-lever نوشته شود، همواره روی یک خط جدید قرار خواهد گرفت; درست مثل یک پاراگراف جدید در یک کتاب. اگر Inline باشو، بر روی خط فعلی نوشته می شود; مثل کلمه بعدی در یک پاراگراف.
ایمانهای Block-Lever ، قطعات ساختاری بزرگ صفحه محسوب می شوند و به همین دلیل می توانند شامل المانهای Inline ، متن و المان های Block-Lever[/B دیگر باشند. در مقابل المانهای Inline فقط می توانندمتن و المانهای Inline دیگر را در بر بگیرند.

Ali_ix · Apr 30, 2007

به توضیح دوستان اضافه میکنم که ID در هر صفحه باید یکتا (uniq) باشه و یک id نباید برای دو عنصر html استفاده بشه.
بر همین اساس وقتی میخواید روالی رو در css بنویسید که لازمه به عناصر زیادی اعمال بشه، از class استفاده میکنید.
مثلا classی به نام notice میتونه به تمام عناصری (مانند p و div و table) اختصاص داده بشه که حاوی اخطار در صفحه هستند و مثلا کادر قرمز و پس زمنه زرد دارند!

از id در css زمانی استفاده میشه که بخواید به یک عنصر خاص روالی رو اعمال کنید.

برای اطلاعات کاملتر هم سر فصل css selectorها رو در مراجع css مطالعه کنید.

echessdesign · Apr 30, 2007

دورد بر شما
در ادامه صحبت های علی جان با ید ارض کنم که:
یک المان می توتند به صورت Block-Lever یا Inline نوشته شود.اگر به صورت Block-Lever نوشته شود، همواره بر روی یک خط جدید قرار خواهد گرفت; درست مثل یک پاراگراف جدید در یک کتاب. اگر Inline باشد، بر روی خط فعلی نوشته می شود; مثل کلمه بعدی در یک پاراگراف.
المانهای Block-Lever قطعات ساختاری بزرگ صفحه محسوب می شوند و به همین دلیل می توانند شامل المانهای Inline ، متن و المان های Block-lever دیگر باشند. در مقابل المان های Inline ، فقط می توانند متن و الانهای دیگر Inline را در بر گیرند.
منبع: الیزابت کاسترو

amirabbas_p30magazine · May 1, 2007

جدای مطالبی که دوستان در بالا ذکر کردند یک فرق اساسی دیگه هم بین این دو وجود داره.
یک مبحثی در CSS وجود داره به نام specificity که این مورد باعث یکی از بزرگترین اختلاف ها بین class و id میشه.
گاها دیده میشه که یک عنصر در صفحه تحت تاثیر دو سبک محتلف در CSS قرار میگیره. مثلا شما یک تگ div دارید که رنگ متن در داخل اون رو سبز مشخص کردید و داخل این تگ هم یک تگ پاراگراف دارید و رنگ اون رو هم قرمز انتخاب کردید. حالا سی اس اس باید رنگ سبز رو برای متن انتخاب کنه یا رنگ قرمز رو ؟
specificity مشخص میکنه که در این شرایط اهمیت کدام سبک بیشتر و اون رو به صفحه شما اعمال میکنه. برای مشخص کردن specificity هر سبک از یک مقدار چهار قسمتی استفاده میشه به این شکل

0,0,0,0

مقدار ها هر چه به سمت چپ میره ارزشش بیشتر میشه
مثلا این رو در نظر بگیرید

0.0.0.100

و حالا این یکی رو

0.0.1.0

بین این دو ارزش مقدار دومی از اولی ارزشش بیشتره چون رقم دوم این بخش چهار قسمتی دارای مقدار هست و به همین خاطر ارزش مقدار دوم از اول بیشتره.
خوب شما وقتی از class استفاده میکنی specificity خصوصیت class این مقدار هستش

0.0.1.0

و مقدار specificity برای خصوصیت id اینه

0.1.0.0

همونطور که مشخص کردم ارزش id در specificity از class بیشتره و اگر شما در صفحه در 100 سبک مختلف که به class ها اختصاص داده باشید رنگ یک پاراگراف رو سبز تعیین کرده باشید و تنها در یک بخش به یک پاراگراف یک id اختصاص داده باشید و رنگ رو قرمز مشخص کرده باشید در اینجا رنگ قرمز برای اون پاراگراف در نظر گرفته میشه.
اگر مطلب واضح نیست بگید من براش یه مقاله بنویسم

Ali_ix · May 1, 2007

echessdesign گفت:
درود بر شما
المان های block-Lever و Inline
یک المان می تواند بخ صورت Block-Lever یا Inline ظاهر شود.
اگر به صورت Block-lever نوشته شود، همواره روی یک خط جدید قرار خواهد گرفت; درست مثل یک پاراگراف جدید در یک کتاب. اگر Inline باشو، بر روی خط فعلی نوشته می شود; مثل کلمه بعدی در یک پاراگراف.
ایمانهای Block-Lever ، قطعات ساختاری بزرگ صفحه محسوب می شوند و به همین دلیل می توانند شامل المانهای Inline ، متن و المان های Block-Lever[/B دیگر باشند. در مقابل المانهای Inline فقط می توانندمتن و المانهای Inline دیگر را در بر بگیرند.

echessdesign گفت:

دورد بر شما
در ادامه صحبت های علی جان با ید ارض کنم که:
یک المان می توتند به صورت Block-Lever یا Inline نوشته شود.اگر به صورت Block-Lever نوشته شود، همواره بر روی یک خط جدید قرار خواهد گرفت; درست مثل یک پاراگراف جدید در یک کتاب. اگر Inline باشد، بر روی خط فعلی نوشته می شود; مثل کلمه بعدی در یک پاراگراف.
المانهای Block-Lever قطعات ساختاری بزرگ صفحه محسوب می شوند و به همین دلیل می توانند شامل المانهای Inline ، متن و المان های Block-lever دیگر باشند. در مقابل المان های Inline ، فقط می توانند متن و الانهای دیگر Inline را در بر گیرند.
منبع: الیزابت کاسترو

کلیک کنید تا باز شود...

echessdesign
این پاراگرافی که نوشتید درسته. ولی من ارتباطش رو با تفاوت id‌ و class و علت تکرارش رو متوجه نمیشم!

amirabbas_p30magazine گفت:

همونطور که مشخص کردم ارزش id در specificity از class بیشتره و اگر شما در صفحه در 100 سبک مختلف که به class ها اختصاص داده باشید رنگ یک پاراگراف رو سبز تعیین کرده باشید و تنها در یک بخش به یک پاراگراف یک id اختصاص داده باشید و رنگ رو قرمز مشخص کرده باشید در اینجا رنگ قرمز برای اون پاراگراف در نظر گرفته میشه.
اگر مطلب واضح نیست بگید من براش یه مقاله بنویسم

کلیک کنید تا باز شود...

اوه. وارد بازی های پیچیده ای شدیم.

شاید برای کسانی که تازه شروع کردند یکمی بحث سنگین و گیج کننده ای باشه. ولی خیلی مفیده و اهمیت زیادی داره.
اگر امکانش براتون هست در مورد وزن و ارزش انواع selector و نحوه محاسبه ارزش (وزن) یک selector (ترجیحا در تاپیکی جدا) توضیح بدید.
اگر مثال هم داشته باشه عالیه.

ممنون

amirabbas_p30magazine · May 2, 2007

اینجا یه مقاله نوشتم

http://forum.majidonline.com/showthread.php?p=491960

:wink:

Mohammadreza · Aug 13, 2007

ممنون از راهنمايي همه ي دوستان عزيز و اساتيد گرامي
سوال من اينه كه آيا فرقي مي كنه من از كلاس استفاده كنم يا آي دي ؟!
آيا چيزي هست كه مختص يكي از اين دو باشه
من فكر مي كنم كه با هر دو مي شه كار اون يكي رو انجام داد درسته ؟!

Ali_ix · Aug 13, 2007

Mohammadreza گفت:
ممنون از راهنمايي همه ي دوستان عزيز و اساتيد گرامي
سوال من اينه كه آيا فرقي مي كنه من از كلاس استفاده كنم يا آي دي ؟!
آيا چيزي هست كه مختص يكي از اين دو باشه
من فكر مي كنم كه با هر دو مي شه كار اون يكي رو انجام داد درسته ؟!

مطمئنید تاپیک رو خوندید؟

Mohammadreza · Aug 13, 2007

بله مطمئنم
ولي جواب سوالم داخلش نيست !!!

من فكر مي كنم كه با هر دو مي شه كار اون يكي رو انجام داد درسته ؟!

Mohammadreza · Aug 13, 2007

با تغيير آي دي و كلاس در اچ تي ام ال و تغيير اين كد به كد زير بازم همون كاري كه مي خواستم انجام بشه شد ....
براي همين مي گم كه مي شه با هر دو مي شه كار اون يكي رو انجام داد ...

کد:

/* CSS Document */
ul.headerm li {
	float:left;
	padding:5px;
	font:bold 15px Arial, Helvetica, sans-serif;
	padding-left:5px;
}
ul.headerm a:link , ul.headerm a:visited {
	display:block;
	text-decoration:none;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-top:1px solid #000000;
	background-color:#999999;
	color:#FFFFFF;
	padding:5px;
}
ul.headerm a:hover {
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-top:1px solid #000000;
	background:#CCCCCC;
	color:#666666;
}
ul.headerm a:active {
	border-bottom:1px solid #FFFFFF;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-top:1px solid #000000;
	background:#FFFFFF;
	color:#666666;
}
.div {
	border:1px solid #000000;
	margin-top:49;
	padding:20px;
}
p {
	font:bold 12px tahoma;
}

تغيير يافته براي كلاس :

کد:

/* CSS Document */
ul#headerm li {
	float:left;
	padding:5px;
	font:bold 15px Arial, Helvetica, sans-serif;
	padding-left:5px;
}
ul#headerm a:link , ul#headerm a:visited {
	display:block;
	text-decoration:none;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-top:1px solid #000000;
	background-color:#999999;
	color:#FFFFFF;
	padding:5px;
}
ul#headerm a:hover {
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-top:1px solid #000000;
	background:#CCCCCC;
	color:#666666;
}
ul#headerm a:active {
	border-bottom:1px solid #FFFFFF;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-top:1px solid #000000;
	background:#FFFFFF;
	color:#666666;
}
#div {
	border:1px solid #000000;
	margin-top:49;
	padding:20px;
}
p {
	font:bold 12px tahoma;
}

amirabbas_p30magazine · Aug 13, 2007

شما مقاله رو کامل نخوندی
تو مقاله نوشته شده بود

id رو باید زمانی استفاده کنید که تنها یک عنصر در صفحه رو می خواید سبک دهی کنید. مثلا اون div که کل صفحه داخلش قرار داره. از id فقط یکبار باید توی صفحه استفاده کنید و مثل کلاس نمیشه یه id رو به 10 تا عنصر داخل صفحه اختصاص داد.

class زمانی استفاده میشه که شما بخوای یه سبک رو به تعداد زیادی از عناصر صفحه اختصاص بدی. در اینجا از class استفاده میشه. تو این صفحه که لینکش تو همون مقاله بود

http://forum.majidonline.com/showthread.php?p=491960

باز توضیح داده شده که ارزش سبک هایی که توی یه id هست از ارزش سبک های class بیشتره.

Mohammadreza · Aug 13, 2007

خئب حالا به نظر شما كدهاي بالا كه يكيش براي آي دي و يكي براي كلاس هست از كدوم بهتره استفاده كنم ؟

amirabbas_p30magazine · Aug 13, 2007

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

کد:

#headerm

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

کد:

.headerm

باشه میتونه به ده ها عنصر در صفحه اختصاص داده بشه.
شما الان دارید روی یه برگه سبک کار میکنید که از انواع و اقسام selector ها توش استفاده شده. اگر با CSS آشنا نیستید اول با قواعدش و انواع مختلف selector ها آشنا بشید. تو امضای من لینک یه کتاب هست که 50 صفحش رو میتونید دانلود کنید. تو اون 50 صفحه در مورد انواع selector ها توضیح داده شده. اول اونها رو بخونید