CSS для тех, кто в танке + пара советов - 27 Ноября 2012 - Блог

ID и CLASS - В чем разница?

Для начала запомните: назначить какой либо параметр для элемента на
странице можно присвоив ему класс (class) или идентификатор (ID). Вот
пример присвоения тегу DIV класса

Code
<div class="divstyle">содержимое</div>
и идентификатора:

Code
<div id="divstyle">содержимое</div>
В самом css классы и идентификаторы соответственно пишутся по разному:

Code
/* Вот это класс */
  .divstyle {color: #FF0000}
  /* А вот это идентификатор */
  #divstyle {color: #FF0000}
Теперь давайте разберемся, чем же они различаются, ведь кажется что
делают они одно и тоже... но нет. Идентификатор - он и есть
идентификатор - для каждого элемента он уникальный. Классы же можно
присваивать в любом количестве любым элементам. О присвоении классов мы
поговорим позднее..
Присвоение классов элементам
Как я уже сказал, класс может быть присвоен множеству разных элементов. Элементу может быть присвоен как один класс:

Code
<html>
  <head>
  <style type="text/css">
  .style1 {color: #FF0000}
  .style2 {font-style: italic;}
  </style>
  </head>
  <body>

  <span class="style1">ТЕКСТ</span>

  </body>
  </html>
так и несколько! В этом случае классы прописываются через запятую:

Code
<html>
<head>
<style type="text/css">
.style1 {color: #FF0000;}
.style2 {font-style: italic;}
</style>
</head>
<body>

<span class="style1 , style2">ТЕКСТ</span>

</body>
</html>
Но можно прописать дополнительные стили прямо в элементе не обращаясь к таблице:

Code
<html>
  <head>
  <style type="text/css">
  .style1 {color: #FF0000;}
  .style2 {font-style: italic;}
  </style>
  </head>
  <body>

  <span style="color: #FF0000; font-style: italic;">ТЕКСТ</span>

  </body>
  </html>
Идентификатор же не допустит такой вольности, его можно указать для каждого элемента только в одном числе:

Code
<html>
  <head>
  <style type="text/css">
  .style1 {color: #FF0000;}
  .style2 {font-style: italic;}
  #textstyle {font-style: underline;}
  </style>
  </head>
  <body>

  <span id="textstyle">ТЕКСТ</span>

  </body>
  </html>
Селекторы для классов
Первый вид селекторов, это непосредственное указание имени обьекта в стиле(в этом случае перед классом не ставится точка):

Code
p {font-family: "Garamond", serif;}
В этом примере для параграфа назначается шрифт Garamond - тоесть все апраграфы на странице будут выводиться этим шрифтом.

Второй вид селекторов, это селекторы с указанием не только класса но и
id нужного обьекта (в данном случае стиль будет присваиваться только
параграфу с id, равным paragraph1)

Code
p#paragraph1 {margin: 0;}
Так же и наоборот (Класс будет применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным news):

Code