استفاده از Id تکراری در Html

من توی CSS یک همچین چیزی نوشتم.
کد:
td#book	{
				padding-top:17px;
}
حالا توی صفحاتم به تگهای TD زیادی آیدی book را دادم.


HTML:
<td  id="book">test book</td>


اما وقتی میخوام از Markup Validation استفاده کنم مدام با خطای

کد:
ID "book" already defined.
مواجه میشم.
در ضمن من از
کد:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
برای صفحات خود استفاده میکنم.
 

sajjad_eb

Well-Known Member
من توی CSS یک همچین چیزی نوشتم.
کد:
td#book	{
				padding-top:17px;
}
حالا توی صفحاتم به تگهای TD زیادی آیدی book را دادم.


HTML:
<td  id="book">test book</td>


اما وقتی میخوام از Markup Validation استفاده کنم مدام با خطای

کد:
ID "book" already defined.
مواجه میشم.
در ضمن من از
کد:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
برای صفحات خود استفاده میکنم.


دوست عزیز شما از روش class باید استفاده کنی. چون ID برای یک شی استفاده می شه
توی CSS اینو بنویس :

کد:
td  .book	{
				padding-top:17px;
}

و توی صفحتم اینو بنویس . هرجا که لازم داری :

کد:
<td  class="book">test book</td>
 
کد:
td  .book	{
				padding-top:17px;
}


شما فرمودین از کد بالا در CSS استفاده کنم. آیا نوشتن TD لزومی داره؟
 

sajjad_eb

Well-Known Member
کد:
td  .book	{
				padding-top:17px;
}


شما فرمودین از کد بالا در CSS استفاده کنم. آیا نوشتن TD لزومی داره؟

نه . اصلا نباید بنویسیش . چون من می خواستم کد شمارو اصلاح کنم و # رو به . تبدیل کنم دیگه یادم رفت پاکش کنم . البته می شه td رو هم نوشت . اما باید در جلو نام کلاس بنویسید . یعنی اینجوری :
کد:
  .book	  td{
				padding-top:17px;
}

اونوقت این کلاس فقط توی تگ td خونده می شه
 

Ali_ix

Well-Known Member
نه . اصلا نباید بنویسیش . چون من می خواستم کد شمارو اصلاح کنم و # رو به . تبدیل کنم دیگه یادم رفت پاکش کنم . البته می شه td رو هم نوشت . اما باید در جلو نام کلاس بنویسید . یعنی اینجوری :
کد:
  .book	  td{
				padding-top:17px;
}

اونوقت این کلاس فقط توی تگ td خونده می شه

غلطه آقا! غلط!

اون کدی که شما نوشتید با هر tdی که درون عنصری با کلاس .book هست رو هدف قرار میده! و selectorی به شکل td.book تمامی tdهایی که کلاسشون book هست رو هدف قرار میده! که کاملا متفاوته! :d


نوشتن selectorهایی به شکل element.classname مثل p.describtion معمولا برای ساماندهی بیشتر کدها و جلوگیری از تداخل و ... استفاده میشه و حداقل برای من خیلی مفیده!

فرض کنید در یک سایت یک حالت اخطار در متن یا شکل داشته باشید.
میتونید یک کلاس به نام notice مثلا داشته باشید. و هر جا لازم بود استفاده کنید!
منتها برای عناصر مختلف مدلهای مختلفی بزارید.
مثلا span.notice کافیه فقط رنگ فونتش قرمز باشه و فونت bold باشه.
ولی مثلا div.notice میتونه کادر قرمز و بک گراند زرد هم داشته باشه! یا عکس مناسبی در بک گراندش قرار بگیره!

اینجوری در طول کدنویسی پروژه لازم نیست بارها شما و احتمالا همکاران کد نویستون فایل css رو مرورر کنند تا کلاس درست رو پیدا کنند! کافیه یکبار به خاطر بسپرن که notice برای اخطاره! همین!

اینجوری کد تمیزتر و قابل توسعه تر میشه و به قولی حرفه ای تر به نظر میاد!

موفق باشید
 

جدیدترین ارسال ها

بالا