Введение в CSS

5 (100%) 6 vote[s]

Cascading Style Sheets (CSS) — это не язык программирования, а иерархические правила (или по-другому таблицы стилей). Используются для оформления внешнего вида документа, написанного на HTML или XML (в том числе различные подвиды языка XML, как  SVG  и XHTML).

CSS является одним из основных языков свободной веб-разработки, который стандартизован спецификацией W3C. Стандарт CSS делится на уровни:

      • CSS1 в настоящее время устарел;
      • CSS2.1 — рекомендован для применения;
      • CSS3 (разбитый на более мелкие модули) развивается, и в данный момент находится на этапе стандартизации.

CSS указывает, как именно будут отображаться элементы HTML-разметки страницы (цвет, высота, отступы, позиционирование, показ/скрывание элементов, параметры анимации и т. д.)

Способы подключения CSS стилей:

      1. Inline стили.
      2. Запись CSS кода в HTML документе в тег <style>, который размещается в <head>.
      3. Вынесение CSS кода в отдельный документ с расширением .css и подключением в <head> при помощи тега <link>.
      4. @import в .css файле.
<!--подключение Inline-->
<a href="#modal-2" type="button" style=" text-decoration:none;max-width:300px auto;padding: 7px 50px;display: inline-block;background: #41bfd8;border: 1px solid #082b47;border-radius: 2px;color: white;text-decoration: none;transition: 0.35s ease-in-out;font-weight: 700;box-shadow: 0 0 10px rgba(0,0,0,0.5)" class="button openModal">модальное окно2</a>

<!--подключение в <head>-->
<style>
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
 }
</style> 
  
 <!--подключение по ссылке-->
<link rel="stylesheet" href="style.css" type="text/css">
  
 /* -----  импорт в css-файле google Font  -----*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');

CSS-правило

CSS-синтаксис – это правила написания CSS-кода. Основная цель языка CSS  состоит в том, чтобы позволить движку браузера показывать элементы страницы с помощью определенных функций. Синтаксис CSS отражает эту цель и состоит из основных строительных блоков:

      • Селектор. Указание элемента страницы, к которому будут применяться стили.
      • Свойство. Представляет собой идентификатор, который является человеко-читаемым именем, которое определяет, какие функции рассматриваются. Установка свойств CSS для определенных значений является основной функцией языка CSS. Механизм CSS вычисляет, какие объявления применяются к каждому отдельному элементу страницы, чтобы соответствующим образом его разметить и стилизовать. Свойство и значение в каждой паре разделяются двоеточием ( :).
      • Значение. Описывает, как функция должна быть обработана движком. Каждое свойство имеет набор допустимых значений, определенных формальной грамматикой, а также семантическое значение, реализованное механизмом браузера.

Объявление CSS, синтаксис

Объявления сгруппированы в блоки. Каждый набор объявлений оборачивается в фигурные скобки (открывающую ( {) и закрывающую ( })).

Каждое отдельное объявление, содержащееся в блоке объявления, должно быть разделено точкой с запятой ( ;). В противном случае код не будет работать (или даст неожиданные результаты). Последнее объявление блока не должно заканчиваться точкой с запятой, хотя это часто считается хорошим стилем. Просто такое правило предотвращает забывание добавить точку с запятой при расширении блока другим объявлением.

Чтобы сообщить блокам объявлений, к каким элементам они должны применяться, используются  селекторы — шаблон, который соответствует некоторым элементам на этой странице. Связанные объявления будут применяться только к этим элементам. Селектор плюс блок объявления называется набором правил или просто правилом.

Примечание. Блок объявления может быть пустым — это приемлемо. Блоки могут быть вложенными. В таких случаях открывающая и закрывающая фигурные скобки должны быть вложены логически, так же, как теги вложенных элементов HTML. Наиболее распространенным примером являются @ -rules. Они  представляют собой блоки, начинающиеся с идентификатора @, например @media, @font-face и т. д.

Существует несколько правил at, обозначаемых их идентификаторами, каждый из которых имеет свой синтаксис:

    • @charset — определяет набор символов, используемый таблицей стилей.
    • @import — говорит движку CSS включить внешнюю таблицу стилей.
    • @namespace — указывает движку CSS, что все его содержимое должно рассматриваться с префиксом пространства имен XML.

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

      • @media. Правило условной группы, которое будет применять его содержимое, если устройство соответствует критериям условия, определенному с помощью медиазапроса .
      • @supports. Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.
      • @document. Условное правило группы, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия (отложено до уровня 4 спецификации CSS).
      • @page. Описывает аспект изменений макета, который будет применяться при печати документа.
      • @font-face. Описывает аспект внешнего шрифта для загрузки.
      • @keyframes. Описывает аспект промежуточных шагов в последовательности анимации CSS.
      • @viewport. Описывает аспекты области просмотра для устройств с маленьким экраном (в настоящее время на стадии разработки проекта).
      • @counter-style. Определяет конкретные стили счетчиков, которые не являются частью предопределенного набора стилей (на этапе рекомендации, но только на момент написания в Gecko).
      • @font-feature-values (плюс @swash, @ornaments, @annotation, @stylistic, @stylesetи @character-variant)  — определение общих имен в font-variant-alternates для функции активации по- разному в OpenType (на этапе рекомендации, но только на момент написания в Gecko).
@media (min-width: 600px) {
	  body {
	    margin: 0 auto;
	    width: 300px;
	  }
	}

Селекторы

Любая синтаксическая ошибка CSS в определении правила делает недействительным все правило. Неверно написанные правила просто будут игнорироваться браузером.  Определения правил CSS полностью (ASCII) основаны на тексте, а DOM-CSS/CSSOM (система управления правилами) основана на объектах.

Селекторы можно разделить на следующие категории:

Простые селекторы 

Если нужно указать селектор для id элемента в HTML разметке, нужно записать #id. Например, для элемента

<input type="checkbox" name="toggle" id="menu" class="toggleMenu">

селектором id будет #menu.

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

<input type="checkbox" name="toggle" id="menu" class="toggleMenu">

селектором class будет .toggleMenu.

Это самый простой способ выбора всех элементов данного типа.

Селектор, соответствующий тегам элемента HTML:

See the Pen
Селекторы
by Alla (@AllaJan)
on CodePen.

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

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

      • квадратные скобки ([]), в которых содержится имя атрибута;
      • за ним следует (необязательно) условие для сопоставления со значением атрибута. 

Селекторы атрибутов можно разделить на две категории в зависимости от того, как они соответствуют значениям атрибутов:

      • селекторы атрибутов присутствия и значения;
      • селекторы атрибута значения подстроки.

Селекторы атрибутов присутствия и значения

Эти селекторы атрибутов будут искать точное значение атрибута:

      • [attr]: Селектор выберет все элементы с атрибутом attr, независимо от его значения.
      • [attr=val]: Селектор выберет все элементы с атрибутом attr, но только со значением val.
      • [attr~=val]: Селектор выберет все элементы с атрибутом attr, но только если   val — это один из разделенных пробелами списка слов, содержащихся в значении attr

See the Pen
Селекторы атрибутов
by Alla (@AllaJan)
on CodePen.

Селектор атрибута значения подстроки

Селекторы атрибутов в этом классе известны как «RegExp-подобные селекторы», потому что они предлагают гибкое сопоставление аналогично регулярному выражению (но, чтобы быть ясным, эти селекторы не являются истинным регулярным выражением):

      • [attr^=val]: Этот селектор выберет все элементы с атрибутом, attr для которого значение начинается с val.
      • [attr$=val]: Этот селектор выберет все элементы с атрибутом, attr для которого значение заканчивается val.
      • [attr*=val]: Этот селектор выберет все элементы с атрибутом, attr для которого значение содержит подстроку val. (Подстрока — это просто часть строки, например, «cat» — это подстрока в строке «caterpillar».) 

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

Псевдокласс CSS — это ключевое слово, добавляемое в конец селектора, перед которым стоит двоеточие ( :), которое используется для указания того, что нужно стилизовать выбранный элемент, но только когда он находится в  определенном состоянии . Например, можно стилизовать элемент ссылки только тогда, когда на него наведен указатель мыши, или флажок, когда он отключен или отмечен, или элемент, который является первым дочерним элементом его родителя в дереве DOM.

Например, для стилизации ссылки

<a href="https://www.babulya.com.ua/" target="_blank">Babulya</a>

напишем такие стили:

/* Эти стили будут стилизовать нашу ссылку */
a {
color: blue;
font-weight: bold;
}
/* Мы хотим, чтобы посещенные ссылки были того же цвета, что и не посещенные ссылки. */
a:visited {
color: blue;
}
/* Мы выделяем ссылку, когда она находится над (мышь над), активируется (мышь вниз) или фокусируется (клавиатура) */
a:hover,
a:active,
a:focus {
color: darkred;
text-decoration: none;
}

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

Псевдоэлементы хоть и похожи на псевдоклассы, но имеют принципиальные отличия. Это ключевые слова, на этот раз им предшествуют две двоеточия ( ::), которые можно добавить в конец селекторов для выбора определенной части элемента. ::after.

Например, ::first-line может быть использован для изменения шрифта первой строки абзаца.

/* Первая линия каждого <p> элемента. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Комбинаторы 

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

Комбинаторы – это не сами селекторы, а способы комбинирования двух или более селекторов для специфических выборов. Так, например, вы можете выбрать только абзацы, которые являются прямыми потомками div, или абзацы, которые идут сразу после заголовков.

 У CSS есть несколько способов выбора элементов в зависимости от того, как они связаны друг с другом. Эти отношения выражаются с помощью комбинаторов следующим образом (A и B представляют любой селектор, показанный выше):

Название Синтаксис Выбирается
Список выбора A, B Любой элемент, соответствующий A и/или B
Потомок комбинатор A B Любой элемент, соответствующий B,
который является потомком элемента,
совпадающего с A (то есть дочерним
или дочерним по отношению к дочернему
элементу и т. Д.). комбинатор является
одним или несколькими пробелами
или двойными знаками
Детский комбинатор A > B Любой элемент, соответствующий B,
который является прямым потомком
элемента, соответствующего A
Смежный брат и
сестра комбинатор
A + B Любой элемент, соответствующий B,
который является следующим родственным
элементом элемента, соответствующего A
(то есть следующим потомком того же родителя)
Генеральный брат и
сестра комбинатор
A ~ B Любой элемент, соответствующий B,
который является одним из следующих родственных
элементов элемента, соответствующего A
(то есть одного из следующих потомков того же родителя)

Пример:

See the Pen
Комбинаторы
by Alla (@AllaJan)
on CodePen.

Несколько селекторов (множественные селекторы)

Суть в том, что можно поместить несколько селекторов, разделенных запятыми,  в одно правило CSS. Такая схема позволяет применить единый набор объявлений ко всем элементам, выбранным этими селекторами.

p, li, ul {
  font-size: 1.6em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Vollkorn, 'sans serif';
}

Каскад и наследование

Бывают ситуации, когда несколько правил CSS будут иметь селекторы, соответствующие одному и тому же элементу.

Какое правило «выигрывает» и в конечном итоге будет применено браузером к элементу?

Это контролируется механизмом, называемым каскадом.  Также выполнение правил связано с наследованием (когда определенные элементы получают некоторые значения свойств от своих родителей). 

Окончательный стиль элемента, который отображается на экране, может состоять из нескольких правил, указанных в разных местах кода. Эти заданные правила взаимодействуют сложным образом. Но вместе с тем, что такое взаимодействие делает CSS мощным, оно может сделать его чрезвычайно запутанным и трудным для чтения и отладки.

Каскад

CSS — это аббревиатура для каскадных таблиц стилей, которая указывает на важность понятия каскада. На самом базовом уровне это означает, что определяющее значение имеет порядок CSS-правил. То, какие селекторы являются приоритетными в каскаде, зависит от трех факторов (они перечислены в порядке веса — более ранние будут отменять последующие):

      1. Важность.
      2. Специфичность.
      3. Исходный порядок.

Важность

В CSS есть специальная синтаксическая возможность указать, что
определенная декларация будет всегда приоритетнее всех
остальных: !important.

Пример:

#menu {
  background-color: red;
  border: 1px solid black;
}

.bottom {
  background-color: gray;
  border: none !important;
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

Разберемся, как это работает:

      1. Третье правило color и padding значения были применены, но  backgroundcolor: blue; не работает. Почему? Как уже было сказано, правила, записанные позже, обычно переопределяют более ранние правила.
      2. Однако написанные по коду выше правила выигрывают, потому что идентификаторы/селекторы классов имеют более высокую специфичность, чем селекторы элементов.
      3. Оба элемента имеют class bottom, но у 2-го элемента также есть id menu. Поскольку идентификаторы id имеют  более высокую специфичность, чем class (! может быть только один элемент с каждым уникальным id-идентификатором на странице, но много элементов с одним и тем же class-селектором), мы получаем красный цвет фона. Черный border должен быть применен ко второму элементу, причем первый элемент получает серый фоновый цвет, а не border, как указано в классе.
      4. Второй элемент задает красный цвет фона, но без border. Почему? Из-за объявления во втором правиле !important после border: none. Это правило перевесит значение border из предыдущего правила, хотя его идентификатор имеет более высокую специфичность.

Примечание. Переопределить объявление !important можно только путем объявления позже другого !important правила с той же специфичностью позже или с более высокой спецификацией.

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

Правила применения конфликтующих объявлений и переопределения ранних более поздними (от более важных к менее приоритетным):

Важность селекторов

    • ‘!important’ – перекрывает все предыдущие стили
    • Inline-Style                                                        +1000
    • ID                                                                         + 100
    • Class/pseudo class/attribute                             + 10
    • Tag                                                                            + 1
    • Browser default                                                        0

Порядок применения CSS-стилей движком:

      1. Таблицы стилей пользователя (например, дефолтные стили браузера, когда не заданы другие стили).
      2. Стили внешних файлов и стили, прописанные внутри тега <style>, который содержится в <head>
      3. Inline стили, прописанные в середине HTML елемента.

Специфичность

Специфичность — это мера того, сколько элементов селектор может сопоставить. 

Важность селекторов (от более высокого уровня – к более низкому):

        • id
        • class
        • tag
        • атрибут
        • *
        • псевдо-элементы
        • псевдо-классы

В приведенном выше примере показано, что селекторы элементов имеют более низкую специфичность, поэтому селекторы классов у них выиграют. А селекторы идентификаторов имеют более высокую специфичность, чем классы. Перекрыть селекторы идентификаторов можно при помощи !important.

Примечание. Универсальный селектор ( *), комбинаторы ( +>, ~, ‘ «) и псевдо-класс отрицание ( :not) не влияют на специфичность.

Порядок

Как упомянуто выше, если несколько конкурирующих селекторов имеют одинаковую важность и специфику, то более поздние правила заменяют (переопределяют) более ранние правила. Например:

p {
  color: blue;
}

/* Это правило победит первое*/
p {
  color: red;
}

Замечание о правилах смешивания 

При рассмотрении всей этой каскадной теории и того, какие стили применяются к другим стилям, следует иметь в виду, что все это происходит на уровне свойств — свойства переопределяют другие свойства, но вы не получаете полные правила, переопределяющие другие правила. Когда несколько правил CSS соответствуют одному элементу, все они применяются к этому элементу. Только после этого оцениваются любые конфликтующие свойства, чтобы увидеть, какие отдельные стили победят другие.

Наследование

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

      • Наследование очень полезно, так как позволяет один раз задать базовый стиль (например, font-family и color), который будет наслеоваться всеми элементами на странице. При этом нет необходимости задавать стиль каждый раз для каждого элемента. При этом можно переопределить стиль для отдельных элементов, где это необходимо.
      • Также задав позиционирование элемента ( marginpaddingborder и background-image), можно сделать его не наследуемым. Представьте себе беспорядок в стиле/макете, который возникнет, если вы установите эти свойства для элемента контейнера и унаследуете их от каждого дочернего элемента, а затем придется отменить их все для каждого отдельного элемента!

Вы можете обратиться к справочнику по CSS — каждая отдельная страница свойств содержит сводную таблицу, со сведениями об этом элементе, в том числе о том, наследуется ли он или нет.

Контроль наследования

CSS предоставляет четыре специальных универсальных значения свойств для указания наследования:

inherit

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

initial

Устанавливает значение свойства, применяемое к выбранному элементу, таким же, как значение, установленное для этого элемента в таблице стилей браузера по умолчанию. Если в таблице стилей браузера по умолчанию значение не задано, а свойство естественным образом наследуется, то inherit вместо него устанавливается значение свойства .

unset

Сбрасывает свойство в его естественное значение. Это означает, что если свойство наследуется естественным образом, оно действует как inherit, иначе оно действует как initial.

revert

Возвращает свойство к значению, которое было бы у него, если бы текущий источник не применял к нему какие-либо стили. Другими словами, значение свойства устанавливается равным значению таблицы стилей пользователя для свойства (если оно установлено), в противном случае значение свойства берется из таблицы стилей браузера по умолчанию.

Примечаниеinitial и unset не поддерживаются в Internet Explorer.

Из них inherit часто наиболее полезен — он позволяет явно заставить элемент наследовать значение свойства от его родителя.

Сброс всех значений свойств

Сокращенное свойство CSS all можно использовать для применения одного из этих значений наследования ко (почти) всем свойствам одновременно. Его значение может быть любым одним из значений наследования (inherit, initialunset, или revert). Это удобный способ отменить изменения, внесенные в стили, чтобы вы могли вернуться к известной начальной точке перед началом новых изменений.

Свойства

В CSS более 300 различных свойств и почти бесконечное количество различных значений. Не все пары свойств и значений являются допустимыми. Для каждого свойства есть определенный список допустимых значений.

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

CSS значения и единицы

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

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

Числовые значения

Значения длины для указания, например, ширины элемента, отступов, толщины бордюра или размера шрифта, или целых чисел без единиц измерения для указания, например, относительной ширины, или количества повторов запуска анимации.

See the Pen
Числовые значения
by Alla (@AllaJan)
on CodePen.

В этой таблице заданы следующие свойства:

      • Установка marginpadding и border-width каждого абзаца до 10 пикселей, 15 пикселей и 3 пикселей соответственно. Одно значение для поля и отступа означает, что все четыре стороны установлены на одно и то же значение. Ширина границы устанавливается как часть значения для border сокращения.
      • Установка width для трех разных абзацев большего и большего значений пикселей, что означает, что чем ниже, тем шире поля.
      • Установка font-size для трех разных абзацев большего и большего значения пикселей, что означает, что чем больше вы продвигаетесь, тем больше текст. font-size относится к высоте каждого элемента письма (глифа).

Пиксели (px) называются абсолютными единицами, потому что они всегда будут иметь одинаковый размер независимо от любых других связанных настроек. Другие абсолютные единицы следующие:

      • q, mm, cm, in: Четверть миллиметра, миллиметр, сантиметр и дюйм;
      • pt, pc: Пункты ( 1 / 72 дюйма) или Picas (12 баллов).

Наиболее часто используются пиксели.

Существуют также относительные единицы измерения и определяются в зависимости от размера текущего элемента font-size или области просмотра :

      • em: 1em такой же, как размер шрифта текущего элемента. Базовое значение font-size по умолчанию,  предоставляемая веб-страницам браузерами до применения стиля CSS, составляет 16 пикселей. 1em для элемента по умолчанию составляет 16 пикселей. Но если элемент имеет родителя, то он унаследует размеры, заданные родителю. Поэтому 1em может иметь и другие значения. em являются наиболее распространенной относительной единицей, которую используют в веб-разработке.
      • ex, ch: Соответственно это высота строчной буквы x и ширина числа 0. Они не так часто используются или хорошо поддерживаются, как em.
      • rem: rem(Root em) работает точно так же, как и em, только он всегда будет равен размеру базового значения fontsize по умолчанию . Унаследованные размеры шрифта не окажут никакого влияния, поэтому это гораздо лучший вариант, чем em. Хотя, rems не работают в более старых версиях Internet Explorer (подробнее о поддержке между браузерами см. в разделе « Отладка CSS»).
      • vw, vh: Соответственно эти 1/100  ширины окна просмотра, и 1/100  высоты окна просмотра.  Не так широко поддерживаются, как em.

 Безразмерные величины

В CSS встречаются числовые значения без единиц измерения — это не всегда ошибка.  Таким способом можно полностью удалить элемент margin или padding из элемента, используя его без единиц измерения (0 — 0 равно 0). Значения обнулятся независимо от ранее установленных.

Высота линии без блока

Другой пример — line-height установка высоты каждой строки текста в элементе при поомощи единицы измерения для установки определенной высоты строки. Часто проще использовать значение без единиц измерения, которое действует как простой коэффициент умножения. Например:

p {
  line-height: 1.5;
}

Количество анимаций

CSS анимация позволяет анимировать элементы HTML на странице.  Простой пример, который заставляет абзац вращаться на 360 градусов при наведении: 

See the Pen
Абзац вращается
by Alla (@AllaJan)
on CodePen.

А вот пример более сложной анимации 3д, которую вы видели в заголовке записи:

See the Pen
3d animation
by Alla (@AllaJan)
on CodePen.

Проценты 

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

Цвета

Указание цветов фона, текста и т. д.

Есть много способов указать цвет в CSS, некоторые из которых были внедрены в последнее время.

Стандартная цветовая система, доступная в современных компьютерах, является 24-битной, что позволяет отображать около 16,7 миллионов различных цветов через комбинацию различных красных, зеленых и синих каналов с 256 различными значениями на канал (256 x 256 x 256 = 16,777,216).

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

Для преобразования между различными системами цветности, рассмотренными ниже, вам потребуется преобразователь цвета. В Интернете можно найти множество простых конвертеров, таких как HSL в RGB / RGB в HSL / Hex Color Converter 

1. Ключевые слова

Простейшие, самые старые типы цветов в CSS — это ключевые слова цвета. Это конкретные строки, представляющие определенные значения цвета. Например:

<p>Мой параграф с синим фоном</p>
p {
  background-color: blue;
}

2. Шестнадцатеричные значения

Наиболее известная цветовая система — это шестнадцатеричные цвета или шестнадцатеричные коды. Каждое шестнадцатеричное значение состоит из символа хеш/фунт (#), за которым следуют шесть шестнадцатеричных чисел, каждое из которых может принимать значение от 0 до f (что представляет 15) — так 0123456789abcdef. Каждая пара значений представляет один из каналов — красный, зеленый и синий — и позволяет нам указать любое из 256 доступных значений для каждого (16 x 16 = 256).

/* красный */
p:nth-child(1) {
  background-color: #ff0000;
}

/* синий */
p:nth-child(2) {
  background-color: #0000ff;
}

/* не имеет точного эквивалента ключевого слова */
p:nth-child(3) {
  background-color: #e0b0ff;
}

3. RGB

Значение RGB — это функция rgb(), которая задает три параметра, представляющие значения цветов в красномзеленом и синем каналах ( во многом так же, как и шестнадцатеричные значения). Разница с RGB в том, что каждый канал представлен не двумя шестнадцатеричными цифрами, а десятичным числом от 0 до 255.

/* красный red*/
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* синий blue */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* нет эквивалента в ключевых словах */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

4. HSL

Чуть менее хорошо, чем RGB, поддерживается модель HSL (не в старых версиях Internet Explorer), которая была реализована после большого интереса со стороны дизайнеров — вместо значений красного, зеленого и синего эта hsl() функция принимает значения оттенков, насыщенности  и яркости, которые используются для различения 16,7 миллионов цветов, но по другому алгоритму:

      1. Оттенок: базовый оттенок цвета.  Принимает значение от 0 до 360, представляющее углы в круглом цветовом круге.
      2. Насыщенность: насколько насыщен цвет? Принимает значение от 0 до 100%, где 0 — нет цвета (он будет отображаться как оттенок серого), а 100% — полная насыщенность цвета.
      3. Легкость: насколько светлый или яркий цвет? Принимает значение от 0 до 100%, где 0 не светится (будет полностью черным), а 100% — полностью светло (будет полностью белым).

5. RGBA и HSLA

RGB и HSL имеют соответствующие режимы — RGBA и HSLA, которые позволяют установить не только какой цвет нужно отобразить, но также его прозрачность. Их соответствующие функции принимают те же параметры плюс четвертое значение в диапазоне 0–1, которое устанавливает прозрачность или альфа-канал . 0 полностью прозрачен, а 1 полностью непрозрачен.

See the Pen
RGBA и HSLA
by Alla (@AllaJan)
on CodePen.

Прозрачные цвета используют для создания визуальных эффектов — смешивания фона, полупрозрачных элементов пользовательского интерфейса и т. д.

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

Указать прозрачность цвета можно через еще одно CSS-свойство opacity. Вместо установки прозрачности определенного цвета, это устанавливает прозрачность всех выбранных элементов и их дочерних элементов.  Пример:

See the Pen
opacity
by Alla (@AllaJan)
on CodePen.

7. Функции

Указание, например, фоновых изображений или градиентов фонового изображения. В программировании функция — это многократно используемая часть кода, которую можно запускать несколько раз для выполнения повторяющейся задачи с минимальными усилиями как разработчика, так и компьютера. Функции обычно ассоциируются с такими языками, как JavaScript, Python или C ++, но они также существуют в CSS как значения свойств. Мы уже видели функции в действии с rgb()hsl()и т.д .

Ссылки:

Введение в CSS;

Служба проверки W3C CSS проверяет правильность работы вашего CSS кода. 

См. ссылки, указанные во введении в HTML.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 332

Популярные записи