Встраивание стилей в HTML документ |
|
|
В этой статье мы рассмотрим способы встраивания CSS в HTML документ. Всего будет
рассмотрено четыре способа.
Первый способ.
Один из самых простых способов это привязка стилей к элементу при помощи
атрибута style. Атрибут
style может использоваться для любого тега, расположенного в
теле документа. Форма записи свойства следующая: <элемент style="свойство1: значение1; свойство2: значение2;">:
<h1 style="color: red;">Заголовок красного цвета.</h1>
Второй способ.
Следующий способ заключается в создании таблицы стилей прямо в документе. Для
этого в 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>
<head>
<style type="text/css" media="all">
body {
background: silver;
padding: 0;
}
h1 { color: red; }
</style>
</head>
<body>
<h1>Заголовок красного цвета.</h1>
</body>
</html>
Третий способ.
В HTML есть такой элемент, как link.
Элемент link располагается в HEAD блоке
HTML документа. Он предназначен для создания связи между документами. В CSS этот
элемент используется для подключения внешних таблиц стилей. Внешними, называются
таблицы, расположенные отдельно от HTML документа, но используемые им. Элемент
link, как и style
имеет два необходимых атрибута type и
media. Значения этих атрибутов, такие же,
как и для элемента style. Для этого
элемента необходимо задать ещё два атрибута href
и rel. Атрибут
href определяет URL таблицы стилей. Атрибут
rel принимает в качестве своего значения тип связи между
документами и для таблиц стилей, он должен принимать значение
stylesheet. Для одного HTML документа можно подключить
несколько внешних таблиц стилей. Например:
<html>
<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles/print.css" type="text/css" media="print" />
</head>
<body>
<h1>Заголовок красного цвета.</h1>
</body>
</html>
Теперь остаётся создать файлы main.css и ptint.css, который будет содержать все
необходимые инструкции CSS.
h1 { color: red; }
Четвёртый способ.
Ну что же, вот мы и подошли к последнему способу подключения стилей к HTML
документу. Данный способ, немного отличается от других, т.к. он не базируется на
HTML элементах или их атрибутов. Речь пойдёт о директиве
@import. Эта директива из CSS, и содержаться она может
только в CSS документе, то есть либо в элементе style
либо во внешней таблице. Эта директива должна стоять перед всеми инструкциями
CSS.
<html>
<head>
<style type="text/css" media="all">
@import url(style.css);
</style>
</head>
<body>
<h1>Заголовок красного цвета.</h1>
</body>
</html>
Результат будет эквивалентен предыдущему способу подключения.
Заключение.
Вот и всё, теперь вы знаете о CSS ещё на чуть больше, чем раньше. Не забывайте:
CSS даёт вам безграничные возможности по форматированию документов!
Источник: www.mlib.com.ru
|
