< на главную
Способы использования css:
а) внешняя таблица стилей
б) внутренняя таблица стилей
в) встроенный стиль
г) связь дескриптора с таблицей через идентификатор (id)
а) Внешняя таблица стилей
Таблица стилей располагается в отдельном файле с расширением .css. Построена из записей (селекторов), каждая из которых состоит из наименования элемента и правила отображения:
элемент {свойство: значение; свойство: значение; ...}
элемент {свойство: значение; свойство: значение; ...}
. . . .
Параллельно в заголовок веб-страницы вставляется строчка
<head>
. . . .
<link href="адрес_файла_таблицы" rel="stylesheet" type="text/css">
. . . .
</head>
б) Внутренняя таблица стилей
Таблица стилей располагается в заголовке веб-страницы:
<head>
. . . .
<style type="text/css">
элемент {свойство: значение; свойство: значение; ...}
элемент {свойство: значение; свойство: значение; ...}
. . . .
</style>
. . . .
</head>
- В качестве элемента можно использовать либо названия html-элементов (body, h3, p, ul), либо стилевые классы, названия которых придумывает пользователь (h2.my_style_class, font.ojprst23, .my_css2, .italic_font). Во втором случае для связи изменяемого текста с таблицей стиля тот должен быть помещён внутрь дексриптора, содержащего на месте атрибута запись вида class="имя_стилевого_класса" (к примеру, <h2 class=my_style_class>Изменённый заголовок второго уровня</h2> ).
- Если нужно нескольким элементам присвоить одинаковые правила отображение, можно сделать это в одном селекторе, перечислив названия элементов через запятую. ( элемент1, элемент2 {свойство: значение} )
- Можно создать контекстные стили. Т.е. стиль будет применён к элементу только в том случае, если данный элемент располагается сразу внутри нескольких определённых дескрипторов. (Пример: ul i {color : blue;} - синим будут окрашены только те участки текста, которые принадлежат к неупорядоченному списку и написаны курсивом).
- Допускается создание нескольких селекторов, описывающих один и тот же элемент. При этом непересекающиеся правила отображения объединятся, а среди пересекающихся будет иметь приоритет тот, который расположен ниже.
- Если вдруг необходимо, чтобы какое-либо правило нельзя было перекрыть в дальнейшем, после него ставится выражение "! important" (без кавычек). К примеру: h3 {text-align: center ! important; color: blue} (т.е. выравнивание переопределить в дальнейшем нельзя, а вот цвет можно).
- В содержимое таблиц стилей можно вставлять комментарии. Для этого те должны быть окружены символосочетаниями /* ... */ .
- К одному веб-документу допускается подключать сразу несколько внешних таблиц стилей.
- Некоторые старые браузеры не поддерживают CSS. Чтобы они не отображали встроенную таблицу стилей как текст документа, её содержимое можно заключить в комментарии HTML (<!-- -->).
в) Встроенный стиль
Стиль описывается внутри дескриптора и действует только на его содержимое. Для этого внутрь тега на месте атрибута вставляется запись вида style="свойство: значение; свойство: значение; ...".
К примеру: <h3 style="color: chocolate; font-family: newroman"> ... </h3>
г) Связь дескриптора с таблицей через идентификатор (id)
Существует ещё один крайне редко использующийся способ установить связь между селектором (записью) в таблице стилей и конкретным дескриптором. Для этого в дескриптор должен быть помещён идентификатор id="произвольное_имя", а в таблице стилей создана запись #произвольное_имя {свойство: значение; свойство: значение; ...}.
К примеру:
<head>
. . . .
<style type="text/css">
#my_heading {color: black; text-decoration: underline}
. . . .
</style>
</head>
<body>
. . . .
<h2 id=my_heading>ВАЖНЫЙ ЗАГОЛОВОК</h2>
. . . .