Все свойства CSS, которые нужны для создания сайта

0
366
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×
Photo by Sharon McCutcheon from Pexels

Возможно, вы только начинаете работать с CSS, а может, уже довольно опытны в этом деле. Но вы наверняка согласитесь, что количество свойств в CSS огромно. И, соответственно, заблудиться в них совсем не тяжело.

Но без некоторых CSS-свойств при создании сайта не обойтись, хотя и их не так просто выделить. Тем не менее, мы попытались это сделать.

Давайте погрузимся в свойства CSS, которые вы наверняка будете использовать при создании сайта.

1. display: flex;

Надо отцентрировать элемент? Если вы загуглите эту тему, вы наверняка найдете десятки возможных решений. Но в большинстве случаев вам нужно вот это:

.your-class-name {
  display: flex;
  justify-content: center;
  align-items: center;
}

display: flex; выстраивает элементы-потомки в горизонтальный ряд.

Совет: чтобы сделать вертикальный ряд, нужно добавить flex-direction: column;. Свойство flex-direction определяет главную ось. Значение по умолчанию — row.

justify-content: center; выравнивает элементы по основной оси. Это означает, что элемент в нашем коде будет отцентрирован по горизонтали. У justify-content могут быть разные значения. Например, при помощи justify-content: space-between можно распределить элементы по ряду, не оставляя отступов в начале и конце.

align-items управляет перпендикулярной осью, например, здесь элементы центрируются по вертикали.

Примечание редакции Techrocks. Рекомендуем почитать статью «CSS-свойство position: разбираемся с позиционированием элементов».

2. margin

Это свойство определяет расстояние между отдельными элементами.

.your-class-name {
  margin-top: 16px;
  margin-right: 12px;
  margin-bottom: 16px;
} 
// краткая запись
.your-class-name {
  margin: 16px 12px;
}

Можно указать отступы с каждой стороны при помощи margin-top, margin-right и т.д. Но можно указать и все вместе, в одном свойстве margin:

margin: {{ top }} {{ right }} {{ bottom }} {{ left }};

Если вы пропустите bottom, будет унаследовано значение top. Если не укажете left — унаследуется значение right.

Примечание редакции Techrocks. Рекомендуем почитать статью «Все, что вам нужно знать о свойстве margin в CSS».

3. padding

На первый взгляд кажется, что padding похож на margin. Синтаксис у них идентичный, и краткая запись тоже.

Зачем тогда нужен еще и какой-то padding?

Представьте, что у вас есть чемодан. Вы хотите написать на нем что-то, но чтобы надпись шла не прямо с верхнего левого угла. Вам хотелось бы сделать небольшой отступ от краев.

Вот для этого и нужен padding. Он задает отступ внутри элемента.

А вот если у вас есть два чемодана, и вы хотите, чтобы они не стояли вплотную друг к другу, вам пригодится margin.

4. background-color

Это свойство простое, но знать его абсолютно необходимо. С его помощью задается цвет фона. Вы можете применять его для большинства HTML-элементов.

background-color: blue;
background-color: #232323;
background-color: rgb(255, 255, 128);
background-color: rgba(255, 255, 128, 0.5);

Атрибуты могут варьироваться: можно указывать название цвета, его HEX-значение или RGB (и даже HSL).

Особый интерес представляет RGBA, поскольку позволяет указать не только цвет, но и прозрачность. Видели 0.5 в конце? Это означает, что элемент будет на 50% прозрачным.

5. color

color имеет много сходного с background-color. Единственная разница — это свойство указывается для текста. Все остальное одинаково, включая прозрачность.

6. opacity

Но прозрачным можно сделать не только текст, а вообще все, что угодно!

opacity: 0.1; // 10% видимости
opacity: 0.9; // 90% видимости

Это свойство пригождается при создании интересных эффектов и для оформления состояния отключения.

7. width

А здесь все не так просто. Чаще всего вам не понадобится фиксированная ширина элементов. Дизайн должен быть отзывчивым (адаптивным), а это достигается за счет внешних и внутренних отступов (margin и padding).

Но иногда какие-то размеры нужно зафиксировать. Например, когда вам нужно поставить значок с шириной в 24px.

Или вот эта статья. Попробуйте увеличить масштаб страницы. Вы заметите, что после определенного размера элементы смещаются. Это потому, что для страницы установлено свойство max-width.

8. height

Свойство height попроще, поскольку прокрутка страницы идет вверх и вниз. Но иногда и фиксированная высота элементов может пригодиться. Например — для хедера сайта.

Здесь также есть свои особые случаи — min-height и max-height.

Примечание редакции Techrocks. Рекомендуем почитать статью «CSS-свойства max-width, min-width, max-height и min-height: разбираем на примерах».

9. cursor: pointer;

Наведите курсор на любую кнопку или ссылку на этой странице. Видите, как стрелочка превращается в руку?

Это происходит благодаря свойству cursor: pointer;. Если с элементом можно что-то сделать (например, мы можем нажать на кнопку или ссылку), к нему стоит добавить это свойство.

10. font-size

Это простое свойство, которое служит для управления размером шрифтов. Единица размера бывают разными, но новички в CSS могут начать с абсолютных — px.

Немного освоившись, познакомьтесь с относительными единицами, в частности, rem. Вы сможете установить для своего сайта размер шрифта по умолчанию в px, а все остальные размеры шрифтов — в относительных единицах. Тогда они будут рассчитываться, исходя из базового значения.

Например, если базовое значение 16px, 2rem будет равно 32px.

Примечание редакции Techrocks. Рекомендуем почитать «Единицы измерения в CSS» и «Доводы в пользу применения rem в CSS».

11. font-family

Вероятно, вы хотели бы видеть на своем сайте разные шрифты. Google Fonts, например, очень неплохо выглядят. Вы запросто можете выбрать какой-нибудь из этих шрифтов, включив их в ваш index.html и добавив имя шрифта в font-family.

12. :hover

При помощи :hover можно задать разные эффекты, которые будут проявляться при наведении мыши на элемент.

.your-class-name:hover {
  cursor: pointer;
}

В этом примере при наведении на элемент курсор сменится на указатель (стрелочка сменится на руку).

Заключение

Возможно, вы удивитесь, но при помощи этих 12 свойств можно решить большинство задач, связанных с CSS сайта.

Естественно, все зависит от того, какой у вас сайт. Вероятно, вам придется изучить какие-то из этих свойств гораздо глубже. Но в целом их будет достаточно для создания вполне достойно выглядящего сайта.

Перевод статьи «All CSS Properties You Need to Know to Build a Website».