Таблица стилей CSS

Правила построения CSS.

В первых трёх случаях подключения таблицы CSS к документу (см. выше) каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «: «. Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

селектор, селектор {.

свойство: значение;

свойство: значение;

свойство: значение;

}.

В четвёртом случае подключения таблицы CSS к документу (см. список) правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой перечень объявлений («свойство CSS: значение»), разделённых знаком «;».

Пример таблицы стилей Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами и размещена в «шапке» той самой веб-страницы, на которую она действует):

p {.

font-family: Garamond, serif;

}.

h2 {.

font-size: 110%;

color: red;

background: white;

}.

.note {.

color: red;

background: yellow;

font-weight: bold;

}.

p#paragraph1 {.

margin: 0;

}.

a:hover {.

text-decoration: none;

}.

#news p {.

color: blue;

}.

[type="button" ] {.

background-color: green;

}.

Здесь приведено семь правил CSS с селекторами p, h2, .note, p#paragraph1, a: hover, #news p и [type="button" ].

• 1. Первое правило присвоено HTML-элементу p (абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»).
• 2. Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.
• 3. Третье правило будет применено к любому элементу, атрибут class которого равен 'note'. Например, к параграфу:

  Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.

• 4. Четвёртое правило будет применяться только к элементу p, атрибут id которого равен paragraph1. Такой элемент не будет иметь внешних отступов (margin).
• 5. Пятое правило определяет стиль hover для элементов a — гиперссылок. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.
• 6. Шестое правило, применяется для элементов p, которые находятся внутри КАКОГО-ЛИБО элемента с атрибутом id, равным «news» (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше).
• 7. Седьмое правило применяется для всех элементов, у которых атрибут type равен button. Например, это правило будет применено к элементу (обычная кнопка), изменив его цвет фона на зеленый.

CSS-вёрстка До появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Преимущества:

• · Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
• · Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть закэшировано.
• · Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
• · Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Недостатки:

• · Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.
• · Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.