Селекторы 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 позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.
|
