Включение CSS в html-код

Каскадные таблицы стилей бывают трёх видов и, соответственно, включаются в html-код тремя способами.

  1. Внутренние таблицы стилей. Задаются внутри элементов при помощи атрибута stile, например:

    Заголовок синего цвета

    Результатом всего этого будет:

    Заголовок синего цвета

    Таким способом таблицу стилей можно задавать каждому заголовку и абзацу. Недостаток этого способа заключается в том, что таблица задаётся только для одного элемента, например заголовка. Для всех остальных заголовков необходимо создавать свои таблицы стилей, а это уже потерянное время. Также если захочется задать новые таблицы стилей для сайта в целом используя этот способ, придётся изрядно потрудиться.

  2. Встроенные таблицы стилей. Этим способом таблица стилей задаётся для целого html-документа между тегами .... Например, если мы хотим сделать все заголовки веб-страницы синего цвета, нам надо будет между тегами ... написать следующее:

    Если написать такой код между тегами ..., то все заголовки первого уровня будут синими. При этом способе стили задаются при помощи тегов . Также тегу , но не сайта в целом.

  3. Внешние таблицы стилей. Задаются в отдельном файле и подключаются к html-документу при помощи тега , который размещается между тегами .... Рассмотрим более подробно этот случай. Набираем в блокноте такой вот код и сохраняем его как html-файл.


     
      Заголовки в html-документе.
      
     
     
      

    Заголовок первого уровня


      

    Заголовок третьего уровня, расположенный по центру html-документа


      
    Заголовок шестого уровня, выравненный по правому краю веб-страницы

     

    После этого создаём новый файл такого содержания:

    H1 {color:blue;}
    H3 {color:red;}
    H6 {color:green;}

    И сохраняем его как style с расширением *css. Результат смотри здесь. Это наш html-файл с заголовками. Разберём теперь как работает эта конструкция. В html-документе с заголовками мы между тегами ... написали такую строчку:

    Здесь при помощи тега мы подключаем таблицы стилей к html-документу. Атрибут href ссылается на место, где размещён файл со стилями, это обязательный атрибут. Атрибут type мы уже знаем, он указывает тип таблицы стилей. Атрибут rel указывает отношение подключаемого файла к данному html-документу. В нашем случае значение атрибута rel="stylesheet" обозначает, что мы добавили основную таблицу стилей. Плюс такого метода задания таблиц стилей заключается в том, что ели захочется поменять дизайн сайта в целом, достаточно изменить только один файл с таблицами стилей.

На одной веб-странице можно использовать все 3 типа задания таблиц стилей. Приоритеты стилей при этом будут расставляться в соответствии с принципами каскадирования.

2012 год.


<<Предыдущая | В раздел | Следующая>>