Загрузка...
CSS Properties Complete Reference
Этот полный справочник CSS предназначен для разработчиков, которые хотят иметь быстрый и точный доступ ко всем свойствам CSS. Руководство охватывает все аспекты каскадных таблиц стилей, включая расположение, модель коробки, границы, фон, типографику, Flexbox и Grid. Каждый раздел представлен в виде таблиц с синтаксисом, описанием, практическими примерами и поддержкой браузеров, что позволяет эффективно использовать свойства при разработке веб-страниц. Этот справочник станет незаменимым инструментом для быстрой проверки синтаксиса и возможностей CSS, обеспечивая уверенность в кросс-браузерной совместимости.
📊 Layout & Positioning Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: value | Управляет типом отображения элемента | display: flex | Все браузеры |
| position | position: value | Задает метод позиционирования | position: absolute | Все браузеры |
| top | top: value | Смещение по вертикали | top: 10px | Все браузеры |
| right | right: value | Смещение по горизонтали справа | right: 20px | Все браузеры |
| bottom | bottom: value | Смещение по вертикали снизу | bottom: 10px | Все браузеры |
| left | left: value | Смещение по горизонтали слева | left: 20px | Все браузеры |
| z-index | z-index: number | Порядок наложения | z-index: 999 | Все браузеры |
| float | float: value | Направление обтекания | float: left | Все браузеры |
| clear | clear: value | Очищает обтекание | clear: both | Все браузеры |
| overflow | overflow: value | Обработка переполнения | overflow: hidden | Все браузеры |
| overflow-x | overflow-x: value | Горизонтальное переполнение | overflow-x: scroll | Все браузеры |
| overflow-y | overflow-y: value | Вертикальное переполнение | overflow-y: auto | Все браузеры |
| visibility | visibility: value | Видимость элемента | visibility: hidden | Все браузеры |
| clip | clip: rect() | Обрезка содержимого | clip: rect(0,50px,50px,0) | Все браузеры |
| vertical-align | vertical-align: value | Вертикальное выравнивание | vertical-align: middle | Все браузеры |
📊 Box Model Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| width | width: value | Ширина элемента | width: 300px | Все браузеры |
| height | height: value | Высота элемента | height: 200px | Все браузеры |
| max-width | max-width: value | Максимальная ширина | max-width: 100% | Все браузеры |
| min-width | min-width: value | Минимальная ширина | min-width: 200px | Все браузеры |
| max-height | max-height: value | Максимальная высота | max-height: 500px | Все браузеры |
| min-height | min-height: value | Минимальная высота | min-height: 100px | Все браузеры |
| margin | margin: value | Внешний отступ | margin: 20px | Все браузеры |
| margin-top | margin-top: value | Верхний отступ | margin-top: 10px | Все браузеры |
| margin-right | margin-right: value | Правый отступ | margin-right: 15px | Все браузеры |
| margin-bottom | margin-bottom: value | Нижний отступ | margin-bottom: 10px | Все браузеры |
| margin-left | margin-left: value | Левый отступ | margin-left: 15px | Все браузеры |
| padding | padding: value | Внутренний отступ | padding: 15px | Все браузеры |
| padding-top | padding-top: value | Верхний внутренний отступ | padding-top: 10px | Все браузеры |
| padding-right | padding-right: value | Правый внутренний отступ | padding-right: 20px | Все браузеры |
| padding-bottom | padding-bottom: value | Нижний внутренний отступ | padding-bottom: 10px | Все браузеры |
| padding-left | padding-left: value | Левый внутренний отступ | padding-left: 20px | Все браузеры |
| box-sizing | box-sizing: value | Модель расчета коробки | box-sizing: border-box | IE8+ |
📊 Border & Outline Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| border | border: width style color | Полная граница | border: 2px solid #000 | Все браузеры |
| border-width | border-width: value | Толщина границы | border-width: 3px | Все браузеры |
| border-style | border-style: value | Стиль границы | border-style: dashed | Все браузеры |
| border-color | border-color: value | Цвет границы | border-color: red | Все браузеры |
| border-top | border-top: width style color | Верхняя граница | border-top: 1px solid blue | Все браузеры |
| border-right | border-right: width style color | Правая граница | border-right: 2px dotted red | Все браузеры |
| border-bottom | border-bottom: width style color | Нижняя граница | border-bottom: 3px double green | Все браузеры |
| border-left | border-left: width style color | Левая граница | border-left: 1px solid gray | Все браузеры |
| border-radius | border-radius: value | Скругление углов | border-radius: 10px | IE9+ |
| outline | outline: width style color | Контур элемента | outline: 2px solid red | Все браузеры |
| outline-offset | outline-offset: value | Смещение контура | outline-offset: 5px | Все браузеры |
📊 Background Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| background | background: color image repeat position size | Полный фон | background: #fff url() no-repeat center | Все браузеры |
| background-color | background-color: value | Цвет фона | background-color: #ff0000 | Все браузеры |
| background-image | background-image: url() | Фоновое изображение | background-image: url('bg.jpg') | Все браузеры |
| background-repeat | background-repeat: value | Повтор изображения | background-repeat: no-repeat | Все браузеры |
| background-position | background-position: value | Позиция изображения | background-position: center top | Все браузеры |
| background-size | background-size: value | Масштабирование изображения | background-size: cover | IE9+ |
| background-attachment | background-attachment: value | Поведение прокрутки | background-attachment: fixed | Все браузеры |
| background-blend-mode | background-blend-mode: value | Режим смешивания | background-blend-mode: multiply | Современные |
📊 Typography Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| font | font: style variant weight size/height family | Полный шрифт | font: bold 16px/1.5 Arial | Все браузеры |
| font-family | font-family: name | Семейство шрифтов | font-family: 'Arial', sans-serif | Все браузеры |
| font-size | font-size: value | Размер текста | font-size: 18px | Все браузеры |
| font-weight | font-weight: value | Толщина текста | font-weight: bold | Все браузеры |
| font-style | font-style: value | Стиль текста | font-style: italic | Все браузеры |
| line-height | line-height: value | Межстрочный интервал | line-height: 1.6 | Все браузеры |
| text-align | text-align: value | Выравнивание текста | text-align: center | Все браузеры |
| text-decoration | text-decoration: value | Украшение текста | text-decoration: underline | Все браузеры |
| text-transform | text-transform: value | Регист текста | text-transform: uppercase | Все браузеры |
| white-space | white-space: value | Обработка пробелов | white-space: nowrap | Все браузеры |
📊 Flexbox Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: flex | Включает flexbox | display: flex | IE10+ |
| flex-direction | flex-direction: value | Направление главной оси | flex-direction: column | IE10+ |
| justify-content | justify-content: value | Выравнивание по главной оси | justify-content: space-between | IE10+ |
| align-items | align-items: value | Выравнивание по перекрестной оси | align-items: center | IE10+ |
📊 Grid Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: grid | Включает grid | display: grid | IE10+ (-ms-) |
| grid-template-columns | grid-template-columns: values | Размеры колонок | grid-template-columns: 1fr 2fr | IE10+ (-ms-) |
| grid-template-rows | grid-template-rows: values | Размеры строк | grid-template-rows: 100px auto | IE10+ (-ms-) |
| grid-gap | grid-gap: row column | Промежутки между элементами | grid-gap: 20px 10px | IE10+ (-ms-) |
Quick Examples
css
CSS Code
/* Layout Example */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
/* Typography Example */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/* Animation Example */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}
---Рекомендации по работе с CSS:
- Всегда указывайте запасные шрифты в font-family
- Используйте относительные единицы (em, rem, %) для адаптивности
- Минимизируйте использование !important
- Проверяйте свойства в разных браузерах
- Используйте сокращенные записи для уменьшения размера файлов
- Оценивайте влияние анимаций и фильтров на производительность
- Проверяйте CSS через валидаторы
- Используйте CSS-переменные для удобного сопровождения кода
- Добавляйте префиксы для экспериментальных свойств
- Группируйте связанные свойства для удобства чтения кода
🧠 Проверьте Свои Знания
Готов к Началу
Reference Knowledge Check
Проверка знаний CSS-свойств.
3
Вопросы
70%
Для Прохождения
∞
Время
∞
Попытки
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху