Произвольный цвет
Произвольный цвет в CSS — это способ задания цвета, который не ограничивается стандартными названиями цветов (например, red, blue). Вместо этого, можем использовать различные цветовые функции и форматы для создания любого цвета.
Основные цветовые форматы в CSS:
- RGB (Red, Green, Blue): Использует комбинацию красного, зелёного и синего цветов. Пример: rgb(255, 0, 0) для красного цвета.
- RGBA: Добавляет непрозрачность к RGB. Пример: rgba(255, 0, 0, 0.5) для полупрозрачного красного цвета.
- HSL (Hue, Saturation, Lightness): Задаёт цвет по тону, насыщенности и светлоте. Пример: hsl(0, 100%, 50%) для красного цвета.
- HSLA: Добавляет непрозрачность к HSL. Пример: hsla(0, 100%, 50%, 0.5) для полупрозрачного красного цвета.
Использование произвольных цветов:
- Собственные свойства (переменные): Позволяют хранить и использовать произвольные цвета в разных частях кода. Например, можно создать переменную --primary-color и использовать её для разных элементов.
- Цветовые функции: Например, mix() позволяет смешивать два цвета с определённым весом.
Базовые селекторы
Селектор определяет как должен выглядеть фрагмент. Все записи строятся по одной системе (селектор {свойство: значение})
- селектор элемента
- классы
- идентификаторы
- универсальный селектор
Селекторы элемента
Выбирают все указанные элементы, стоит допустим p (параграф), p будет применяться ко всем элементам, где есть тэг p, если мы укажем условно p .green, то будет применяться селектор к Параграфу в селекторе green.
Стилевые классы
- Позволяют задать стиль произвольных элементов. Чтобы css понимал, что перед ним идет класс в имени селектора, то вначале ставится точка.
- Классы допустимо комбинировать с элементами.
Пример: .div.block {color:red;}
он будет работать только к элементам div block, к другим не будет, даже с классом block. - Класс не должен начинаться с цифры, содержать русские буквы, но допустимо использовать дефис и подчеркивание, класс можно начать с дефиса и подчеркивания, классы чувствительны к регистру (маленькие и большие буквы воспринимаются неодинаково)
Элементы типа body и section не требуют точки, так как они являются селекторами по тегам. Напротив, .title — это селектор по классу, где точка используется для выбора элементов с классом title.
Идентификаторы
Определяет уникальное имя элемента.
При описании вначале указывается символ #block и пишется имя элемента, в html пишется (div id="block")
В отличие от класса каждый идентификатор должен быть уникален, должен встречаться только один раз.
Можем сочитать идентификатор и класс в одном элементе, при этом стиль для идентификатора всегда имеет более высокий приоритет чем для класса.
HTML CSS
<div id="block" #block {color: red;}
class="block">...</div> .block {color: blue};
В таком случае будет использоваться красный цвет.
Универсальный селектор
Позволяет установить стилевые правила для всех html элементов сразу.
Для обозначения применяется символ * {font-weight: normal;}
таким образом элементы с жирностью теряют свойство.
Применяется для сброса CSS, цель сброса приведения стилей разных браузеров в один вид. Универсальный селектор всегда пишется выше селекторов, как например:
*{margin: 0;}
header {
}
Это нужно чтобы сперва обнулить, а потом переопределить значение свойства.