✨ Полезные стенографические свойства Css

В этой статье мы рассмотрим наиболее полезные и часто используемые свойства Css, которые помогут нам повысить производительность.

Сокращенные свойства — это свойства CSS, которые позволяют одновременно задавать значения нескольких других свойств CSS. Используя стенографические свойства, вы можете писать более краткие (и часто более читабельные) таблицы стилей, экономя время и энергию.

Спецификация CSS определяет сокращенные свойства для группировки определения общих свойств, действующих на одну и ту же тему. Например, свойство CSS background — это сокращенное свойство, которое может определять значения background-color, background-image, background-repeat и background-position. Аналогично, наиболее распространенные свойства, связанные со шрифтом, можно определить с помощью сокращения font, а различные поля вокруг коробки можно определить с помощью сокращения margin.

Вот 5 самых полезных свойств CSS-скоростей

Свойство сокращения FONTS

Перед:

 font-style: italic;
 font-weight: bold;
 font-size: 18px;
 font-family: 'Bree Serif', serif;
Войти в полноэкранный режим Выход из полноэкранного режима

После:

 font: italic bold 18px Bree Serif, sans-serif;
Войти в полноэкранный режим Выйти из полноэкранного режима

Свойство сокращения для BACKGROUND

До:

 background-color: white;
 background-image: url(images/background.jpg);
 background-repeat: no-repeat;
 background-position: top right;
Войти в полноэкранный режим Выйти из полноэкранного режима

После:

 background: white url(images/background.jpg) no-repeat top right;
Войти в полноэкранный режим Выйти из полноэкранного режима

Свойство сокращения для MARGIN

До:

 margin-top: 10px;
 margin-right: 4px
 margin-bottom: 10px;
 margin-left: 4px;
Войти в полноэкранный режим Выход из полноэкранного режима

После:

margin: 10px 4px 10px 4px;

Свойство сокращения для LIST

До:

 list-style-type: circle;
 list-style-position: inside;
 list-style-image: url(pointer.jpg);
Войти в полноэкранный режим Выход из полноэкранного режима

После:

list-style: circle inside url(pointer.jpg);

Войти в полноэкранный режим Выход из полноэкранного режима

Свойство сокращения для BORDER

До:

  border-width: 1px;
  border-style: solid;
  border-color: gray;
Войти в полноэкранный режим Выход из полноэкранного режима

После:

border: 1px solid gray;
Войти в полноэкранный режим Выйти из полноэкранного режима

Надеюсь, вы найдете этот пост полезным.

Полную статью читайте здесь: Полезные свойства стенографических символов Css

Оцените статью
devanswers.ru
Добавить комментарий