Экстракт каскадных таблиц стилей CSS

дальнейшее содержание публикации – черновик!

Основы

Предусмотрено три способа определение стилей, в html-документе допускается одновременное применение всех трех способов:

  • External (внешние) размещаются в отдельных файлах .css, содержащих произвольный набор правил, который может использоваться несколькими html-документам
  • Internal (внутренние) размещаются в html-документе внутри тегов <style>…</style>, перекрывают внешние определения и действуют в границах документа или фрейма
  • Inline (встроенные) размещаются в атрибуте style элемента, перекрывают внешние и внутренние определения стилей в пределах элемента.

/

Внешние

Внутренние

Стандарт предписывает размещать css-определения в html-документе внутри тега <style>…</style> в заголовке <head>, тем не менее браузеры обрабатывают их и в любом месте <body>.

Встроенные

// внутри тега <… style=”…” … >.

Правило

В теге <style> можно размесить произвольное число css-правил, каждое из которых состоит из селектора и произвольного набора деклараций. Каждая декларация включает имя свойства и назначенное свойству значение:

selector
{

declaration

property : value ;
}

/

Селектор элемента HTML

Свойства стиля можно назначить html-элементу по зарезервированному для него имени, например для параграфа <p>:

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

Селектор * устанавливает свойства стиля каждого элемента:

Селектор ID

Свойства стиля можно назначить элементу документа по его ID:

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

Свойства стиля назначенные классу можно применить в произвольном элементе, в т.ч. в тексте параграфа:

Класс можно определить для определенного html-элемента:

//

Комбинаторный селектор (Combinator selector)

Selector Example Example description
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects the first <p> element that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element

Селектор псевдо-класса (Pseudo-class selector)

//

  • :active Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.
  • :link Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход ранее.
    • Запись A {…} и A:link {…} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.
  • :focus Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст
  • :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
  • :visited применяется к посещённым ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно
  • :root root Selects the document’s root element
  • :first-child Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа
  • :last-child
  • :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
    :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
    :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
    :nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
    :only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
    :only-child
  • :first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
    :last-of-type
  • :lang(..) Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang, он обычно добавляется к тегу <html>. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах

Селектор псевдо-элемента (Pseudo-elements selector)

//

  • ::first-letter Определяет стиль первого символа в тексте элемента, к которому добавляется.
  • ::first-line Задает стиль первой строки форматированного текста.
  • ::before Применяется для отображения желаемого контента до элемента, к которому он добавляется.
  • ::after Используется для вывода желаемого контента после элемента, к которому он добавляется.
  • ::selection Применяет стиль к выделенному пользователем фрагменту текста.

 

Селектор атрибута (Attribute selector)

Attribute selectors (select elements based on an attribute or attribute value)

//

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

Отображение (Display)

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Размеры

Семейство

min-width, min-height

Полезно для реализации прилипания панелей к правой или нижней границе экрана.

Поля (Margin)

…поля соседних элементов сливаются по размеру наибольшего, а не суммируются

Граница (рамка)

//

Отступ (Padding)

Габариты

Width and Min-width, Max-width Height max-height min-height

box-sizing: content-box | border-box | padding-box | inherit

  • content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
  • padding-box Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
  • border-box Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
  • inherit Наследует значение родителя.

Контур (Outline)

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

outline: 5px solid yellow;
outline-offset: 15px;

Граница (Border)

Семейство свойств

border-

//

border-radius

border-radius: 10px 100px 10px 100px / 100px 10px 100px 20px;

border-collaps

Свойство border-collaps: {collapse | separate}; для ячеек таблиц устанавливает режим совмещения границ.

Непрозрачность opacity

opacity: 0.3;

 

//

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

inherit

Единицы размеров

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333…px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

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

1em – текущий размер шрифта

% – относительно такого же свойства родителя
em – относительно размера шрифта, применяется каскадом, т.е. em-размер применяется к родительскому значению.
rem – относительно размера шрифта элемента <html>.

vw – 1% ширины окна
vh – 1% высоты окна
vmin – наименьшее из (vw, vh), в IE9 обозначается vm
vmax – наибольшее из (vw, vh)

Единицы mm, cm, pt, pc предусмотрены спецификацией, но не используются. Они являются производными от пикселя. Их реальные размеры не соответствуют метрическим стандартам:

  • mm (мм) = 3.8px
  • cm (см) = 38px
  • pt (типографский пункт) = 4/3 px
  • pc (типографская пика) = 16px

Источник: //www.w3.org

Исключения и особые случаи

margin-left – При установке свойства margin-left в %, процент берётся от ширины родительского блока, а вовсе не от его margin-left.
line-height

При установке свойства line-height в %, процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height.

Для width/height обычно процент от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Цвет

Значение свойств цвета (color, background, border-color, …) может быть задано:

  • через имя цвета: red, orange, yellow, green…
  • цветовой RGB код: #f00, #ffb000…
  • функция
    • rgb(), rgba(),
    • hsl(hue, saturation, lightness), hsla(hue, saturation, lightness, alpha)
      • оттенок задается углом на цветовом круге (red-yellow-green-cyan-blue-magenta-red) и может быть задам в нескольких единицах: 1turn = 360deg = 400grad = ~6.28rad.
    • linear-gradient()…

Изображение

background-image: url(“bgdesert.jpg”);

Размер

px, cm, etc., or in percent %

Размер шрифта

Благоговейный SASS

Метаязык SASS (Syntactically Awesome Stylesheets) основан на  CSS и предназначен для увеличения уровня абстракции CSS-кода и упрощения разработки каскадных таблиц стилей. SASS добавляет к CSS константы и примеси. Это облегчает поддержку целостности данных внутри большого набора стилей. Константы позволяют установить значение и использовать его внутри стилей, с помощью примесей то же самое можно сделать с блоком атрибутов стиля.

Источники

  • Самоучитель и Справочник по HTML, XHTML, HTML5, CSS + блоги и форум  //htmlbook.ru
  • Tutorials, References, Exercises for HTML, CSS, JavaScript, SQL, Python, PHP… //www.w3schools.com
  •  Шпаргалка по CSS Selector: Лучшие селекторы для фронтенд-разработки //bestprogrammer.ru
  • Каскадные Таблицы Стилей домашняя страничка //www.w3.org
  • HTML5 BOOK CSS3 //html5book.ru

Leave a Reply