Руководство по сокращению CSS для новичков
Санкт-Ян против Доктор. Это всего лишь несколько примеров общепринятых сокращений, которые вы можете использовать при написании сообщения в блоге, открытки или текста. Сокращения помогут сэкономить место и время и избежать повторения длинных слов и фраз.
Подобное сокращение также существует в языке программирования CSS. Это может сэкономить время и место разработчиков и сделать кодовую базу более чистой, избегая дублирования. Не все свойства CSS можно записать сокращенно, но некоторые важные из них можно.
В этом посте мы определим, что такое сокращение CSS, а затем посмотрим, как использовать различные сокращенные свойства.
Что такое сокращение CSS?
Сокращение CSS – это группа свойств CSS, которые позволяют одновременно устанавливать значения нескольких свойств. Эти значения разделены пробелами. Например, свойство border является сокращением для свойств border-width, border-style и border-color. Итак, в CSS граница: 5 пикселей сплошной красный; задает границу шириной пять пикселей, сплошную и красную.
В дополнение к свойству CSS border, свойства margin, padding, background, font, animation, transition и flex имеют сокращенное обозначение. Давайте подробнее рассмотрим эти сокращенные свойства ниже.
Сокращение CSS Margin
Свойство поля является сокращением для следующих отдельных свойств:
- верхняя граница
- маржа справа
- край-низ
- маржа слева
Так что я мог написать от руки следующие объявления:
margin-top: 20px;
margin-right: 30px;
margin-bottom: 70px;
margin-left: 80px;
Или в одном объявлении с использованием сокращенного свойства поля:
margin: 20px 30px 70px 80px;
Порядок значений имеет значение. В приведенном выше примере они начинаются сверху и движутся по часовой стрелке. Помимо порядка имеет значение количество указанных значений.
- Если определено только одно значение, оно применяется ко всем сторонам элемента.
- Если определены два значения, то первое значение представляет собой верхнее и нижнее поля, а второе – правое и левое поля.
- Если определены три значения, первое значение представляет верхнее поле, второе – левое и правое, а четвертое – нижнее поле.
- Если определены четыре значения, они представляют собой верхнее, правое, нижнее и левое соответственно.
Давайте посмотрим на пример ниже.
Сокращение заполнения
Свойство padding является сокращением для следующих отдельных свойств:
- обивка
- отступ справа
- обивка-дно
- отступ слева
Так что я мог написать от руки следующие объявления:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
Или в одном объявлении с использованием сокращенного свойства background:
padding: 10px 20px 40px;
Правила о порядке и количестве значений для свойства margin применяются также и к свойству padding.
Вот пример ниже.
Сокращение фона CSS
Свойство background является сокращением для следующих отдельных свойств:
- фоновый цвет
- фоновая картинка
- фон-повтор
- фоновое приложение
- фоновая позиция
Свойства background-color и background-image устанавливают цвет фона и изображение элемента. Вы можете использовать свойство background-repeat, чтобы контролировать, как изображение повторяется или повторяется ли оно вообще, и свойство background-attachment, чтобы указать, является ли изображение фиксированным или прокручивается. Свойство background-position устанавливает, где на странице располагается фоновое изображение.
Так что я мог написать от руки следующие объявления:
background-color: #CCCCCC;
background-image: url(https://cdn.pixabay.com/photo/2017/03/15/15/36/outline-2146544_960_720.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
Или в одном объявлении с использованием сокращенного свойства background:
background: #CCCCCC url(https://cdn.pixabay.com/photo/2017/03/15/15/36/outline-2146544_960_720.png) no-repeat fixed right top;
При использовании сокращенного свойства вы должны поместить значения в указанном выше порядке: цвет, изображение, повторение, вложение, положение. Однако вам не нужно определять все эти свойства. Если значение отсутствует, сокращение будет по-прежнему применяться правильно, если порядок значений правильный. Если вы хотите использовать другое свойство фона, например свойство background-size, вы должны определить его отдельно.
Посмотрите на пример ниже.
Сокращение границ CSS
Свойство границы является сокращением для следующих индивидуальных свойств границы:
- ширина рамки
- стиль границы
- цвет границы
Так что я мог написать от руки следующие объявления:
border-width: 10px;
border-style: solid;
border-color: #AA88FF;
Или в одном объявлении с использованием сокращенного свойства background:
border: 10px solid #AA88FF;
Значение для свойства стиля границы должно быть определено, иначе граница не будет отображаться, но значения ширины и цвета не являются обязательными. Без этих значений линия будет отображаться черной и шириной около 3 пикселей. Вы также можете указать эти три свойства границы только для одной стороны элемента, используя border-top, border-right, border-bottom или border-left.
Давайте посмотрим на пример ниже.
Сокращение шрифтов CSS
Свойство font является сокращением для следующих отдельных свойств:
- стиль шрифта
- font-weight
- font-variant
- размер шрифта / высота строки
- семейство шрифтов
Свойство font-style определяет стиль текста; он может быть нормальным, курсивом, наклонным. Font-weight определяет вес текста и может иметь любое из следующих значений: нормальный, полужирный, полужирный, светлее или 100-900. С помощью свойства font-variant вы можете настроить отображение текста мелким шрифтом, чтобы все строчные буквы преобразовывались в прописные, но отображались меньшим размером шрифта.
Вы можете использовать свойство font-size, чтобы установить размер текста с ключевым словом, значением длины или процентом. Или вы можете вместо этого установить свойство line-height. Наконец, используя свойство font-family, вы можете определить несколько шрифтов на случай, если браузер не поддерживает ваш первый выбор. Рекомендуется сначала указать имя нужного вам семейного шрифта, а в конце указать общее имя семейства, например, «без засечек» или «курсив».
Я мог бы написать от руки следующие объявления:
font-style: oblique;
font-weight: 400;
font-variant: small-caps;
font-size: 24px;
font-family: Times, serif;
Или в одном объявлении с использованием сокращенного свойства background:
font: oblique 400 small-caps 24px Times, serif;
Значения свойств font-size и font-family должны быть указаны, иначе сокращение может не отображаться в некоторых браузерах. Если не указаны значения для font-weight, font-style или font-variant, то по умолчанию они будут нормальными.
Вы должны объявить значения font-size (и / или line-height) и font-family в указанном выше порядке. В противном случае порядок не имеет значения.
Давайте посмотрим на пример ниже.
Сокращение анимации CSS
Свойство анимации является сокращением для следующих отдельных свойств:
- продолжительность анимации
- имя-анимации
- анимация-задержка
- анимация-направление
- режим заливки анимации
- количество итераций анимации
- состояние воспроизведения анимации
- функция времени анимации
Требуются значения свойства animation-duration, которое указывает продолжительность анимационной последовательности, и свойства animation-name, определяющего тип анимации. Если другие свойства не указаны, для них будут установлены значения по умолчанию. Вот краткий обзор того, что делает каждое свойство.
Используя свойство animation-delay, вы можете указать, когда начинается анимация, используя миллисекунды или секунды, а также положительные или отрицательные значения. Свойство animation-direction определяет направление анимации. Используя функцию animation-fill-mode, вы можете применить стили анимации до или после воспроизведения анимации. Свойство animation-iteration-count указывает, сколько раз будет воспроизводиться анимация. С помощью свойства animation-play-state вы можете приостанавливать и возобновлять последовательность анимации. Наконец, функция тайминга анимации устанавливает темп анимации.
Чтобы узнать больше об этих свойствах и их возможных значениях, прочтите The Ultimate Guide to CSS Animation.
Я мог бы написать от руки следующие объявления:
animation-duration: 5s;
animation-name: example;
animation-delay: 2s;
animation-direction: alternate;
animation-fill-mode: normal;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: ease-out;
Или в одном объявлении с использованием сокращенного свойства background. Примечание: для свойств animation-fill-mode и animation-play-state заданы значения по умолчанию, поэтому я оставлю их в сокращении ниже:
animation: 5s example 2s alternate infinite ease-out;
Давайте посмотрим на пример ниже.
Сокращение перехода CSS
Свойство перехода является сокращением для следующих отдельных свойств:
- переходная собственность
- Продолжительность перехода
- временная функция перехода
- задержка перехода
Эти свойства аналогичны свойствам анимации, описанным выше. Свойство transition-delay указывает, когда начинается эффект перехода. Свойство transition-duration указывает время, необходимое для завершения эффекта перехода. Свойство перехода определяет имя свойства CSS, для которого предназначен эффект перехода. Так, например, если для этого свойства установлено значение «ширина», тогда эффект перехода будет иметь место, когда пользователь наводит курсор на элемент и его ширина начинает изменяться. Наконец, функция времени перехода устанавливает темп эффекта перехода.
Если вам интересно, когда использовать CSS-анимацию или свойство перехода, ознакомьтесь с разделом «Основное различие между CSS-анимациями и переходами».
Я мог бы написать от руки следующие объявления:
transition-property: background, color;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 60ms;
Или в одном объявлении с использованием сокращенного свойства background:
transition: background-color 1s ease-out 60ms;
Давайте посмотрим на пример ниже.
Сокращение CSS Flex
Свойство flex является сокращением для следующих отдельных свойств:
- гибкий рост
- гибко-усадочный
- гибкая основа
С помощью свойства flex-grow вы можете указать, насколько гибкий элемент будет расти относительно других гибких элементов или доступного пространства в гибком контейнере. Или вы можете указать гибкий элемент для сжатия с помощью свойства flex-shrink. Свойство flex-base устанавливает начальный размер гибкого элемента, который может быть в процентах или единицах длины.
Я мог бы написать от руки следующие объявления:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1em;
Или в одном объявлении с использованием сокращенного свойства background:
flex: 1 1 1em;
Свойство flex можно указать с помощью одного, двух или трех значений. Правила относительно количества значений и их порядка немного сложнее, чем правила для свойства margin или padding.
- Если есть одно значение, это может быть число или ключевое слово для установки свойства flex-grow. Предполагается, что значение свойства flex-shrink равно 1, а значение свойства flex-base равно 0.
- Если есть два значения, первое должно быть числом для установки свойства flex-grow. Второй должен быть либо числом, чтобы установить свойство flex-shrink, либо значением ширины для свойства flex-base. Двухзначный синтаксис
- Если есть три значения, то первое должно быть числом для свойства flex-grow, второе – числом для свойства flex-shrink, а третье – значением свойства flex-base.
Вы можете узнать больше о свойстве flex, прочитав Различия между Flexbox, CSS Grid и Bootstrap.
Давайте посмотрим на пример ниже.
Кодирование сокращенно
Сокращение CSS может помочь вам сэкономить время и место и сделать вашу кодовую базу более чистой. Хотя существуют правила, которые следует помнить о порядке и количестве определяемых вами значений, вы можете освоить их, немного потренировавшись.
Источник записи: https://blog.hubspot.com