web-разработка

Краткая запись свойств 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;
2023-11-19 20:47 Самоучитель по CSS