Возможно, вы только начинаете работать с 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».
