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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<link href="styles.css" rel="stylesheet" type="text/css" />

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

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