Селекторы id

Свойства id селекторов схожи с свойствами классами. Они также могут использоваться для любого html элемента. id селекторов обозначаются в виде решетки (#). Далее показаны примеры id:

1. #navigation {width:12em; color:#333;}

2. div#navigation {width:12em; color:#333;}

Основное отличие id от классов селекторов заключается в том, что id могут использоваться только один раз на странице, в то время как классы - неограниченное количество раз.

 

18. Блочная модель в CSS. Плавающая модель в CSS. Позиционирование и визуализация.

Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.

Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model ("блочная" или "коробочная" модель).

Предположим, мы имеем на входе:

<span>Какой-то контент</span>;

В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны.

Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.

Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:

· Собственно, содержимое элемента (контент)

· Бордюр (рамка, англ. "border")

· Пространство между содержимым элемента и бордюром (англ. "padding").

· Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. "margin").

Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные").

Блочные (block) элементы

Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже.

Inline- ("инлайн"-) элементы

Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.

Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.

С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.