Все свойства CSS, которые нужны для создания сайта
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Возможно, вы только начинаете работать с CSS, а может, уже довольно опытны в этом деле. Но вы наверняка согласитесь, что количество свойств в CSS огромно. И, соответственно, заблудиться в них совсем не тяжело.
Но без некоторых CSS-свойств при создании сайта не обойтись, хотя и их не так просто выделить. Тем не менее, мы попытались это сделать.
Давайте погрузимся в свойства CSS, которые вы наверняка будете использовать при создании сайта.
1. display: flex;
Надо отцентрировать элемент? Если вы загуглите эту тему, вы наверняка найдете десятки возможных решений. Но в большинстве случаев вам нужно вот это:
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-top , margin-right и т.д. Но можно указать и все вместе, в одном свойстве margin :
Если вы пропустите 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 .
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 можно задать разные эффекты, которые будут проявляться при наведении мыши на элемент.
В этом примере при наведении на элемент курсор сменится на указатель (стрелочка сменится на руку).
Заключение
Возможно, вы удивитесь, но при помощи этих 12 свойств можно решить большинство задач, связанных с CSS сайта.
Естественно, все зависит от того, какой у вас сайт. Вероятно, вам придется изучить какие-то из этих свойств гораздо глубже. Но в целом их будет достаточно для создания вполне достойно выглядящего сайта.
Руководство по CSS
Данный справочник по CSS перечисляет все стандартные свойства, псевдоклассы и псевдоэлементы, @-правила, единицы измерения и селекторы CSS в алфавитном порядке. Справочник позволит вам быстро найти подробную информацию о каждом из них. Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства CSS3. Также включает в себя краткое руководство DOM-CSS / CSSOM.
Заметьте, что определения CSS-правил полностью (ASCII) текста-ориентированы, в то время как определения правил DOM-CSS / CSSOM объектно-ориентированы.
Смотрите также Mozilla CSS Extensions (en-US) для Gecko-специфичных свойств с префиксом -moz ; и WebKit CSS Extensions (en-US) для WebKit-специфичных свойств. Смотрите Обзор CSS-префиксов для разных браузеров от Peter Beverloo для всех свойств с префиксами.
Базовый синтаксис правил
Имейте в виду, что любая синтаксическая ошибка в задании правил сделает некорректным всё правило.
Стили
. где selectorlist: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
Смотрите списки селекторов, псевдоэлементов и псевдоклассов ниже.
Примеры
strong color: red; > div.menu-bar li:hover > ul display: block; > @-правила
Так как у них есть много различных структурных форматов, смотрите нужный синтаксис @-правил.