CSS шпаргалка с примерами. Главные правила стиля для ваших сайтов.
- Содержание шпаргалки
- Синтаксис CSS и селекторы
- Визуальные правила
- CSS Margin Collapse: коробочная модель в CSS
- Отображение и позиционирование
- Цвета
- Шрифты
Синтаксис CSS и селекторы
Для привязки HTML-документа к внешним ресурсам, файлам CSS, используется элемент ссылки <link>.
Атрибуты:
href ─ указывает URL-адрес внешнего ресурса,
rel ─ указывает отношение связанного документа к текущему документу,
type ─ определяет тип связанного содержимого.
Как связать внешнюю таблицу стилей с атрибутами href, rel и type?
<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css">
Назначение CSS
CSS, или каскадные таблицы стилей ─ это язык, который используется в сочетании с HTML и настраивает внешний вид HTML-элементов.
CSS может определять стили элементов на странице и изменять макет и оформление сайта.
Запись кода CSS в отдельном файле
CSS-код можно записывать в отдельных файлах, чтобы отделить его от HTML-кода. Расширение для CSS-файлов ─ .css. Их можно связать с HTML-файлом, используя тег <link> в разделе <head>.
Как указать CSS в отдельном файле?
<head> <link href="style.css" type="text/css" rel="stylesheet"> </head>
Запись кода CSS в HTML-файле
Код CSS можно записать в HTML-файл, заключив код в теги <style>. Код, окружённый тегами <style>, будет расшифровываться как синтаксис CSS.
<head>
<style>
h1 {
color: blue;
}
</style>
</head>Запись кода CSS в HTML-элементах: встроенные стили
Стили CSS можно напрямую добавлять в HTML-элементы, используя атрибут style в открывающем теге элемента.
Каждое объявление стиля заканчивается точкой с запятой. Стили, добавленные таким образом, называют встроенными стилями.
<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>
Отделение HTML-кода от CSS-кода
Чаще всего код разметки содержимого страницы записывают в HTML-файлах, а код оформления внешнего вида страницы ─ в CSS-файлах. В результате можно упростить обслуживание кода и вносить любые изменения в содержимое или стили в отдельных файлах.
Селекторы классов и идентификаторов
Классы CSS можно повторно использовать и применять ко многим элементам.
Селекторы классов обозначаются точкой, за которой следует название класса.
Селекторы идентификаторов CSS должны быть уникальными и использоваться для оформления только одного элемента.
Селекторы идентификаторов обозначаются знаком хэша #, за которым следует имя идентификатора.
/* Selects all elements with class="column" */
.column {
}
/* Selects element with id="first-item" */
#first-item {
}Группы селекторов CSS
Для сопоставления нескольких селекторов с одним и тем же правилом CSS используйте список, разделённый запятыми.
В этом примере текст для h1 и h2 выделен красным цветом.
h1, h2 {
color: red;
}Цепочка селекторов
Селекторы CSS определяют набор элементов, к которым применяется набор правил CSS. Например, чтобы выбрать все <p> элементы, можно использовать для создания правил стиля селектор p.
Объединение селекторов в цепочки
CSS-селекторы могут быть объединены в цепочки, чтобы наборы правил применялись только к элементам, которые соответствуют всем критериям. Например, для выбора элементов <h3>, имеющих класс section-heading, можно использовать селектор h3.section-heading.
/* Select h3 elements with the section-heading class */
h3.section-heading {
color: blue;
}
/* Select elements with the section-heading and button class */
.section-heading.button {
cursor: pointer;
}Селекторы типов CSS
Селекторы типов CSS используются для сопоставления всех элементов данного типа или имени тега. В отличие от синтаксиса HTML, мы не включаем угловые скобки при использовании селекторов типов для имён тегов. При использовании селекторов типов элементы сопоставляются независимо от уровня их вложенности в HTML.
/* Selects all <p> tags */
p {
}Селекторы классов CSS
Селектор классов CSS сопоставляет элементы на основе содержимого их атрибута класс. Для выбора элементов, имеющих класс со значением атрибута calendar-cell, перед ним необходимо поставить точку.
.calendar-cell {
color: #fff;
}HTML-атрибуты с несколькими значениями
Некоторые атрибуты HTML могут иметь несколько значений, тогда между атрибутами ставится пробел.
<div class="value1 value2 value3"></div>
Специфика селектора
Специфичность ─ это система ранжирования, которая используется при наличии нескольких конфликтующих значений свойств, указывающих на один и тот же элемент.
При определении того, какое правило применить, выигрывает селектор с наибольшей специфичностью. Наиболее специфичным типом селектора является селектор идентификаторов, за которым следуют селекторы классов, а затем селекторы типов.
В этом примере будет реализован только color: blue. Он имеет селектор идентификаторов, тогда как color: red имеет селектор типов.
h1#header {
color: blue;
} /* implemented */
h1 {
color: red;
} /* Not implemented */Селекторы идентификаторов CSS
Селектор идентификаторов CSS сопоставляет элементы на основе содержимого их атрибута id. Значения атрибута id должны быть уникальными во всем DOM. Для выбора элемента, имеющего значение id атрибута job-title, перед ним необходимо поставить символ #.
#job-title {
font-weight: bold;
}CSS-потомок селектора
Комбинатор потомков селектора CSS используется для сопоставления элементов, происходящих от другого соответствующего селектора. Между каждым селектором и потомственным селектором ставится пробел. Все соответствующие элементы выбираются независимо от уровня вложенности в HTML.
div p { }
section ol li { }Визуальные правила
Объявления CSS
Объявление CSS ─ это пара «свойство – значение». Объявления CSS используются для задания свойств стиля и построения правил для отдельных элементов или их групп.
Имя свойства и значение разделяются двоеточием, и все объявление должно заканчиваться точкой с запятой.
/* CSS declaration format: property-name: value; */ /* CSS declarations */ text-align: center; color: purple; width: 100px;
Размер шрифта
Свойство CSS font-size используется для задания размеров текста.
Значениями размера шрифта могут быть различные единицы измерения или типы, например, пиксели.
font-size: 30px;
Цвет фона
Свойство CSS background-color управляет цветом фона элементов.
background-color: blue;
Правило !important
Правило !important используется в объявлениях для переопределения свойств любых других объявлений и игнорирования специфики селектора.
Правило !important гарантирует, что определённое объявление всегда применяется к соответствующим элементам, даже если в коде другого объявления есть противоречия.
При конфликте правил в коде, всегда побеждает строчка, в конце которой дописано !important. К примеру, если вы в файле style.css изменили цвет ссылки навигационного меню на зелёный, а ссылка по прежнему выглядит голубой как на всех страницах сайта, вам необходимо в конце этой недействующей строчки написать !important, и приоритет в задании цвета будет именно за этой строчкой.
Рекомендуется по возможности не использовать !important, так как это считается плохой практикой с точки зрения написания чистого и красивого кода.
#column-one {
width: 200px !important;
}
.post-title {
color: blue !important;
}Непрозрачность
Свойство CSS opacity можно использовать для управления прозрачностью элемента.
Значение свойства варьируется от 0 (прозрачный) до 1 (непрозрачный).
opacity: 0.5;
Вес шрифта
Свойство CSS font-weight можно использовать для задания веса (жирности) текста. Предоставленным значением может быть ключевое слово, такое как bold или normal.
font-weight: bold;
Выравнивание текста
Свойство CSS text-align можно использовать для настройки выравнивания текста.
Этому свойству можно присвоить следующие значения: left, right или center.
text-align: right;
Наборы правил CSS
Набор правил CSS содержит один или несколько селекторов и одно или несколько объявлений. Селектор, которым в этом примере является h1, указывает на HTML-элемент.
Объявлениями в этом примере являются color: blue и text-align: center. Это готовый стиль элемента со свойством и значением.
Наборы правил ─ это основные строительные блоки таблицы CSS.
h1 {
color: blue;
text-align: center;
}Настройка цвета текста на переднем плане в CSS
Используя свойство color, можно задать цвет текста элемента на переднем плане.
Значением может быть допустимое название цвета, поддерживаемое в CSS, например green или blue.
Кроме того, для настройки цвета можно использовать 3-значный или 6-значный цветовой код, такой как #22f или #2a2aff.
p {
color : #2a2aff ;
}
span {
color : green ;
}URL-адреса ресурса
В CSS функция url() используется для передачи URL-адресов сайтов. Они могут быть применены к нескольким свойствам, таким как background-image.
background-image: url("../resources/image.png");Фоновое изображение
Свойство CSS background-image задаёт фоновое изображение элемента.
URL-адрес изображения в качестве значения свойства должен быть указан в синтаксисе url(«moon.jpg»).
background-image: url("nyan-cat.gif");Семейство шрифтов
Свойство CSS font-family используется для указания шрифта в наборе правил. Шрифты должны быть доступны браузеру для корректного отображения либо на компьютере, либо должны быть представлены как веб-шрифт.
Если значение шрифта недоступно, браузеры будут отображать шрифт по умолчанию.
При использовании названия шрифта, состоящего из нескольких слов, рекомендуется заключать их в кавычки.
h2 {
font-family: Verdana;
}
#page-title {
font-family: "Courier New";
}Ключевые слова для названия цвета
Ключевые слова с названием цвета можно использовать для задания значений свойств цвета для элементов в CSS.
h1 {
color: aqua;
}
li {
color: khaki;
}CSS Margin Collapse: коробочная модель в CSS
Коробочная модель в CSS ─ это фундаментальная концепция для составления HTML-страниц.
Box model представляет собой контейнер, который обволакивает каждый HTML элемент. Он состоит из полей (margin), границ (border), отступов (padding) и фактического содержимого (content).
Свёртывание полей CSS происходит, когда верхние и нижние поля блоков объединяются в одно поле, равное наибольшему значению поля отдельного блока.
Сворачивание полей происходит только с вертикальными полями, но не с горизонтальными.
/* The vertical margins will collapse to 30 pixels
instead of adding to 50 pixels. */
.block-one {
margin: 20px;
}
.block-two {
margin: 30px;
}Ключевое слово CSS auto
Значение auto может использоваться со свойством margin для горизонтального центрирования элемента внутри его контейнера. Свойство margin будет принимать ширину элемента и разделит оставшееся пространство поровну между левым и правым полями.
div {
margin: auto;
}Работа с overflow
Если содержимое слишком велико для своего контейнера, свойство CSS overflow будет определять, как браузер справится с проблемой.
По умолчанию для него будет установлено значение visible, и содержимое будет занимать дополнительное место.
Он также может быть установлен в hidden или на scroll, что сделает переполненный контент доступным через полосы прокрутки в исходном контейнере.
small-block {
overflow: scroll;
}Максимальная / минимальная высота и ширина
CSS свойства min-width и min-height можно использовать для установки минимальной ширины и минимальной высоты блоков элементов.
CSS свойства max-width и max-height можно использовать для задания максимальной ширины и высоты блоков элементов.
/* Any element with class "column" will be at most 200 pixels wide, despite the width property value of 500 pixels. */
.column {
max-width: 200px;
width: 500px;
}Свойство visibility
Свойство CSS visibility используется для того, чтобы сделать hidden объекты невидимыми для пользователя, не удаляя их со страницы. Это гарантирует, что структура и организация страницы останутся неизменными.
.invisible-elements {
visibility: hidden;
}Свойство box-sizing коробочной модели CSS
Box model CSS ─ это блок, который обтекает HTML-элемент и управляет дизайном и вёрсткой.
Свойство box-sizing определяет, какой аспект окна определяется свойствами height и width. Значение этого свойства по умолчанию равно content-box, которое отображает фактический размер элемента, включая поле содержимого; но не отступы и границы.
Значение border-box, с другой стороны, отображает фактический размер элемента, включая поле содержимого, отступы и границы.
.container {
box-sizing: border-box;
}CSS box-sizing: border-box
Значение свойства box-sizing для элемента border-box напрямую соответствует общему размеру отображаемого элемента, включая отступы и границы со свойствами height и width.
Значение свойства box-sizing по умолчанию равно content-box. Это значение border-box рекомендуется использовать, когда необходимо изменить размер padding и border, но не только содержимого.
Например, значение border-box вычисляет размер элемента height следующим образом: height = content height + padding + border.
#box-example {
box-sizing: border-box;
}Отображение и позиционирование
Свойство CSS z-index
Свойство CSS z-index определяет, как далеко назад или как далеко вперёд элемент будет отображаться на веб-странице, когда он перекрывает другие элементы.
Свойство z-index использует целочисленные значения, которые могут быть положительными или отрицательными.
Элемент с наибольшим значением z-index будет находиться на переднем плане, в то время как элемент с наименьшим значением z-index будет находиться сзади.
//`element1` will overlap `element2`
.element1 {
position: absolute;
z-index: 1;
}
.element2 {
position: absolute;
z-index: -1;
}Фиксированное позиционирование в CSS
Позиционирование в CSS предоставляет дизайнерам и разработчикам опции для позиционирования HTML-элементов на веб-странице.
Позиционирование может быть установлен в static, relative, absolute или fixed.
Когда позиция CSS имеет значение fixed, она устанавливается / закрепляется в определённом месте страницы. Фиксированный элемент остаётся неизменным независимо от прокрутки.
Панель навигации ─ отличный пример элемента, которому часто присваивается значение position: fixed;, позволяющего пользователю прокручивать интернет-страницу и по-прежнему получать доступ к панели навигации.
#navbar {
position: fixed;
}Свойство CSS display
Свойство CSS display определяет тип блока рендеринга для элемента. Наиболее распространёнными значениями для этого свойства являются block, inline и inline-block.
Элементы блочного уровня занимают всю ширину своего контейнера с разрывами строк до и после, и их высоту и ширину можно регулировать вручную.
Встроенные элементы занимают как можно меньше места, расположены горизонтально, и их ширину или высоту нельзя регулировать вручную.
Элементы встроенного блока могут располагаться рядом друг с другом, а их ширину и высоту можно регулировать вручную.
.container1 {
display: block;
}
.container2 {
display: inline;
}
.container3 {
display: inline-block;
}CSS position: absolute
Значение absolute у свойства position позволяет элементу игнорировать родственные элементы и вместо этого позиционироваться относительно ближайшего родительского элемента, который позиционируется с помощью relative или absolute.
Значение absolute полностью удаляет элемент из потока документов. Используя атрибуты позиционирования top, left, bottom и right, элемент можно расположить в любом месте, как и ожидалось.
.element {
position: absolute;
}CSS position: relative
Значение relative свойства CSS position позволяет расположить элемент относительно того места, где он изначально находился на веб-странице.
Свойства смещения можно использовать для определения фактического положения элемента относительно его исходного положения.
Без свойства offset это объявление никак не повлияет на его позиционирование, оно будет действовать как значение по умолчанию static для свойства position.
.element {
position: relative;
}Свойство CSS float
Свойство CSS float определяет, как далеко влево или как далеко вправо должен располагаться элемент внутри его родительского элемента.
Значение left перемещает элемент в левую часть его контейнера, а значение right перемещает элемент в правую часть его контейнера.
Для свойства float необходимо указать размер контейнера width, иначе элемент займёт всю ширину содержащего его элемента.
/* The content will float to the left side of the container. */
.left {
float: left;
}
/* The content will float to the right side of the container. */
.right {
float: right;
}Свойство CSS clear
Свойство CSS clear определяет, как должен вести себя элемент, когда он сталкивается с другим элементом внутри того же содержащего элемента.
Обычно clear используется в сочетании с элементами, имеющими свойство CSS float. Это определяет, с каких сторон разрешено размещать плавающие элементы.
/*This determines that no other elements within the same containing element are allowed to float on the left side of this element.*/
.element {
clear: left;
}
/*This determines that no other elements within the same containing element are allowed to float on the right side of this element.*/
.element {
clear: right;
}
/*This determines that no elements within the same containing element are allowed to float on either side of this element.*/
.element {
clear: both;
}
/*This determines that other elements within the same containing element are allowed to float on both side of this element.*/
.element {
clear: none;
}Цвета
Ключевые слова для названия цвета
Ключевые слова с названием цвета можно использовать для задания значений свойств цвета для элементов в CSS.
h1 {
color: aqua;
}
li {
color: khaki;
}Альфа-значения цвета CSS
Альфа-значения определяют прозрачность цветов в CSS.
Альфа-значения могут быть установлены как для цветов RGB, так и для цветов HSL с помощью rgba() и hsla() и предоставления четвёртого значения, представляющего альфа. Значения альфа-кода могут варьироваться от 0.0 (полностью прозрачного) до 1.0 (полностью непрозрачного).
Значение CSS transparent также можно использовать для создания полностью прозрачного элемента.
.midground {
background-color: rgba(0, 255, 0, 0.5);
}
.foreground {
background-color: hsla(34, 100%, 50%, 0.1);
}
.transparent {
color: transparent;
}Шестнадцатеричные цвета CSS
Цвета CSS могут быть представлены в шестнадцатеричной системе счисления.
Цифры шестнадцатеричной системы могут представлять шестнадцать различных значений, содержащих символы 0-9 и a-f.
Шестнадцатеричные цвета состоят из 6 символов ─ каждая группа из двух представляет значение от 0 до 255 для красного, зелёного или синего. Например, #ff0000 ─ это все красное, без зелёного и без синего.
Когда оба символа всех трёх цветов повторяются, шестнадцатеричные цвета могут быть сокращены до трёх значений, поэтому #0000ff также могут быть представлены как #00f.
.red {
color: #ff0000;
}
.short-blue {
color: #00f;
}CSS HSL цвета
Цвета CSS могут быть объявлены с помощью цветовой системы HSL с использованием hsl() синтаксиса. Этот синтаксис содержит три значения: оттенок (само значение цвета), насыщенность (интенсивность) и яркость.
Значения оттенков варьируются от 0 до 360, а значения насыщенности и яркости представлены в процентах.
.light-blue {
background-color: hsl(200, 70%, 50%);
}CSS rgb() цвета
Цвета CSS могут быть объявлены с помощью цветов RGB, используя rgb() синтаксис.
rgb() должно быть указано три значения, представляющих красный, зелёный и синий. Эти значения могут варьироваться от 0 до 255.
.hot-pink {
color: rgb(249, 2, 171);
}
.green {
color: rgb(0, 255, 0);
}Шрифты
Свойство CSS font-weight
Свойство CSS font-weight определяет, какой толщины должны быть символы текста.
Для задания толщины текста можно использовать числовые значения. Диапазон числового масштаба этого свойства составляет от 100 до 900 и допускает только значения, кратные 100.
Значение по умолчанию ─ normal, а числовое значение по умолчанию ─ 400. При любом значении меньше 400 текст будет выглядеть светлее, чем по умолчанию, в то время как любое числовое значение больше 400 будет выделяться жирным шрифтом.
В приведённом примере все <p> элементы будут выделены более жирным шрифтом.
/* Sets the text as bolder. */
p {
font-weight: 700;
}Свойство CSS font-style
Свойство CSS font-style определяет стиль шрифта, в котором будет отображаться текст.
Он принимает italic в качестве значения для установки стиля шрифта курсив.
.text {
font-style: italic;
}CSS правило @font-face
Правило CSS @font-face позволяет импортировать внешние шрифты или файлы шрифтов непосредственно в таблицы стилей.
Расположение файла шрифта должно быть указано в правиле CSS, чтобы файлы можно было загружать из этого расположения. Это правило также позволяет добавлять локально размещённые шрифты, используя относительный путь к файлу вместо веб-URL.
@font-face {
font-family: 'Glegoo';
src: url('../fonts/Glegoo-Regular.ttf') format('truetype');
}Резервные шрифты CSS
В свойстве CSS font-family может быть объявлено несколько шрифтов в порядке предпочтения. В этом случае шрифты, следующие за начальным шрифтом, называются резервными шрифтами.
Если начальное значение свойства font-family не удаётся загрузить на веб-страницу, будут использоваться резервные шрифты.
/* Here `Arial` is the fallback font for <p> tags */
p {
font-family: "Helvetica", "Arial";
}Свойство CSS line-height
Свойство CSS line-height определяет расстояние по вертикали между строками текста. Оно принимает как числа без единиц измерения в качестве отношения (например, 2), так и числа, заданные единицей измерения в качестве значений (например, 12px), но оно не принимает отрицательные числа.
Число без единиц ─ это абсолютное значение, которое вычисляет высоту строки как отношение к размеру шрифта, а номером единицы измерения может быть любая допустимая единица CSS (например, пиксели, проценты, ems, rems и т.д.).
Чтобы задать для line-height одного из <p> элементов значение 10px, можно использовать данное объявление CSS.
p {
line-height: 10px;
}Связывающий шрифты
Связывающие шрифты позволяют пользователю использовать веб-шрифты в документе. Их можно импортировать в HTML-документ с помощью тега <link>. Как только URL веб-шрифта будет помещён в атрибут href, импортированный шрифт можно будет использовать в объявлении CSS.
<head> <link href="https://fonts.googleapis.com/css?family=Droid%20Serif" rel="stylesheet"> </head>
