CSS Тир

Основы CSS

CSS (Cascading Style Sheets) - это язык стилей, который определяет, как HTML-элементы должны отображаться на странице.

Цвет текста

Для изменения цвета текста используйте свойство color:

color: blue;        /* Название цвета */
color: #FF0000;    /* HEX-код */
color: rgb(255,0,0); /* RGB */

Фон элемента

Для изменения фона элемента используйте свойство background-color:

background-color: lightblue;

Размер шрифта

Для изменения размера шрифта используйте свойство font-size:

font-size: 16px;   /* В пикселях */
font-size: 1em;    /* Относительно родителя */
font-size: 100%;   /* В процентах */

Жирность текста

Для изменения жирности текста используйте свойство font-weight:

font-weight: bold;   /* Жирный */
font-weight: normal; /* Обычный */
font-weight: 600;    /* Числовое значение */

Выравнивание текста

Для выравнивания текста используйте свойство text-align:

text-align: left;    /* По левому краю */
text-align: center;  /* По центру */
text-align: right;   /* По правому краю */
text-align: justify; /* По ширине */

Отступы

CSS предоставляет два типа отступов:

• margin - внешние отступы
• padding - внутренние отступы

margin: 10px;          /* Все стороны */
margin: 10px 20px;     /* Верх/низ и лево/право */
margin: 5px 10px 15px 20px; /* Верх, право, низ, лево */

padding: 10px;         /* Аналогично margin */

Границы

Для добавления границ используйте свойство border:

border: 1px solid black; /* Толщина стиль цвет */
border-radius: 5px;    /* Скругление углов */

Тени

CSS позволяет добавлять тени к элементам и тексту:

/* Тень блока */
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

/* Тень текста */
text-shadow: 1px 1px 2px #000;

Псевдоклассы

Псевдоклассы позволяют задавать стили для особых состояний элементов:

a:hover { color: red; }    /* При наведении */
a:active { color: green; }  /* При нажатии */
a:visited { color: purple; } /* Посещенная ссылка */

Flexbox

Flexbox - современный способ расположения элементов:

.container {
  display: flex;
  justify-content: center; /* Выравнивание по главной оси */
  align-items: center;    /* Выравнивание по поперечной оси */
}