Быстрая и практичная шпаргалка по CSS от Toptal

Опубликовано: 2022-03-11

Каскадные таблицы стилей, или сокращенно CSS, — это язык таблиц стилей, написанный на языке разметки. CSS определяет представление, внешний вид и элементы форматирования веб-документов, такие как макет, цвета и шрифты.

Синтаксис CSS является исчерпывающим, и не всегда легко знать точный синтаксис или знать все доступные свойства CSS и соответствующие значения. Чтобы помочь разработчикам и дизайнерам CSS, Toptal создал краткое справочное руководство и предложил его сообществу для бесплатной загрузки. Справочное руководство по CSS включает в себя синтаксис CSS, наиболее важные селекторы, свойства, размеры и единицы измерения, а также другую полезную информацию по CSS в кратком и информативном формате. Мы надеемся, что шпаргалка по CSS окажется для вас ценным ресурсом.

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

Нажмите здесь, чтобы скачать шпаргалку по CSS

Шпаргалка по CSS

Синтаксис		Коробчатая модель
/* Комментарии */ @тип СМИ { селектор { стоимость имущества; } } Примечание. Тип носителя не является обязательным.
Встроенный стиль <тег>
Встроенный стиль <голова> <тип стиля="текст/CSS"> селектор { свойство: значение; } </стиль> </голова>
Внешняя таблица стилей <голова> <link rel="таблица стилей" тип = "текст/css" href = "style.css" /> </голова>		Коробки
		поле	верхняя граница край справа нижняя граница поле слева

Селекторы		набивка	обивка padding-right обивка padding-left
*	Все элементы
ярлык	Все элементы тега	граница	верхняя граница граница справа нижняя граница пограничный левый
ярлык *	Все элементы внутри тега
тег тег2	tag2 элемента внутри тега	цвет границы	граница-верхний цвет граница правого цвета граница-нижний-цвет граница левого цвета
тег, тег2	Все элементы tag и tag2
тег > тег2	tag2 является потомком тега	бордюрный стиль	граница-верхний стиль граница справа стиль нижняя граница стиля пограничный левый стиль
тег + тег2	тег2, которому предшествует тег
.сорт	Элементы с классом class	ширина рамки	граница-верхняя ширина граница справа ширина граница-нижняя-ширина граница слева ширина
тег.класс	Все теги с классом 'класс'
#я бы	Элемент с идентификатором 'id'	Размер и цвета
идентификатор тега #	Тег с идентификатором 'id'	Относительные размеры	эм \| бэр \| бывший \| ч фольксваген \| вч \| vмин \| vмакс \| %
Псевдоселекторы
: активный	Добавляет стиль к активному элементу	Абсолютные размеры	см \| мм \| в пикс \| пт \| ПК
:после	Добавляет содержимое после элемента
:до	Содержание объявления перед элементом	Цвета	Шестнадцатеричный #ff00ff
:Первый ребенок	Добавляет стиль к первому потомку		RGB RGB(255,0,255)
:первое письмо	Добавляет стиль к первому символу	Позиционирование
:первая строка	Добавляет стиль к первой строке	позиция	абсолютный \| фиксированный \| родственник \| статический \| наследовать
: фокус	Добавляет стиль к сфокусированному элементу
:наведите	Добавляет стиль, когда мышь находится над	плавать	слева \| право \| нет \| наследовать
:связь	Добавляет стиль к непосещенной ссылке
: посетил	Добавляет стиль к посещенной ссылке	в правом верхнем углу, Нижняя левая	Устанавливает смещение от края
Текст
семейство шрифтов	Указывает семейство шрифтов	Чисто	слева \| право \| оба \| нет \| наследовать
размер шрифта	Задает размер шрифта
стиль шрифта	нормальный \| курсив \| наклонный \| наследовать	отображать	Определяет размещение элемента в потоке документов

вариант шрифта	нормальный \| мелкие капиталы \| наследовать	переполнение	видимый \| скрытый \| прокрутить \| авто \| наследовать
шрифт -масса	нормальный \| жирный \| смелее \| зажигалка \| интервал (100- 900) \| наследовать
		видимость	видимый \| скрытый \| коллапс \| наследовать
цвет	Устанавливает цвет текста
высота линии	нормальный \| инт \| % \| наследовать	z-индекс	авто \| инт \| наследовать
выравнивание текста	слева \| право \| центр \| оправдать \| наследовать	Габаритные размеры
		высота	авто \| инт \| % \| наследовать
текст- украшение	нет \| подчеркнуть \| надчеркивание \| линейный \| мигать \| наследовать	максимальная высота	нет \| инт \| % \| наследовать
		Максимальная ширина	нет \| инт \| % \| наследовать
отступ текста	инт \| % \| наследовать	минимальная высота	инт \| % \| наследовать
текст- трансформировать	нет \| капитализировать \| верхний регистр \| нижний регистр \| наследовать	минимальная ширина	инт \| % \| наследовать
		ширина	авто \| инт \| % \| наследовать
вертикальный -выровнять	инт \| % \| базовый \| суб \| супер \| топ \| текст вверху посередине \| дно \| текст внизу \| наследовать	Другой
		задний план	Формат: фон (цвет) (изображение) (повторить) (позиция)
белый -пространство	нормальный \| сейчас \| предварительно \| предварительная линия \| предварительная упаковка\| наследовать
		курсор	Установите тип курсора
межсловный интервал	нормальный \| длина \| наследовать	Цитаты	Установить тип кавычек