Экстракт каскадных таблиц стилей 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>:

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

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

Селектор идентификатора [#]

Селектор #<identity> назначает свойства стиля элементу документа по его ID:

Селектор класса [.]

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

Селектор <element name>.<class name> определяет свойство для сочетания определенного html-элемента и класса:

//

Комбинатор /Combinator

Следующие селекторы относятся к комбинаторам, которые позволяют выбрать элемент по виду отношения селектора с другими селекторами.

Селектор потомков ( ) /Descendant Selector

Селектор потомков соответствует всем элементам, которые являются потомками указанного элемента. В следующем примере выбираются все элементы <p> внутри элементов <div>:

div p {
background-color: yellow;
}

Дочерний селектор (>) /Child Selector

!!!Дочерний селектор > назначает свойство элементам, которые окажутся дочерними для указанного элемента. В следующем примере выбираются все элементы <p>, которые являются дочерними элементами элемента <div>

div > p {
background-color: yellow;
}

Смежный братский селектор (+) /Adjacent Sibling Selector

!!!Селектор соседних элементов используется для выбора элемента, который находится непосредственно после другого определенного элемента. Родственные элементы должны иметь один и тот же родительский элемент, а «смежный» означает «непосредственно следующий». В следующем примере выбирается первый элемент <p>, расположенный сразу после элементов <div>:

Общий братский селектор (~) /General Sibling Selector

!!!Общий селектор родственных элементов выбирает все элементы, которые являются следующими одноуровневыми элементами указанного элемента. В следующем примере выбираются все элементы <p>, которые являются следующими одноуровневыми элементами <div>:

Селектор псевдо-класса (:) /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

Семейство селекторов атрибута позволяет выбирать элементы, у которых есть некоторый атрибут или если значение атрибута соответствует условию:

  • [target] - атрибут существует у элемента
  • [target="_blank"] - атрибут имеет точно заданное значение
  • [title~="flower"] - значение включает определенное слово
  • [class^="top"] - значение начинается с фрагмента
  • [class$="test"] - значение заканчивается фрагментом
  • [class*="te"] - значение включает фрагмент
  • [type|="checkbox-radio-range"] - значение совпадает с одним из значений в списке разделенном дефисом

Список значений атрибута

Выбор элемента по значению атрибута из заданного множества реализуется селектором |=:

Сочетание селекторов атрибутов

Выбор элементов по значениям нескольких атрибутов реализуется последовательным указанием селекторов:

//

Приоритет определений /Specificity Hierarchy

Для тех случаев, когда различные селекторы конкурируют в определении значения атрибута элемента, существует порядок приоритета типов селекторов, в котором определения верхних типов селекторов подавляют определения последующих:

  1. Определения встроенного стиля /Inline styles : <... style="background-color: orange;">
  2. Селекторы идентификатора IDs: #red
  3. Селекторы классов, псевдо-классов, атрибутов: .green, :hover, [href]
  4. Селекторы элементов и псевдо-элементов: h1, :before

Важное определение /!important Rule

Правило !important применяется, чтобы переопределить ВСЕ предыдущие правила стиля этого свойства элемента, включая встроенные, но кроме тех, которые тоже определены как !important:

 

Функции

//

Функция calc()

Функция calc(expression) вычисляет арифметическое выражения для определения значения атрибута:

Функции max() и min()

Функции max(value1, value2, ...) и min(value1, value2, ...) выбирают соответственно наибольшее и наименьшее значение из списка:

Функция clamp()

Функция clamp(min, expression, max) вычисляет арифметическое выражения для определения значения атрибута аналогично calc(), но не позволяет результату выйти из диапазона заданного в min и max:

https://habr.com/ru/company/ruvds/blog/501634/

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

Компоновка

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

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

  • inline - Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег <span>
  • block - Элемент генерирует структурный блок, как и тег <div>
  • flex - Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов
  • grid - Отображает элемент как контейнер сетки на уровне блока
  • contents - Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемента следующего уровня в DOM
  • inline-block - Элемент генерирует строковый блок
  • inline-flex - Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов
  • inline-grid - Отображает элемент как контейнер сетки встроенного уровня
  • inline-table - Элемент определяет структурный блок, который генерирует строковый блок
  • list-item - Элемент генерирует структурный блок, который отображается как элемент списка <li>
  • table - Элемент генерирует структурный блок. На странице ведет себя аналогично <table>
  • table-caption - Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично <caption>
  • table-cell - Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично <th> и <td>
  • table-column-group - Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>
  • table-column - Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — <col>
  • table-footer-group - Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично <tfoot>
  • table-header-group - Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>
  • table-row - Элемент является строкой ячеек. Пример — <tr>
  • table-row-group - Элемент объединяет одну или несколько строк
  • none - не генерирует контейнер, удаляется со страницы
  • inherit - наследует свойство от родительского элемента
  • initial - Устанавливает для этого свойства значение по умолчанию
  • run-in -  Отображает элемент как блочный или встроенный, в зависимости от контекста

Геометрия и размеры

Семейство

min-width, min-height

Позволяет реализовать "прилипания" блоков к правой или нижней границе экрана с помощью функции calc().

Поля (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;

Тексты и типографика

/

  • font-family - изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства
    • sans-serif - шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
    • serif - семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки - декоративные штрихи и черточки по краям букв.
    • monospace - семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
    • cursive - шрифты, имитирующие рукописный текст.
    • fantasy - художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.
  • font-size -
    • по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.
  • font-style -
    • normal - стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
    • italic - курсивное начертание
    • oblique - наклонное начертание
  • font-weight -
  • text-indent смещение начала первой строки, отрицательные значения допускаются
  • text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым
    • blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
    • line-through Создает перечеркнутый текст (пример).
    • overline Линия проходит над текстом (пример).
    • underline Устанавливает подчеркнутый текст (пример).
    • none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
    • inherit Значение наследуется у родителя.
  • text-transform Для управления строчными и прописными буквами в тексте используется свойство
  • letter-spacing Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство :
  • color, в качестве значения указав нужный вам цвет
  • text-shadow: 2px 2px 3px #000; добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:
    • смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста
    • смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста
    • размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)
    • цвет для тени
  • text-align можно переопределить, как будут выравниваться строки текста относительно границ элемента. Рассмотрим каждое из возможных значений:
    • left - выравнивает текст по левому краю.
    • right - выравнивает текст по правому краю.
    • center - выравнивает текст по центру.
    • justify - выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.
  • background: background-color background-image background-repeat background-position; -
    • background-color
    • background-image
    • background-repeat
      • no-repeat - фоновое изображение не повторяется
      • repeat-x - повторяет фоновое изображение только по горизонтали
      • repeat-y - повторяет фоновое изображение по вертикали
      • repeat - фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали
    • background-position
      • top left
        top center
        top right
        center left
        center center
        center right
        bottom left
        bottom center
        bottom right

//

Содержание

Содержание content

//developer.mozilla.org

 

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

inherit

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

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

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

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

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

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

% – относительно такого же свойства родителя
em – относительно размера шрифта, применяется каскадом, т.е. em-размер применяется к родительскому значению.
ex – Relative to the x-height of the current font (rarely used)
ch – Relative to width of the "0" (zero)
rem – относительно размера шрифта элемента <html>.

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

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

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

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

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

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

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

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

Функция calc()

Функция calc() выполняет динамическое вычисление числовых значений свойств назначенных в CSS во время компоновки документа в окне. Выражение может содержать арифметические операции +, -, *, / над величинами в предусмотренных единицах и безразмерными величинами. Знаки операций необходимо слева и справа отделять пробелами:

Целесообразность операций * и / неочевидна, но такие операции существенно наглядней:

Источник:

CSS: полное руководство по функции calc() //habr.com

Цвет

Значение свойств цвета 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