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

## Каскадные таблицы стилей <a href="#kaskadnye-tablicy-stilei" id="kaskadnye-tablicy-stilei"></a>

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

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

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

### Способы применения стилей. <a href="#sposoby-primeneniya-stilei" id="sposoby-primeneniya-stilei"></a>

1. **Связывание (Linking)**
2. **Встраивание (Embedding)**
3. **Задание для отдельного тега (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 если клиентом ставится задача редактировать такие элементы из админки.

### Базовый синтаксис <a href="#bazovyi-sintaksis" id="bazovyi-sintaksis"></a>

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

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

### Виды CSS селекторов <a href="#vidy-css-selektorov" id="vidy-css-selektorov"></a>

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

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

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

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

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

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

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

```
.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;}
```

### Псевдоклассы <a href="#psevdoklassy" id="psevdoklassy"></a>

[All pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)

### Псевдоэлементы <a href="#psevdoelementy" id="psevdoelementy"></a>

link

### Свойства стиля <a href="#svoistva-stilya" id="svoistva-stilya"></a>

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

| Стандартные свойства                                                                              | Браузерные свойства                                                                                                                          |
| ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Предопределены стандартом CSS Например рекомендация CSS 2.1 определяет около сотни таких свойств. | Работают только в определённых браузерах. Префикс -moz- для Firefox, -ms- для Internet Explorer, -webkit-для Chrome и Safari, -o- для Opera. |

### Группы свойств по функциям <a href="#gruppy-svoistv-po-funkciyam" id="gruppy-svoistv-po-funkciyam"></a>

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

### Значения свойств CSS <a href="#znacheniya-svoistv-css" id="znacheniya-svoistv-css"></a>

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

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

  ```
  { 
      font:bold 14px/24px Helvetica; 
      ... 
  }
  ```

### Типы значений свойств <a href="#tipy-znachenii-svoistv" id="tipy-znachenii-svoistv"></a>

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

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

### Директивы CSS <a href="#direktivy-css" id="direktivy-css"></a>

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

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

### Наследование правил в CSS <a href="#nasledovanie-pravil-v-css" id="nasledovanie-pravil-v-css"></a>

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

* Некоторые CSS свойства не наследуются (проверяйте в справочнике).
* Для наследования не наследуемых свойств используется ключевое слово **inherit**

  ```
  { 
      css-свойство : inherit; 
      ... 
  }
  ```

### Типы стилей CSS <a href="#tipy-stilei-css" id="tipy-stilei-css"></a>

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

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

### Применение стилей: каскадирование <a href="#primenenie-stilei-kaskadirovanie" id="primenenie-stilei-kaskadirovanie"></a>

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

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

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

### Правила приоритета/важности <a href="#pravila-prioritetavazhnosti" id="pravila-prioritetavazhnosti"></a>

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

### Правила специфичности <a href="#pravila-specifichnosti" id="pravila-specifichnosti"></a>

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

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

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

### Преимущества CSS <a href="#preimushestva-css" id="preimushestva-css"></a>

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

### Ограничения CSS <a href="#ogranicheniya-css" id="ogranicheniya-css"></a>

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

### CSS Framework <a href="#css-framework" id="css-framework"></a>

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

### Преимущества CSS-framework'ов <a href="#preimushestva-css-frameworkov" id="preimushestva-css-frameworkov"></a>

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

### Недостатки CSS-framework'ов <a href="#nedostatki-css-frameworkov" id="nedostatki-css-frameworkov"></a>

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

### CSS-framework'и. Существующие решения. <a href="#css-frameworki-sushestvuyushie-resheniya" id="css-frameworki-sushestvuyushie-resheniya"></a>

* Bootstrap
* Foundation
* Skeleton
* HTML Kick Start

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