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

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки.

CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.

Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.

Способы применения стилей.

Связывание (Linking)
Встраивание (Embedding)
Задание для отдельного тега (inline)

Чтобы использовать стили , мы можем избрать один из трёх способов, либо комбинировать их:

Связывание происходит с помощью элемента <link>:

<link media="aH" rel="stylesheei" type="lext/css" href="css/all.css" />

Плюсы: таблица стилей применится к каждому файлу который на нее ссылается
Минусы: если css файл не будет получен, получим голый документ без стилизации, вероятность этого крайне мала

Встраивание. Стили пишутся непосредственно в HTML-документ <head> (в виде блока css- текста) с помощью элемента:

<style type="text/css"> 
    ...
</style>

Сам тег <style>(в отличие от <link>) может находиться в любой части документа, но обычно его размещают внутри секции <head>.

Плюсы: частично используется для улучшения скорости загрузки страниц.
Минусы: Увеличивается вес страницы

Задание для отдельного тега. Прописывается inline-стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style:

<p style="color:#f00;">a unique paragraph in red </p>

Плюсы: такой стиль не перебивается свойствами заданными этому элементу в таблице стилей
Минусы: Увеличивается вес страницы. Имеет приоритет выше чем правила описанные для этого элемента в табл стилей. Периодически могут возникать жалобы со стороны разработчиков CMS если клиентом ставится задача редактировать такие элементы из админки.

Базовый синтаксис

Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов(специальных указателей на HTML- объекты, к которым мы планируем применить css-правило), разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так:

селектор,
селектор {
    свойство: значение;
    свойство: значение;
    свойство: значение;
}

Виды CSS селекторов

Универсальный селектор

*{свойство: значение;...}

Селекторы тегов

тэг{свойство: значение;...}

Селекторы атрибутов

[атрибут]{свойство: значение;...}
Селектор[атрибут]{свойство: значение;...}

Селекторы классов

.className{property: value;}
tag.className{property: value;}

Селекторы id

#idName{property: value;}
tag#idName{property: value;}

Контекстные селекторы

selector1 selector2{property: value;}

Соседние селекторы

selector1 + selector2{property: value;}

Дочерние селекторы

selector1 > selector2{property: value;}

Псевдоклассы

All pseudo-classes

Псевдоэлементы

link

Свойства стиля

Задают стиль выделенного элемента, позволяя оформить его желаемым образом.

Группы свойств по функциям

Шрифты (font)
Цвет и заливка (background и color)
Отступы и поля (margin и padding)
Позиционирование (position)
Размеры (width и height)
Свойства рамок (border)
Оформление текста и другие.

Значения свойств CSS

Каждое свойство стиля в CSS должно задавать определенный список значений.

Список значений может представлять собой одно значение, либо список значений, разделенных пробелами.
Свойства позволяющие одновременно задать несколько свойств называются стенографическими свойствами.
```
{ 
    font:bold 14px/24px Helvetica; 
    ... 
}
```

Типы значений свойств

Всё многообразие значений стилевых свойств может быть сведено к одному из типов:

cтрока (“String”)
число (±256, ±0.56)
проценты (56%, 56.6%)
относительные размеры (em, ex, px)
абсолютные размеры (in, cm, mm, pt, pc)
цвет red, #ff0000, #f00, rgb(255,0,0)
адрес или ключевое слово.

Директивы CSS

определенная конструкция, которая начинается знаком @ и является какой-то командой или установкой.

@charset (задает кодировку символов в CSS)
@import (позволяет включать одни таблицы стилей в другие)
@media (задает имена устройств отображения)
@font-face (указывает настройки шрифтов и позволяет загрузить спец шрифт) и другие

Наследование правил в CSS

автоматическое применения некоторых стилевых свойств родительского элемента ко вложенным в него дочерним элементам, если они не переопределены явно.

Некоторые CSS свойства не наследуются (проверяйте в справочнике).
Для наследования не наследуемых свойств используется ключевое слово inherit
```
{ 
    css-свойство : inherit; 
    ... 
}
```

Типы стилей CSS

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

Стиль браузера (стиль по умолчанию)
Стиль разработчика (правила CSS)
Пользовательский стиль (задается в настройках браузера)

Применение стилей: каскадирование

При наличии нескольких правил для одного элемента, применяться будет правило с наибольшим приоритетом.

При вычислении приоритета учитываются:

важность;
специфичность;
порядок исходного кода.

Правила приоритета/важности

свойства объявленные с помощью сопроводительного слова !important
внутренние стили
стиль, заданный CSS правилами
стили заданные непосредственно селекторами (конфликты между ними решаются с помощью рассета специфичности)
наследуемые стили стили, заданные во внешних таблицах стилей
пользовательские стили
стиль браузера

Правила специфичности

Специфичность селекторов определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.

Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.
Второе место занимает присутствие ID в селекторе(#some-id).
Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.
Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).

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

Преимущества CSS

Разделение содержания от представления
Разное оформление для разных устройств
Дополнительные возможности форматирования
Ускорение загрузки сайта
Единое стилевое оформление множества документов
Доступность за счет централизованного хранения

Ограничения CSS

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

CSS Framework

Это заранее подготовленная css-библиотека, предназначенная для того, что бы уменьшить время.
разработки и обеспечить совместимость с различными браузерами при работе с каскадными таблицами стилей (CSS).
Фактически — это набор готовых инструментов, библиотек и лучших практик, которые используется для вёрстки веб-страниц.

Преимущества CSS-framework'ов

Увеличивает производительность и помогает избежать типичных ошибок.
Увеличивает консистентность кода
Помогает наладить оптимальный рабочий процесс
Позволяет получить оптимальную кроссбраузерную совместимость.
Как правило содержит «чистый» и хорошо структурированный код.

Недостатки CSS-framework'ов

Нужно время и усилия на изучение CSS-framework'а
Можно унаследовать чужие ошибки
В итоге вы получаете «раздутый» код вашего приложения
Теряется индивидуальность проектов и их дизайн начинает зависеть от CSS-framework'а
Всегда надо обращать внимание на тип лицензии

CSS-framework'и. Существующие решения.

Bootstrap
Foundation
Skeleton
HTML Kick Start

И многие многие другие.

PreviousПолезные материали NextCSS селекторы

Last updated 4 years ago