Каскадные таблицы стилей
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;}
Псевдоклассы
Псевдоэлементы
link
Свойства стиля
Задают стиль выделенного элемента, позволяя оформить его желаемым образом.
Стандартные свойства | Браузерные свойства |
---|---|
Предопределены стандартом CSS Например рекомендация CSS 2.1 определяет около сотни таких свойств. | Работают только в определённых браузерах. Префикс -moz- для Firefox, -ms- для Internet Explorer, -webkit-для Chrome и Safari, -o- для Opera. |
Группы свойств по функциям
- Шрифты (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
И многие многие другие.