Автор Тема: Id и Class...  (Прочетена 722 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

NecrosS

  • Newbie
  • *
  • Благодарности
  • -Казани: 6
  • -Получени: 0
  • Публикации: 47
Id и Class...
« -: 01 Юли 2015, 12:56:34 »
Каква е разликата между class и id? Виждам, че повечето сайтове използват определението ID, но аз съм свикнал предимно да използвам <div class=""> при div таг. Има ли някаква разлика или е едно и също?

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Id и Class...
« Отговор #1 -: 01 Юли 2015, 19:47:16 »
Здрасти,

имената на атрибутите говорят сами за себе си. ID - уникален идентификатор - ползва се само по един на страница, два елемента с една и съща стойност на атрибута ID не се допускат. Може да използваш диез (# - селектора за ID) в линковете си и така да препратиш страницата където си сложил този уникален атрибут. Например една произволна тема от форума http://nau4i.me/forum/index.php/topic,16361.msg48453.html#msg48453. Обърни внимание на края на линка, който съдържа това #msg48453. Когато отвориш този линк, няма да те прати в началото на страницата, а по-надолу където е мнението на Jazzman (там сочи ID-то). Може сам да инспектираш страницата и да видиш къде точно се намира този елемент :)

Class също говори само с името си, класификатор на група от елементи. Зададените стилове в CSS към определен клас, се слагат върху всички елементи с него.

За да илюстрирам всичко накратко, ще взема кода ти от другата тема:
Код: HTML
  1. <div class="buttons">
  2. <a href="#" style="color:white" >HOUSE OF DANAK</a>
  3. <a href="#" style="color:white" >DRAAGAN LORE</a>
  4. <a href="#" style="color:white" >MYTHS OF D'ROGA</a>
  5. <a href="#" style="color:white" >ARCHIVES</a>
  6. </div>
  7.  

Ако този div с линковете е уникален, и другаде няма да има такъв, е по-уместно да ползваш id, а за отделните линкове да ползваш клас (както и да не слагаш директно CSS-а върху елемента посредством style таг!!):
Код: HTML
  1. <div id="menu">
  2.     <a href="#" class="buttons">HOUSE OF DANAK</a>
  3.     <a href="#" class="buttons">DRAAGAN LORE</a>
  4.     <a href="#" class="buttons">MYTHS OF D'ROGA</a>
  5.     <a href="#" class="buttons">ARCHIVES</a>
  6. </div>

Код: CSS
  1. #menu {
  2.     margin-left: 200px;
  3.     width: 500px;
  4.     display: inline;
  5. }
  6.  
  7. .buttons {
  8.     color: white
  9. }
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!