Краткая запись свойств CSS.

Некоторые CSS свойства допускают использование строки значений, что устраняет необходимость в некоторых индивидуальных свойствах. Строка значений представляет собой набор определенных значений, разделенных пробелами. Это и называется сокращенная форма записи свойств CSS.

Сокращённой формой записи обладают следующие css-свойства:

  1. background
  2. margin
  3. padding
  4. border
  5. font
  6. list-style
  7. outline

Рассмотрим их подробнее:

background

Свойство background собирается из следующих CSS-свойств: background-attachment, background-color, background-image, background-position, background-repeat. Формат записи свойства следующий:

background: background-attachment || background-color || background-image || background-position || background-repeat

Однако это не мешает менять местами некоторые свойства, а некоторые и выкидывать. Например:

background-attachment: scroll;
background-color: #FFF;
background-image: url(img/sony.gif);
background-position: top left;
background-repeat: no-repeat; 

/*пять строчек выше идентичны одной ниже*/ 
background: scroll #FFF url(img/sony.gif) top left no-repeat;

margin

Пример не сокращенной записи свойства:

p {
   margin-top: 1px;
   margin-right: 5px;
   margin-bottom: 10px;
   margin-left: 20px;
}

Можно объединить следующим образом:

p {
   margin: 1px 5px 10px 20px;
}

padding

Пример не сокращенной записи свойства:

p {
   padding-top: 1px;
   padding-right: 5px;
   padding-bottom: 10px;
   padding-left: 20px;
}

Можно объединить следующим образом:

p {
   padding: 1px 5px 10px 20px;
}

Особенности margin и padding

  • Если параметр равен 0, то единицу измерения можно не указывать.
  • margin может использовать отрицательные значения, а padding – нет.
  • margin может принимать слева и справа значение auto.

border

Свойства border-width, border-color и border-style могут быть объединены в единое свойство border, например:

p {
   border: 1px red solid;
}

Также эти правила применимы и к свойствам border-top, boder-right, border-bottom, border-left.

font

Свойства, относящиеся к шрифтам, также можно объединять в свойстве font:

font-family: Tahoma, Verdana;
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 150%;
line-height: 18px; 

/* идентичны строке */ 
font:italic normal bold 150%/18px Tahoma, Verdana;

list-style

Формат записи свойств следующий:

list-style: list-style-type || list-style-position || list-style-image

Если установить для list-style-type и list-style-image значения none, то у списка будет отсутствовать какой-либо маркер. Пример:

ul { 
  list-style: none; 
}

outline

Outline — сокращённая форма записи свойств, которая задаёт общий контур элемента. Контуры не влияют на размещение элементов, они могут быть неправильной формы.

/* свойства контуров */

[ outline-color; outline-style; outline-width ]
/* ПРИМЕРЫ */

outline: 1px solid #111;
outline: 2px dotted #222;
outline: 3px dashed #333;

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: