Данный справочник предоставляет подробное описание всех CSS свойств с максимально упрощенными примерами, для более легкого понимания работы свойства.
Свойства CSS по группам:
flexbox
Анимация
Внешний и внутренний отступы
Позиционирование
Размер
Рамка и контур
Списки
Таблицы
Текст
Тени и прозрачность
Трансформация
Фон
Шрифт
Другое
flexbox
Свойство
Описание
CSS
align-content
Задаёт вертикальное выравнивание flex-элементов для flex-контейнеров с многострочным содержимым.
3
align-items
Вертикальное выравнивание flex-элементов внутри flex-контейнера.
3
align-self
Вертикальное выравнивание flex-элемента.
3
flex
Определяет ширину, сжатие и растяжение для flex-элемента.
3
flex-basis
Указывает ширину для flex-элемента.
3
flex-direction
Направление расположения flex-элементов.
3
flex-flow
Направление расположения и возможность переноса для flex-элементов.
3
flex-grow
Определяет коэффициент растяжения flex-элемента.
3
flex-shrink
Определяет коэффициент сжатия flex-элемента.
3
flex-wrap
Определяет возможность переноса flex-элементов.
3
justify-content
Горизонтальное выравнивание flex-элементов.
3
order
Определяет порядок вывода flex-элементов.
3
Анимация
Свойство
Описание
CSS
@keyframes
Позволяет создавать анимацию.
3
animation
Позволяет установить несколько или все значения свойств animation в одном объявлении.
3
animation-delay
Определяет, когда запустится анимация.
3
animation-direction
Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах.
3
animation-duration
Определяет сколько понадобится времени, чтобы закончить 1 цикл анимации.
3
animation-fill-mode
Задаёт стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания).
По умолчанию CSS анимация не влияет на элемент до тех пор, пока анимация не запуститься, во время паузы и после её завершения. Это и позволяет переопределить свойство animation-fill-mode.
3
animation-iteration-count
Определяет сколько раз анимация должна будет проигрываться.
3
animation-name
Определяет имя для @keyframes.
3
animation-play-state
Указывает будет анимация проигрываться или будет в режиме паузы.
3
animation-timing-function
Определяет кривую скорости для анимации.
3
backface-visibility
Определяет, должна ли быть видна задняя сторона элемента или нет.
3
Внешний и внутренний отступы
Свойство
Описание
CSS
margin
Задает внешние отступы для элемента.
1
margin-bottom
Задает нижний внешний отступ для элемента.
1
margin-left
Задает левый внешний отступ для элемента.
1
margin-right
Задает правый внешний отступ для элемента.
1
margin-top
Задает верхний внешний отступ для элемента.
1
padding
Устанавливает внутренние отступы в элементе.
1
padding-bottom
Задает нижний отступ(внутреннее поле) для элемента.
1
padding-left
Задает левый отступ(внутреннее поле) для элемента.
1
padding-right
Задает правый отступ(внутреннее поле) для элемента.
1
padding-top
Задает верхний отступ(внутреннее поле) для элемента.
1
Позиционирование
Свойство
Описание
CSS
bottom
Указывает направление смещения позиционированного элемента от нижнего края.
2
clear
Указывает с какой стороны элемента не допускаются плавающие элементы.
1
clip
Определяет видимую часть абсолютно позиционированных элементов.
2
display
Указывает, как будет отображаться элемент в браузере.
1
float
Определяет будет ли элемент плавающим.
1
left
Указывает направление смещения позиционированного элемента от левого края.
2
position
Определяет метод позиционирования элементов.
2
right
Указывает направление смещения позиционированного элемента от правого края.
2
top
Указывает направление смещения позиционированного элемента от верхнего края.
2
visibility
Определяет, является ли элемент видимым.
2
z-index
Указывает порядок расположения элементов по оси Z.
2
Размер
Свойство
Описание
CSS
height
Устанавливает фиксированную высоту.
1
max-height
Указывает максимальную фиксированную высоту.
2
max-width
Указывает максимальную фиксированную ширину.
2
min-height
Указывает минимальную фиксированную высоту.
2
min-width
Указывает минимальную фиксированную ширину.
2
overflow
Определяет, что предпринять, если содержимое элемента превосходит размер области элемента.
2
overflow-x
Указывает, обрезать или нет левый/правый край содержимого — если оно переполняет доступную область элемента для его содержания.
3
overflow-y
Указывает, обрезать или нет верхний/нижний край содержимого — если оно переполняет доступную область элемента для его содержания.
3
resize
Указывает, может ли размер элемента изменяться пользователем.
3
width
Устанавливает фиксированную ширину.
1
Рамка и контур
Свойство
Описание
CSS
border
Позволяет использовать основные свойства границ в одном объявлении.
1
border-bottom
Позволяет использовать значения основных свойств для нижней границы рамки в одном объявлении.
1
border-bottom-color
Задает цвет для нижней границы рамки.
1
border-bottom-left-radius
Позволяет сделать округлую границу нижнего левого угла.
3
border-bottom-right-radius
Позволяет сделать округлую границу нижнего правого угла.
3
border-bottom-style
Определяет стиль для нижней границы рамки.
1
border-bottom-width
Определяет ширину для нижней границы рамки.
1
border-color
Задает цвет для границ рамки элемента.
1
border-image
Позволяет использовать изображение в качестве рамки.
3
border-left
Позволяет использовать значения основных свойств для левой границы рамки в одном объявлении.
1
border-left-color
Задает цвет для левой границы рамки.
1
border-left-style
Определяет стиль для левой границы рамки.
1
border-left-width
Определяет ширину для левой границы рамки.
1
border-radius
Позволяет изменить форму углов.
3
border-right
Меняет внешний вид правой границы рамки.
1
border-right-color
Задает цвет для правой границы рамки.
1
border-right-style
Определяет стиль для правой границы рамки.
1
border-right-width
Задает ширину для правой границы рамки.
1
border-style
Задает стиль для границ рамки элемента.
1
border-top
Меняет внешний вид верхней границы рамки.
1
border-top-color
Задает цвет для верхней границы рамки.
1
border-top-left-radius
Позволяет сделать округлую границу верхнего левого угла.
3
border-top-right-radius
Позволяет сделать округлую границу верхнего правого угла.
3
border-top-style
Определяет стиль для верхней границы рамки.
1
border-top-width
Определяет ширину для верхней границы рамки.
1
border-width
Задает ширину для границ рамки элемента.
1
outline
Создает внешнюю границу вокруг элемента.
2
outline-color
Определяет цвет внешней границы.
2
outline-offset
Сдвигает внешнюю границу на заданное расстояние от края элемента.
3
outline-style
Указывает стиль для внешней границы.
2
outline-width
Указывает ширину для внешней границы.
2
Списки
Свойство
Описание
CSS
list-style
Управляет маркером в списках.
1
list-style-image
Заменяет маркеры списков на изображения.
1
list-style-position
Определяет расположение маркера относительно пункта списка.
1
list-style-type
Указывает вид маркера в списке.
1
Таблицы
Свойство
Описание
CSS
border-collapse
Определяет будут ли границы рамки объединены в одну.
2
border-spacing
Определяет расстояние между границами смежных ячеек и общей рамкой таблицы.
2
caption-side
Указывает расположение заголовка таблицы.
2
empty-cells
Регулирует видимость пустых ячеек в таблице.
2
table-layout
Задает алгоритм использования макета таблицы.
2
Текст
Свойство
Описание
CSS
color
Изменяет цвет текста.
1
direction
Определяет направление написания текста.
2
letter-spacing
Контролирует расстояние между символами в тексте.
1
line-height
Определяет межстрочный интервал(интерлиньяж).
1
quotes
Определяет тип кавычек для встроенных цитат.
2
text-align
Указывает способ выравнивания содержимого по горизонтали.
1
text-decoration
Добавляет некоторые элементы декорирования к тексту.
1
text-indent
Определяет отступ первой строки в тексте элемента.
1
text-overflow
Указывает, что должно произойти, когда текст переполняет содержащий элемент.
3
text-transform
Контролирует использование строчных и прописных букв в тексте.
1
vertical-align
Определяет вертикальное выравнивание в элементе.
1
white-space
Определяет способ обработки пробелов внутри элемента.
1
word-break
Определяет правила переноса для не-CJK сценариев.
3
word-spacing
Определяет ширину пробелов между словами.
1
word-wrap
Позволяет прерывать длинные слова для переноса на другую строку.
3
Тени и прозрачность
Свойство
Описание
CSS
box-shadow
Добавляет эффект отбрасывания тени к элементу.
3
opacity
Устанавливает уровень прозрачности элемента.
3
text-shadow
Создает тень для текста.
3
Трансформация
Свойство
Описание
CSS
perspective
Определяет, на сколько пикселей удален 3D элемент от точки обзора.
3
perspective-origin
Определяет, где располагается 3D элемент на осях x и y.
3
transform
Применяет 2D или 3D преобразование к элементу.
3
transform-origin
Позволяет изменить позицию преобразованных элементов.
3
transform-style
Определяет, как вложенные элементы будут отображаться в трехмерном пространстве.
3
transition
Управляет эффектом трансформации.
3
transition-delay
Указывает, когда должен начаться эффект трансформации.
3
transition-duration
Указывает продолжительность трансформации.
3
transition-property
Указывает название CSS свойства, для которого будет применен эффект трансформации.
3
transition-timing-function
Задает кривую скорости для эффекта трансформации.
3
Фон
Свойство
Описание
CSS
background
Устанавливает несколько или все значения свойств фона в одном объявлении.
1
background-attachment
Указывает будет ли фоновое изображение фиксированным.
1
background-clip
Определяет область в элементе, для которой задается фон.
3
background-color
Устанавливает цвет фона для элемента.
1
background-image
Устанавливает фоновое изображение в элементе.
1
background-origin
Указывает область позиционирования для фонового изображения.
3
background-position
Устанавливает начальное место для фонового изображения.
1
background-repeat
Задает, как фоновое изображение будет повторяться на экране.
1
background-size
Указывает размер для фонового изображения.
3
Шрифт
Свойство
Описание
CSS
font
Изменяет стандартный вид текста.
1
@font-face
Позволяет использование любого шрифта на странице.
3
font-family
Указывает шрифт или семейство шрифтов для текста.
1
font-size
Указывает размер для шрифта.
1
font-size-adjust
Контролирует размер неосновных шрифтов.
3
font-stretch
Регулирует ширину текста.
3
font-style
Позволяет изменять стиль текста.
1
font-variant
Конвертирует строчные буквы в прописные уменьшенного размера.
1
font-weight
Задает ширину символов текста.
1
Другое
Свойство
Описание
CSS
box-sizing
Позволяет заставить определенные элементы заполнять область определенным способом.
3
column-count
Разделяет элемент на колонки.
3
column-gap
Задает расстояние между колонками элемента.
3
column-rule
Свойство column-rule позволяет указать значения свойств column-rule-* (ширину, стиль и цвет) в одном объявлении.
3
column-rule-color
Определяет цвет границы между колонками.
3
column-rule-style
Определяет стиль границы между колонками.
3
column-rule-width
Указывает ширину границы между колонками.
3
columns
Позволяет использовать значения свойств column-width и column-count в одном объявлении.
3
column-span
Указывает элементу количество колонок для обхвата.
3
column-width
Определяет ширину колонок.
3
content
Определяет содержимое для псевдо-элементов ::before и ::after.
2
counter-increment
Увеличивает значение счетчика.
2
counter-reset
Устанавливает начальное значение счетчика.
2
cursor
Изменяет вид курсора мыши.
2
page-break-after
Определяет наличие или отсутствие разрыва страницы после заданного элемента.
2
page-break-before
Определяет наличие или отсутствие разрыва страницы перед заданным элементом.
2
page-break-inside
Определяет наличие или отсутствие разрыва страницы внутри элемента.
2
Запись стилей в теге style
Основная проблема использования атрибутов для определения стилей — их перегруженность. Часто разметка HTML содержит очень много элементов, а с добавлением стилей кода становится намного больше, что плохо сказывается на чтении разметки.
Вторая проблема — исправление стилей. Для этого необходимо сначала найти нужный элемент в коде, а потом отредактировать его стили. Таких элементов на странице может быть 10, 20, 100. А для одноимённых тегов придётся записывать стили отдельно для каждого элемента.
Возникает естественное желание иметь все стили в одном месте, где можно было бы их быстро редактировать. Таким решением является использование тега <style>, внутри которого могут располагаться все необходимые стили.
Возьмём пример из прошлого урока:
<div>
Этот текст будет с размером шрифта 20 пикселей
<p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
</div>
Чтобы избавиться от атрибутов, добавим тег style и укажем, что для тега <div> используется шрифт размером в 20 пикселей.
<style>
div {
font-size: 20px;
}
</style>
<div>
Этот текст будет с размером шрифта 20 пикселей
<p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
</div>
Таким же образом можно указать, что у параграфа будет размер шрифта 10 пикселей.
<style>
div {
font-size: 20px;
}
p {
font-size: 10px;
}
</style>
<div>
Этот текст будет с размером шрифта 20 пикселей
<p>Вложенный параграф будет иметь размер шрифта 10 пикселей</p>
</div>
Внутри тега <style> использовалась конструкция вида:
имя_тега {
свойство: значение;
}
Всё, что было записано до открывающей скобки { называется селектор. Селекторы — правила, по которым браузер определяет к какому элементу нужно добавить стили. С некоторыми из селекторов мы познакомимся чуть позже. В примерах выше используются селекторы по тегу, то есть стили будут применяться ко всем элементам с тегом, указанном в качестве селектора
/* Для всех элементов div будет установлен размер шрифта 20px */
div {
font-size: 20px;
}
Добавьте в редактор параграф и, используя тег style, установите размер шрифта в 10 пикселей.
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Теги W3.CSS (этикетки и знаки)
❮ Назад
Следующая ❯
Теги:
Сделанный
Новый!
Подробнее позже!
Метки как знаки:
Фалкон-Ридж-Паркуэй
ОСТАНОВКА! ОСТОРОЖНО!
Классы тегов W3.CSS
W3.CSS предоставляет один класс для тегов, этикеток и знаков:
Класс
Определяет
тег w3
Прямоугольная черная бирка/бирка
Бирки, этикетки и знаки
В мире W3. CSS нет реальной разницы между тегом, меткой или знаком.
Прямоугольные теги
Класс w3-tag создает прямоугольный тег (метку или знак).
Цвет по умолчанию черный:
Статус: Готово
Пример
Статус: Готово
Попробуйте сами »
Цветные метки
Используйте цвет 9 w3- класс для изменения цвета тега:
Новинка!
Еще позже!
Пример
Новинка!
Подробнее позже!
Попробуйте сами »
Размеры тегов
По умолчанию тег наследует размер своего контейнера.
Размер w3- Классы
(w3-крошечный, w3-маленький, w3-большой, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-большой)
можно использовать для изменения размера тега:
6
6
6
66
66
66
66
66
Вы можете добавить дополнительный отступ к большим тегам:
Пример
66 66
Попробуйте сами »
Буквенные теги
A
U
грамм
U
С
T
Пример
A U G U S T
Попробуйте сами »
С
А
л
Е
Пример
S A L E
Попробуйте сами »
Знаки
Знаки — это не что иное, как большие теги.
Лондонский зоопарк
Пример
Лондонский зоопарк
Попробуйте сами »
Дорожные знаки
Falcon Ridge Parkway
Пример
Сокол
Ridge Parkway
Попробуйте самостоятельно »
Большие знаки
W3- Размер Классы могут быть использованы для демонстрации больших знаков:
в случае аварийной аварийной работы . : БЕГИТЕ К черту!
Пример
В СЛУЧАЕ
ЧРЕЗВЫЧАЙНАЯ СИТУАЦИЯ:
БЕГИТЕ КАК ПРЯМО!
Попробуйте сами »
49,99
Пример
49,99
3 900 »
Закругленные знаки
Классы w3-round- size можно использовать для добавления закругленных углов к знаку:
НЕ ДЫШАТЬ
ПОД ВОДОЙ
Пример
НЕ
ДЫШАТЬ
ПОД ВОДОЙ
Попробуйте сами »
Вращение тегов для поворота знака CSS
9000 :
ОСТАНОВКА
Пример
STOP
Попробуйте сами »
Примечание: transform:rotate() не работает в IE 9и ранее.
Вращающиеся метки
Класс w3-spin можно использовать для вращения знака на 360 градусов:
ОСТАНОВКА
Пример
STOP
Попробуйте сами »
❮ Предыдущая
Далее ❯
NEW
Мы только что запустили Видео W3Schools
Узнать
COLOR PICKER
КОД ИГРЫ
Играть в игру
Лучшие учебники
Учебник по HTML Учебник по CSS Учебник по JavaScript Учебник How To Учебник по SQL Учебник по Python Учебник по W3.CSS Учебник по Bootstrap Учебник по PHP Учебник по Java Учебник по C++ Учебник по jQuery
1902 902
Справочник по HTML Справочник по CSS Справочник по JavaScript Справочник по SQL Справочник по Python Справочник по W3. CSS Справочник по Bootstrap Справочник по PHP Цвета HTML Справочник по Java Справочник по Angular Справочник по jQuery
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены. W3Schools использует W3.CSS.
Как использовать пользовательский HTML и CSS
В некоторых из наших шаблонов есть возможности персонализировать содержимое, добавляя код HTML и CSS. Будь то настройка стиля ваших карточек или добавление мультимедиа во всплывающие окна, вот список полезных тегов HTML и свойств CSS, которые помогут вам.
В этой статье
Полезные теги HTML
Полезные свойства CSS
Полезные теги HTML
Теги
HTML часто используются для обтекания текста, чтобы придать ему особый стиль или изменить его семантическое значение. Например, при правильном использовании теги заголовков могут улучшить доступность, поскольку такие технологии, как программы чтения с экрана, используют их для определения наиболее важных фрагментов текста.
Существуют также теги HTML для добавления определенных элементов, таких как гиперссылки и изображения.
Элементы текста
Тег HTML
Что это
Как использовать
Заголовки — от самого важного к наименее важному
Обтекание текста заголовка. Например.
Заголовок 1
или
Неупорядоченные/маркированные
и упорядоченные/нумерованные списки
Обтекание элементов списка. Например.
<ул>
Элемент 1
Элемент 2
Элементы списка внутри
или
См. выше
Оформление текста
Тег HTML
Что это
Как использовать
или
Оба текста выделяются жирным шрифтом, но также выделяют текст как «важный»
Обтекание необходимого текста. Может использоваться внутри других тегов HTML. Например.
Это важный абзац.
или
В обоих случаях текст выделяется курсивом, но также выделяет текст как «выделенный»
Обтекание необходимого текста. Может использоваться внутри других тегов HTML. Например.
Это выделенный абзац.
Другие элементы HTML
Тег HTML
Что это
Как использовать
Одиночный разрыв строки
Сам по себе, не требует закрывающего тега
<час>
Горизонтальная линия
Сам по себе, не требует закрывающего тега
<а>
Гиперссылка
Оберните текст, который должен быть связан, указав URL-адрес с атрибутом href . Например.
Определяет секцию или отдел. Может использоваться для переноса других элементов HTML для добавления идентификаторов, классов или встроенных стилей
.
Оберните другое содержимое и добавьте классы или стили. Например.
<дел>
Заголовок 1
Абзац здесь
<диапазон>
Встроенный контейнер, который можно использовать для оформления определенного фрагмента текста.
Дополнительную информацию см. в нашем справочном документе
Обтекание текста и добавление стилей. Например.
отрицательные значения для этих стран.
Изображение
Включите атрибут src с URL-адресом изображения и укажите высоту и/или ширину. Не имеет закрывающего тега. Например.
<видео>
Видео
Оберните тег с URL-адресом видео и укажите высоту и/или ширину. Не имеет закрывающего тега. Например.
<видео>
Полезные свойства CSS
CSS — это язык, используемый для описания того, как должны отображаться элементы HTML, от макета до стиля, который меняет цвет, размер и многое другое. Эти свойства можно добавить к определенным элементам с помощью встроенных тегов стиля или путем таргетинга на HTML-элементы, классы и идентификаторы в автономном элементе стиля .
Например, если мы хотим покрасить один заголовок в красный цвет, мы можем использовать встроенный тег стиля:
Заголовок 1
Если мы хотим окрасить заголовок 1 в зеленый цвет, а абзацы в синий, мы можем использовать элемент стиля:
Заголовок 1
Это абзац
Это другой абзац
<стиль>
ч2 {
цвет: зеленый;
}
п {
цвет синий;
}
Свойства CSS, которые вы можете использовать, и то, что они делают, зависит от типа элемента HTML.
Свойство CSS
Что он делает
Как использовать
цвет
Для текстовых элементов изменяет цвет текста
Используйте либо именованные цвета, либо форматы HEX, RGB/RGBA или HSL/HSLA
размер шрифта
Изменяет размер шрифта
Определено в px , % , em или rem Узнайте больше о rems здесь
стиль шрифта
Изменяет стиль шрифта
Чаще всего обычный или курсив
высота строки
Изменяет высоту строки
Определено в px , % , em или rem Узнайте больше о rems здесь
выравнивание по тексту
Изменяет выравнивание текста
Чаще всего слева , справа или по центру
цвет фона
Изменяет цвет фона элемента
Используйте либо именованные цвета, либо форматы HEX, RGB/RGBA или HSL/HSLA
Как правильно задать вопрос:
Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
CSS нет реальной разницы между тегом, меткой или знаком.
CSS 
Будь то настройка стиля ваших карточек или добавление мультимедиа во всплывающие окна, вот список полезных тегов HTML и свойств CSS, которые помогут вам.
Например.
Может использоваться внутри других тегов HTML. Например.
Например.
Не имеет закрывающего тега. Например.
