Типы каскадных таблиц стилей

Почему стили называются каскадными? Каскад - это иерархия применения - красивое название для системы применения правил. Если внимательно посмотреть на ниже перечисленные типы таблиц стилей, то станут очевидными различные способы применения стиля к одному и тому же документу.

Встроенный стиль (inline CSS)

Встроенный стиль определяется непосредственно в теге с использованием атрибутаstyle. Такой подход полезен, только если стиль, единовременно применяется элементу.

Каждый тег может иметь параметр style, который определяет свойства тега.
Например:

<p style="font-size:48pt; color:yellow"> Пример </p>

В данном случае текст только одного абзаца будет желтым и 48 кегля:

Пример

Такой способ задает максимальный приоритет значениям свойств тега по отношению к другим способам определения стиля.

Недостатоктакого способа трудоемкость создания и коррекции документа,целесообразно использовать только для ограниченного числа элементов.

Задание №1 1. Создайте HTML документ, соответствующий стандарту XHTML 1.1 илиXHTML 1.0 Strict 2. Создайте несколько абзацев (4 - 5), содержание - любое 3. Измените свойства одного абзаца:размер, цвет, фон (цвета можно выбрать здесь) 4. Проверьте созданный документ службой валидации

Внутренняя или внедренная таблица стилей(Internal CSS)

Внедренный стиль управляет представлением одного документа и размещается внутри тега <style>...</style>в разделе headHTML-документа

Например:

<head>
...
< style type="text/css">
p {
background-color : yellow;
color: red;
text-align : center
}
< /style>
...
< /head>

В результате во всем документе будет изменен цвет фона и цвет текста и выравнивание текста в теге <p> . Посмотреть результат в другом окне

Задание №2 1. Используйте уже созданный документ 2. Создайте внедренную таблицу стилей,измените свойства тега <p>размер, цвет, фон текст (выберите другие цвета, отличные от выбранных в первом задании) 3. Проверьте созданный документ службой валидации 4. Убедитесь, что встроенный стиль имеет максимальный приоритет

Внешняя или связанная таблица стилей (External CSS)

Внешняя таблица стилей это таблица которая связана с HTML-документом при помощи тегаlink, размещенного в разделе документа head. Любой документ, связанный с данным типом таблицы стилей, получает все стили,определенные в ней, в чем и заключается преимущество управления языкаCSS

Такая таблица стилей находится в отдельном текстовом файле с расширением CSS (желательно, чтобы он находился в той же папке что и web-документ). Тогда таблица стилей подключается с помощью тега <link>в разделе <head>:

Параметр href определяем путь к файлуCSS, если таблица находится в той же папке что и web-документ, то это просто href="styles.css",где styles.css – имя файла CSS.

Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.