Код html документа для создания таблицы. Встраивание стилей в операторы HTML. Стили в документе HTML

10.2. Внешние и встроенные таблицы стилей

Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML?элемента LINK. При этом используются следующие атрибуты этого элемента:

Href – задает URI файла с подключаемой таблицей стилей;

Rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;

Type – при подключении CSS задается значение text/css;

Media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).

HTML?элемент LINK задается при помощи одиночного тега , который помещается в шапке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:

Встроенные таблицы стилей задаются внутри HTML?элемента STYLE (между парными тегами ), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML?элемента LINK.

Кроме подключения внешних таблиц стилей, ссылаясь на них при помощи элемента LINK, можно подключать внешние таблицы стилей и из самих таблиц стилей. Это позволяет существенно сократить объем таблиц стилей, если в них предполагается наличие одинаковых фрагментов. Подключение внешней таблицы выполняется при помощи ключевого слова @import. Правило CSS в таком случае имеет следующий формат:

@import url(«URI внешней таблицы стилей»);

Пример подключения внешней CSS может выглядеть так:

P {font-size: 16pt}

@import url("external_stylesheer.css"); /*подключение таблицы стилей*/

В примерах данной главы используются встроенные таблицы стилей. Однако имейте в виду, что это сделано только потому, что, во?первых, примеры небольшие и создавать для них два файла просто нерационально, а во?вторых, такие примеры проще помещать в книгу и они так лучше воспринимаются. На практике удобнее использовать внешние таблицы стилей. Тогда не придется при изменении стиля одного элемента заново выкладывать на сервере все содержимое документа: достаточно обновить файл с измененной таблицей стилей.

В этой статье мы рассмотрим способы встраивания CSS в HTML документ. Всего будет рассмотрено четыре способа.

Первый способ.
Один из самых простых способов это привязка стилей к элементу при помощи атрибута style . Атрибут style может использоваться для любого тега, расположенного в теле документа. Форма записи свойства следующая: <элемент style="свойство1: значение1; свойство2: значение2;"> :

Заголовок красного цвета.

Второй способ.
Следующий способ заключается в создании таблицы стилей прямо в документе. Для этого в HTML используется парный элемент style . Данный элемент имеет один обязательный атрибут type – MIME тип содержимого и один не обязательный media – устройства для вывода документа. Для таблицы стилей значение первого атрибута должно быть равным text/css . Второй атрибут может принимать одно из следующих значений:

All – для всех устройств.
aural – для синтезаторов речи.
braille – для устройств отображения азбуки брайля.
embossed – для печати азбукой брайля.
handheld – для переносных устройств, например для КПК или смартфонов.
print – для печати документа на принтере.
projection – для проекционных устройств.
screen – для экранных устройств, например монитор.
tty – для устройств с фиксированной шириной символов, например телетайп.
tv – для телевизионных устройств.

Хорошим тоном является указание конкретных устройств, для которых используется таблица стилей, media="screen" . Хотя запись media="all" также не будет ошибочной. Если необходимо задействовать таблицу стилей для нескольких устройств, то их можно перечислить через запятую media="screen, print" .

Элемент style должен располагаться в HEAD блоке HTML документа. Использование элемента в теле документа строго исключается! Вот пример таблицы стилей, расположенной в документе:

Заголовок красного цвета.

Третий способ.
В HTML есть такой элемент, как link . Элемент link располагается в HEAD блоке HTML документа. Он предназначен для создания связи между документами. В CSS этот элемент используется для подключения внешних таблиц стилей. Внешними, называются таблицы, расположенные отдельно от HTML документа, но используемые им. Элемент link , как и style имеет два необходимых атрибута type и media . Значения этих атрибутов, такие же, как и для элемента style . Для этого элемента необходимо задать ещё два атрибута href и rel . Атрибут href определяет URL таблицы стилей. Атрибут rel принимает в качестве своего значения тип связи между документами и для таблиц стилей, он должен принимать значение stylesheet . Для одного HTML документа можно подключить несколько внешних таблиц стилей. Например:

Заголовок красного цвета.

Теперь остаётся создать файлы main.css и ptint.css, который будет содержать все необходимые инструкции CSS.

H1 { color: red; }

Четвёртый способ.
Ну что же, вот мы и подошли к последнему способу подключения стилей к HTML документу. Данный способ, немного отличается от других, т.к. он не базируется на HTML элементах или их атрибутов. Речь пойдёт о директиве @import . Эта директива из CSS, и содержаться она может только в CSS документе, то есть либо в элементе style либо во внешней таблице. Эта директива должна стоять перед всеми инструкциями CSS.

Заголовок красного цвета.

Результат будет эквивалентен предыдущему способу подключения.

Заключение.
Вот и всё, теперь вы знаете о CSS ещё на чуть больше, чем раньше. Не забывайте: CSS даёт вам безграничные возможности по форматированию документов!

Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом.

Существует четыре способа связывания документа и таблицы стилей:

1. Связывание - позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.

2. Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе.

3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.

4. Встраивание в тэги документа - позволяет изменять форматирование конкретных элементов страницы.

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

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

Связывание позволяет разработчику применить одинаковый набор правил форматирования к группе HTML-документов, что приводит к единообразному отображению различных документов и придает некоторую системность серверу разработчика.

При внедрении таблицы стилей в документ правила, ее составляющие, задаются в стилевом блоке, ограниченном тэгами , который должен размешаться в разделе документа: