5.1. Подсказки к каскадным таблицам стилей

В CSS существует множество свойств, но некоторые из них используются чаще других, так как они влияют на оформление текста, блоков, адаптивность и общую структуру сайта. Вот список самых часто используемых CSS-свойств с примерами:

1. color — Цвет текста

Задает цвет текста элемента.

p {
    color: #333; /* Тёмно-серый цвет текста */
}

2. background-color — Цвет фона

Задает цвет фона элемента.

div {
    background-color: lightblue; /* Голубой фон */
}

3. font-size — Размер шрифта

Определяет размер текста в элементе.

h1 {
    font-size: 24px; /* Размер текста заголовка */
}

4. font-family — Шрифт

Устанавливает тип шрифта для текста.

body {
    font-family: 'Arial', sans-serif; /* Шрифт Arial, запасной — sans-serif */
}

5. width и height — Ширина и высота

Задают ширину и высоту элементов.

div {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
}

6. margin — Внешние отступы

Устанавливает отступы вокруг элемента (вне границ элемента).

div {
    margin: 20px; /* Отступы со всех сторон по 20px */
}

p {
    margin: 10px 5px; /* Вертикальные отступы 10px, горизонтальные — 5px */
}

7. padding — Внутренние отступы

Устанавливает отступы внутри элемента (внутри границ).

div {
    padding: 15px; /* Внутренние отступы со всех сторон по 15px */
}

8. border — Граница

Задает рамку вокруг элемента.

div {
    border: 2px solid black; /* Черная граница толщиной 2px */
}

9. display — Тип отображения элемента

Определяет, как элемент будет отображаться (блочным, строчным и т.д.).

div {
    display: block; /* Элемент отображается как блочный */
}

span {
    display: inline; /* Элемент отображается как строчный */
}

10. position — Позиционирование

Определяет способ позиционирования элемента.

div {
    position: relative;
    top: 20px; /* Сдвиг вниз на 20px относительно его обычного положения */
}

aside {
    position: absolute;
    right: 0;
    top: 50px; /* Расположение относительно ближайшего родительского элемента с позиционированием */
}

11. flex — Гибкая вёрстка

Используется для создания гибких и адаптивных макетов.

.container {
    display: flex;
    justify-content: center; /* Центрирование элементов по горизонтали */
    align-items: center; /* Центрирование элементов по вертикали */
    height: 100vh;
}

.item {
    flex: 1; /* Элемент занимает всё свободное пространство */
}

12. grid — Сеточная вёрстка

Используется для создания сеточных макетов.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три колонки равной ширины */
    grid-gap: 10px; /* Отступы между элементами */
}

.item {
    background-color: #ddd;
}

13. text-align — Выравнивание текста

Устанавливает горизонтальное выравнивание текста внутри элемента.

h1 {
    text-align: center; /* Центрирование текста */
}

14. z-index — Слой элемента

Определяет порядок расположения элементов по оси Z (какой элемент будет выше другого).

div {
    position: absolute;
    z-index: 10; /* Элемент будет выше элементов с меньшим z-index */
}

15. overflow — Обработка переполнения

Управляет тем, как обрабатывать содержимое, которое выходит за пределы элемента.

div {
    overflow: hidden; /* Прячет содержимое, выходящее за пределы */
}

section {
    overflow: auto; /* Показывает прокрутку, если содержимого больше, чем контейнер */
}

16. box-shadow — Тень блока

Добавляет тень вокруг элемента.

div {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Горизонтальная и вертикальная тени */
}

17. opacity — Прозрачность

Изменяет прозрачность элемента.

img {
    opacity: 0.7; /* Элемент будет на 70% непрозрачным */
}

18. transition — Переходы

Позволяет сделать анимацию при изменении стилей элемента.

button {
    background-color: lightblue;
    transition: background-color 0.3s; /* Плавное изменение фона, также можно использовать значение "all 0.3s" - плавное изменение всего элемента */
}

button:hover {
    background-color: blue;
}

19. cursor — Курсор

Изменяет вид курсора при наведении на элемент.

a {
    cursor: pointer; /* При наведении будет показываться указатель */
}

20. transform — Преобразования

Позволяет изменять элемент (вращение, масштабирование, перемещение и т.д.).

div {
    transform: rotate(45deg); /* Поворот элемента на 45 градусов */
}

img {
    transform: scale(1.2); /* Увеличение элемента на 20% */
}

21. align-items и justify-content — Выравнивание в контейнере Flexbox

Используются для выравнивания элементов в гибкой вёрстке.

.container {
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
}

22. media (медиа-запросы) — Адаптивный дизайн

Используется для применения стилей в зависимости от размера экрана.

@media (max-width: 768px) {
    body {
        background-color: lightgray; /* Изменение фона на мобильных устройствах  . Если сайт больше 768 пикселей по ширине, то данное правило перестаёт работать*/
    }
}

23. max-width и min-width — Ограничение ширины

Ограничивают максимальную или минимальную ширину элемента.

img {
    max-width: 100%; /* Изображение не будет шире своего контейнера */
}

div {
    min-width: 300px; /* Минимальная ширина блока — 300px */
}

24. font-weight — Толщина шрифта

Определяет толщину текста.

p {
    font-weight: bold; /* Жирный шрифт */
}

25. visibility — Видимость элемента

Управляет видимостью элемента, но оставляет его место на странице.

div {
    visibility: hidden; /* Элемент невидим, но занимает место */
}