Узнаем что такое каскадные таблицы стилей, что такое CSS стиль и научимся задавать его для HTML элементов.

К этой статье у вас уже есть четкое понимание, что язык гипертекстовой разметки используется, чтобы описать содержимое веб-страницы. Путешествуя по сети интернет, мы замечаем, что страницы выглядят по разному: цветовая гамма, шрифты, различный междустрочный интервал, фоновые изображения и даже анимация. Не откладывая в дальний ящик сразу хочу Вам объяснить, что на то как эти страницы будут выглядеть, влияют, используемые каскадные таблицы стилей (Cascading Style Sheets - CSS ). В рамках учебника HTML мы с Вами поверхностно рассмотрим использование каскадных таблиц стилей, подробно изучить их после этого курса вы можете в разделе CSS учебник .

Что такое стиль? Стиль устанавливает внешний вид какого-либо элемента страницы, т.е. грубо говоря, это правило, которое сообщает браузеру как форматировать определенный элемент (например, измененить фон или цвет шрифта).

Каждый элемент HTML имеет стиль по умолчанию . Изменение стиля по умолчанию в HTML элементе может быть произведено с использованием глобального атрибута style . Атрибут задает встроенный (inline ) CSS стиль для элемента. Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента. В рамках изучения HTML мы рассмотрим только использование встроенного CSS.

Подсказка: в этом примере используются следующие цвета: white (белый), khaki (хаки), gray (серый). Для текста стихотворения используется шрифт Verdana .

Если у Вас есть затруднения в выполнении задания, то проинспектируйте код страницы, открыв пример в отдельном окне кликнув по изображению.

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

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

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

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

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

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

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

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

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

   
   
   
   
   
   
   

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

   
   

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

   
   

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

   
   
   

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

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

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

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