Встраивание стилей в 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



Опубликовал admin
16 Мар, Пятница 2007г.



Программирование для чайников.