CSS — каскадные таблицы стилей.

В этом выпуске мы поговорим о CSS (каскадных таблицах стилей).

О том, как и для чего их применяют, как подключать таблицу стилей к HTML файлу, что такое классы, для чего они создаются и какими они бывают.

И так начнем!

С помощью таблиц стилей можно указать правило отображения тега HTML в браузере.

Таблица стилей — это фактически набор правил, которые применяются к HTML тегам. Каждое правило состоит из селектора и определения.

Селектор — это тэг HTML.

Определение — это свойство тега и значение. Определение указывается в фигурных скобках, свойство и значение отделяются двоеточием(:). В конце каждого определения ставится точка с запятой (;).

Пример:

Здесь:

Свойств таблиц стилей очень много, с ними мы познакомимся в последующих выпусках.

А пока, для того чтобы понять в работе того, о чем пойдет речь в этом выпуске, воспользуемся двумя свойствами:

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

1 Способ:

Можно задать свойство для любого тега при помощи параметра style. В этом случае селектор не нужен.

Пример:

Мы изменили фоновый цвет абзаца

2 Способ:

Указать свойство в заголовке документа между тегами <style>….</style>

Пример:

Эти свойства применяются ко всему документу.

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

Все остальные теги отобразятся без применения стилей.

Если одинаковыми свойствами обладают несколько тегов, то их можно указать через запятую в качестве селектора.(H1, H2, p, li{ color:blue;}).

3 Способ:

Способ позволяет использовать одну таблицу для форматирования нескольких документов.

Смысл заключается в том, что все свойства записываются в отдельном файле с расширением CSS, а затем подключаются в HTML документ.

href=»mystyle.css» — путь к файлу CSS.

А содержимое файла строится по тем же правилам (селектор и определение).

Код файла mystyle.css:

4 Способ:

Способ позволяет использовать каскадную таблицу стилей (css), лежащую на каком-нибудь сервере.

Чтобы подключить CSS файл с какого-либо сервера нужно в заголовке документа, между тегами <style>….</style> прописать следующее:

@import:url(http://www.mysite.ru/style/mystyle.css);

Пример:

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

Такое допустимо, но при этом надо учитывать приоритет каждого из способов.

Итак, расположение способов в порядке убывания их приоритетов:

1 Способ;

2 Способ;

4 Способ;

3 Способ;

То есть, если в 3-ем или в 4-ом способе указано p {color: red;}, а во 2-ом или в 1-ом p {color: blue;}, то применится к параграфам свойство p {color: blue;}, потому что приоритет 1-ого и 2-ого способа выше, чем 3-го и 4-го.

Пару слов о наследовании и перейдем к классам.

Часто встречается ситуация, когда содержимое одного тега находится целиком внутри другого.

Пример:

Текст абзаца <strong> текст абзаца, выделенный жирным</strong> продолжение текста абзаца.

То есть у нас тэг <strong> лежит полностью внутри тега <p>.

И если мы теперь зададим стиль для параграфа, он применится и к тегу <strong>.

<p style=»color:red;»>

Текст абзаца красными буквами<strong>текст абзаца красными буквами, выделенный жирным</strong> продолжение текста абзаца красными.

Классы.

Классы используются для того, чтобы одному и тому же тегу можно было бы задавать различные правила.

Таким образом, мы применили класс red к трем различным тегам.

На этом предлагаю этот выпуск, посвящённый CSS — каскадным таблицам стилей, завершить.

Рекомендую применить стили, например, к нашему второму выпуску со сказками. Сделать там разноцветные абзацы, и заголовки с помощью стилей.