Применение стилей
Встроенные стили форматирования применяются ко всему HTML-документу. Они должны быть объявлены в верхней части кода Web-страницы — в пределах дескриптора <head>. Объявленные таким образом свойства стиля можно использовать только в текущей Web-странице. Для того чтобы воспользоваться этими же свойствами стиля в другой Web-странице, необходимо предварительно скопированный код, который находится между дескрипторами <style> и </style>, вставить в нужный HTML-документ. Пример:
<HEAD>
<STYLE type=”text/css”>
Table.nav {background: aqua}
Table.rest {background:yellow;
text-align:center;
color:black}
A:LINK {color:red;
text-decoration:none}
</STYLE>
</HEAD>
Свойства внешней таблицы стилей хранятся в отдельном текстовом файле. Чтобы воспользоваться свойствами внешней таблицы стилей, такой файл необходимо связать с определенным HTML-документом с помощью дескриптора <link>:
<HEAD>
<LINK rel=”StyleSheet” href =”mystyles.css” type = “text/css”>
</HEAD>
В данном примере с HTML-документом связан файл mystyles.css, в котором хранятся все свойства стиля форматирования. В дескрипторе <link> использован атрибут Type=”text/css”.
Свойства внутренних стилей находятся в пределах того HTML-дескриптора, формат которого необходимо изменить. Например, для того чтобы с помощью внутреннего стиля изменить формат всех заголовков первого уровня, необходимо к каждому дескриптору <H1> одинаковые свойства стиля.
<P style= “font-size:6pt”; color: red>
Для внутренних стилей используется не дескриптор <style>, а одноименный атрибут — style. Несколько свойств стиля в пределах одного дескриптора разделены точкой с запятой. Этот тип каскадной таблицы стилей удобен только тогда, когда необходимо изменить формат одного или двух элементов HTML-документа.
Для Web-браузеров наивысший приоритет имеют те стили, код которых расположен ближе к коду дескриптора Web-страницы. Внутренние стили имеют наибольший приоритет. Следующими в этой иерархии являются встроенные таблицы стилей, код которых находится в верхней части HTML-документа. Наименьший приоритет имеют внешние таблицы стилей (код которых находится в отдельном файле).
Внешниетаблицы стилей следует использовать для объявления наиболее распространенных стилей, которые предназначены для форматирования большинства страниц Вашего Web-узла.
Встроенныетаблицы стилей предпочтительнее применять для форматирования отдельных элементов одной Web-страницы.
Внутренниетаблицы стилей удобны для форматирования отдельных дескрипторов, формат которых должен коренным образом отличаться от стилей форматирования других каскадных таблиц.
Форматирование текста с помощью таблицы стилей
Текст Web-страницы расположен в пределах дескрипторов <BODY>, <P>, <TD>, <TR>, <H1>-<H2, <LI> и некоторых других дескрипторов.
Часто используется дескриптор <DIV>, который обозначает блок, логическую единицу документа. К блоку удобно назначать стиль.
Свойства стиля, с помощью которых можно изменить формат текста в каждом из этих дескрипторов.
|
Свойство |
Применение |
|
background |
Цвет фона текста. |
|
background-image |
Определяет вставку фонового изображения. Пример: {background-image: url(Ris_1.jpg) |
|
background-repeat |
Назначает повтор фонового рисунка. (repeat-X, repeat-Y) |
|
color |
Цвет шрифта. |
|
font-family |
Шрифт текста. |
|
font-size |
Размер шрифта в pt или в процентном отношении от размера текста. |
|
font-style |
Начертание шрифта ( normal, italic). |
|
font-weight |
Полужирный шрифт (light, bold). |
|
font-variant |
Вариант начертания текущего шрифта. small-caps— отображение малыми прописными буквами. |
|
text-align |
Выравнивание текста (left, right, center, justify). |
|
text-indent |
Величина отступа. |
|
text-decoration |
Видоизменение шрифта (underline, overline, strikethrough, none). |