ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  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. Порядок каскадирования.

← Назад | Вперед →
Copyright ©  aranea.ru