Способы встраивания стилей в HTML

Существует три различные возможности встраивания таблиц стилей. Самый простой и не эффективный способ – встраивание непосредственно в элемент в качестве атрибута style. Такое встраивание называют внутри текста (inline). Этот подход сильно увеличивает размер кода страницы и, соответственно, загрузка странички становится медленнее. <элемент style = “параметр: значение; параметр: значение ”>

Пример:

Второй способ – вставка в заголовок <head>, Такие стили называются внутренними или внедренными (internal или embedded). Они относятся только к тому документу, в котором находятся. Используется элемент <style> </style> в заголовке Head.

Атрибуты:

type – определяет язык таблиц стилей для каскадных таблиц «text/css»

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

screen – экран (по умолчанию)

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

tv – телевизор (низкое расширение ограниченных возможностей прокрутки).

handheld - для карманных устройств (маленький экран, монохромный режим)

print – страничные документы, просматриваемые на экране в режиме предварительного просмотра печати

aural – для синтезаторов речи

all – для всех

Пример: 1) <head>

<style>

h1 {border – width: 1; border: solid; text – align: center }

</style>

</head>

Описанный стиль определяет ширину рамки вокруг элемента; стиль рамки – сплошная линия; выравнивание текста по центру.

2) <head>

h1.myclass {border– width: 1; border: solid; text – align: center}

</style>

</head>

<body>

< h1 class = “myclass” > Заголовок под влиянием стиля</h1>

< h1 > А на этот заголовок стиль не влияет </h1>

</body>

3)<head>

<style>

# myid { . . . }

</style>

</head>

<body>

< h1 id = “myid” > Заголовок под влиянием стиля </h1>

< h1 class = “myclass” > На этот заголовок стиль не влияет </h1>

< h1 > На этот заголовок стиль тоже не влияет </h1>

</body>

Наиболее удобный способ встраивания стиля – использование внешних (external) таблиц стилей (файл.css). Связывание документа с внешней таблицей осуществляется с помощью тега <link> (рассматриваемого на предыдущей лекции) конечный тег запрещен: <link rel = stylesheet type = text/css href = “url-адрес таблицы стилей”>. Адрес может быть абсолютным и относительным (“mystyle.css” или “http:/www. mystyle.ru/xyz/mystyle.css”). Применение одного и того же файла ко многим документам html существенно уменьшает время загрузка каждого.

Способы встраивания стилей в HTML – документ