|
||
|
aranea.ru || Занятия по "Каскадным стилевым таблицам" | Способы связи стилевой информации с документами
Способы связи стилевой информации с документамиДля связи стилевой информации с HTML-документами применяют три способа, раздельно или в комбинации. 1. Внутристрочная стилевая информация.Способ заключается в использовании атрибута style="стилевая информация" в начальном теге элемента разметки. ПРИМЕР 2.<P style="color: green; font-weight: bold; font-family: Arial;"> Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial. </P> ПРИМЕР 2а. HTML-вариант.<P><FONT color="green" face="arial"><B> Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial. </B></FONT></P> 2. Использование элемента STYLE в разделе HEAD HTML–документа.Способ заключается в использовании элемента STYLE языка HTML. Этот элемент размещается в разделе заголовков элемента HEAD и его содержание не визуализируется в браузере. ПРИМЕР 3
<HTML>
<HEAD>
<STYLE type="text/css">
P {color: green; font-weight: bold; font-family: Arial;}
</STYLE>
</HEAD>
<BODY>
Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial. </P>
</BODY>
</HTML>
3. Определение внешних стилевых таблиц. Элемент LINK.Способ заключается в использовании элемента LINK языка HTML. Атрибут href этого элемента определяет внешнюю стилевую таблицу для документа (здесь файл mystyle.css). ПРИМЕР 4.
<HTML>
<HEAD><TITLE>Определение внешней стилевой таблицы<TITLE>
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
</HEAD>
</BODY>
Текст документа…
</BODY>
</HTML>
Этот способ прикрепления стилевой информации самый удобный и наиболее применимый для больших сайтов, так как один (как правило, несколько!) файл со стилевой информацией определяет презентацию всех страниц. Достаточно заменить одни файл на другой и весь внешний вид сайта измениться (смотрите ПРИМЕР 1). В разделе "14. Стилевые таблицы" перевода "Спецификации HTML 4.01" можно получить более подробную информацию о связи HTML-документов и стилевых таблиц. КАСКАДИРОВАНИЕПочему стилевые таблицы называются "каскадными"? КАСКАДИРОВАНИЕ – это комбинирование правил всех трех способов введения стилевой информации в документ. ПРИМЕР 5.
<HTML>
<HEAD>
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
<STYLE type="text/css">
P {color: green; font-weight: bold; font-family: Arial;}
</STYLE>
</HEAD>
<BODY>
<P>Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial.
</P><P style="background:yellow;"> <FONT size="-1">Этот
текст имеет зеленый цвет и выводится жирным. Шрифт Arial. Добавляется
желтый фон с помощью внутристрочного ввода стилевой информации.
Элемент FONT языка HTML уменьшает шрифт. </FONT></P>
</BODY>
</HTML>
Порядок и приоритеты при каскадировании смотрите в разделе 6.4.1. Порядок каскадирования. |
