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

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

Преимущества использования CSS:
Разграничение кода и оформления.
Разное оформление для разных устройств.
Расширенные по сравнению с HTML способы оформления элементов.
Уменьшение размеров страниц.
Ускорение загрузки сайта.
Единое стилевое оформление множества документов.
Централизованное хранение

Уровни CSS:
Уровень 1 (CSS1) – принята 17.12.96,
Уровень 2 (CSS2) – принята 12.05.98
Уровень 2 (CSS2.1) – принята 07.06.11
Уровень 3 (CSS3) – разрабатывается

Правило таблиц CSS состоит из двух частей:
селектор {свойство1: значение; свойство2: значение}
1. Селектор – любой тэг html, для которого определение задает каким образом необходимо его форматировать.
2. Определение – состоит из двух частей:
свойства
значения

Пример
P { color: #0000FF }
P - это селектор. Он представляет собой имя тега
.
color - это свойство (атрибут) стиля. Он задает цвет текста.
#0000FF - это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB

Правила CSS
1. Несколько параметров можно перечислять через двоеточие, либо задавать отдельно каждый параметр.
2. Если для одного селектора определяются одинаковые атрибуты, но с разными значениями, то использоваться будет тот, что указан в коде последним.
P { color: green }
P { color: red }
3. Свойства и их значения в CSS не чувствительны к регистру, поэтому их можно набирать как заглавными, так и строчными символами.

Способы связывания документа и таблиц стилей:
1. Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц html. Для этого таблица стилей хранится в отдельном файле с расширением CSS. Присоединяется к документам с помощью тэга
, задаваемого в разделе .
Пример:
В связываемом файле содержатся наборы правил CSS, определяющих форматирование документа.

Содержимое файла mystyles.css
BODY {background-color: #000000; color: #FFFFFF}
P {color: #0000FF}
EM {color: #00FF00; font-weight: bold}
.attention {color: #FF0000; font-style: italic}
.bigtext {font-size: large}

2. Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе в стилевом блоке, ограниченном тэгами STYLE:
Пример:
<br> B {text-transform: uppercase} <br> P {background-color: lightgray; text-align: center}<br>

Заголовки
<br> h1 { color: #a6780a; font-weight: normal; }</div></h3></h3><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-10.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Заголовки h1 { color: #a6780a; font-weight: normal; } h2 { color: olive;" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/950071/slide-10.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/950071/slide-10.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/950071/slide-10.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-10.jpg 1440w" class="slides-image"><!----><div class="slides-content"><br> h2 { <br> color: olive; <br> border-bottom: 2px solid black; <br> }<br>
Заголовок 1
Заголовок 2

3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере. Выполняется это с помощью свойства @import:url("mystyles.css").

4. Встраивание в тэги документа – позволяет изменить форматирование конкретных элементов страницы.
Пример:
Заголовок 1. Отображается красным цветом

Приоритеты CSS (от низшего к высшему), используемые при форматировании:
1. Связанная таблица стилей (по LINK)
2. Импортируемая таблица стилей (@import)
3. Правила с элементом html в качестве селектора
4. Правило с параметром CLASS в качестве селектора
5. Правило с параметром ID в качестве селектора
6. Встроенное в тэг html правило

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

Группирование
Группирование селекторов
H1 {font-family: Verdana}
H2 {font-family: Verdana} H1, H2 {font-family: Verdana}
2. Группирование определений
H2 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
H2 (font-weight: bold; font-size: 14pt; font-family: Verdana}

Группирование свойств
H2 {font: bold 14pt Verdana}
При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения её размеров.

Наследование
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других.
Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Идентификаторы
Идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя.
На странице можно использовать только один идентификатор с определенным именем, но несколько идентификаторов с разными именами.
Т.е. идентификатору соответствует только один элемент на странице.
Параметр ID можно применять к любому элементу документа.
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Идентификаторы можно применять к конкретному тегу.
Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Пример
<br>p{ color: blue}<br>p#green {color: green}<br>
Обычный абзац
Текст параграфа с идентификатором

Классы
Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тега применять разные правила форматирования.
Тег.Имя_класса { свойство1: значение; свойство2: значение; ... }

Пример
<br> H1.red {color: red} <br> H1.blue {color:red; background-color: blue}<br>
Красный шрифт
Красный шрифт на синем фоне

Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента.
.Имя класса { свойство1: значение; свойство2: значение; ... }

Пример
<br> .red {color: red} <br> .blue {color: red; background-color: blue}<br>
Красный шрифт class="blue">Красный шрифт на синем фоне
Заголовок красного цвета на синем фоне
Заголовок красного цвета

Универсальный селектор
Используется, если требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста.
* { Описание правил стиля }

Пример
<br> * { <br> font-family: Arial, Verdana, sans-serif; /*</div></h3></h3><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-26.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример * { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/950071/slide-26.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/950071/slide-26.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/950071/slide-26.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-26.jpg 1440w" class="slides-image"><!----><div class="slides-content">Рубленый шрифт для текста */ <br> font-size: 96%; /* Размер текста */ <br> } <br>
А здесь какой-то текст

Контекстные селекторы
Контекстный селектор состоит из простых селекторов разделенных пробелом.
Тег1 Тег2 { ... }
В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1.
<Тег1>
<Тег2> ...

Пример
<br> P B { <br> font-family: Times, serif; /* Семейство</div></h3></h3><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-28.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример P B { font-family: Times, serif; /* Семейство шрифта */ font-weight:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/950071/slide-28.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/950071/slide-28.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/950071/slide-28.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-28.jpg 1440w" class="slides-image"><!----><div class="slides-content">шрифта */<br> font-weight: bold; /* Жирное начертание */<br> color: navy; /* Синий цвет текста */<br> }<br>

Селекторы атрибутов
Простой селектор атрибута
Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно.
Селектор[атрибут] { Описание правил стиля }
Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.

Пример
<br> Q {font-style: italic}<br> Q[title] {color: maroon}<br>
Продолжая известный закон Мерфи, который гласит:
Если неприятность
может случиться, то она обязательно случится
, можем ввести свое наблюдение:
После того, как веб-страница
будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом
.

Атрибут со значением
Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного атрибута.
Селектор[атрибут="значение"] { Описание правил стиля }

Пример
<br> A[target="_blank"] {<br> background: url(images/blank.png) 0 6px no-repeat; /*</div></h3></h3><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-33.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример A[target=&quot;_blank&quot;] { background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/950071/slide-33.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/950071/slide-33.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/950071/slide-33.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-33.jpg 1440w" class="slides-image"><!----><div class="slides-content">Параметры фонового рисунка */<br> padding-left: 15px; /* Смещаем текст вправо */<br> }<br>
Обычная ссылка
|
Ссылка в новом окне

Значение атрибута начинается с определенного текста
Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }

Пример
<br> A[href^="http://"] { <br> font-weight: bold /* Жирное начертание */<br></div></h3></h3><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-36.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример A[href^=&quot;http://&quot;] { font-weight: bold /* Жирное начертание */ } Обычная ссылка" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/950071/slide-36.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/950071/slide-36.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/950071/slide-36.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-36.jpg 1440w" class="slides-image"><!----><div class="slides-content">}<br>
Обычная ссылка
|
Внешняя
ссылка на сайт htmlbook.ru

Значение атрибута оканчивается определенным текстом
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом.
Селектор[атрибут$="значение"] { Описание правил стиля }

Пример
<br> A[href$=".ru"] { /* Если ссылка заканчивается на .ru */<br></div></h3></h3><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-39.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример A[href$=&quot;.ru&quot;] { /* Если ссылка заканчивается на .ru */ background: url(images/ru.png)" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/950071/slide-39.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/950071/slide-39.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/950071/slide-39.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/950071/slide-39.jpg 1440w" class="slides-image"><!----><div class="slides-content">background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */ <br> padding-left: 12px; /* Смещаем текст вправо */ } <br> A[href$=".com"] { /* Если ссылка заканчивается на .com */<br> background: url(images/com.png) no-repeat 0 6px; <br> padding-left: 12px;}<br>
Yandex.Com
|
Yandex.Ru