Uru-ru.ru - web дизайн, программирование, система оперативного управления компанией, 3d art
about web design web programming 3d art contacts

Оптимизация CSS Оптимизация CSS

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

Существует 6 CSS свойств, правила для которых можно писать сокращенно, (т.е. в одну строку, а не в отдельности для каждого подвида свойства) это: margin, padding, border, background, list-style, font. 

Сокращенные правила для margin

Свойство margin включает: margin-top, margin-right, margin-bottom, margin-left. Таким образом, вместо:

div {
margin-top: 5px;
margin-right: 8px;
margin-bottom: 3px;
margin-left: 4px; }

можно написать:

div { margin: 5px 8px 3px 4px; }

Важно помнить, что сокращенные правила для margin всегда следуют в таком порядке: top, right, bottom, left. Чтобы легче запомнить, представьте, например, движение по часовой стрелке.

Если значения top/bottom и left/right одинаковы, то сокращение будет выглядеть так:

div { margin: 5px 8px; }

Т.е. получаем, что отступы сверху и снизу  8 px, а слева и справа 5 px.

Еще один способ:

div {margin : 5px 10px 2px}

Здесь порядок следующий: 5px - top, 10px - left и right, 2px - bottom
А если все 4 свойства имеют ожинаковое значение, то пишем:

div { margin: 5px; }

Сокращенные правила для padding

Сокращенные правила для свойства padding абсолютно идентичны вышеописанному для margin. Нужно лишь запомнить несколько правил:

  1. Порядок свойств: top, right, bottom, left
  2. Если правила можно сократить до двух значений, то свойства будут следовать в порядке: top/bottom и left/right.
  3. Если нужно обнулить значения для нескольких сторон одновременно, то достаточно прописать 0 без указания единиц.
div { padding: 30px 0; }  /* top/bottom - 30px , left/right - 0px */

Сокращенные правила для border

Свойство border включает: border-width, border-style, border-color. Первым следует значение width, затем style и color. Таким образом, вместо:

div { border-width: 3px; border-style: solid; border-color: #c00; }

Можно написать:

div { border: 3px solid #c00; }

Сокращенные правила для background

Свойство background содержит 5 возможных значений: background-color, background-image, background-repeat, background-attachment,  и background-position (именно в таком порядке). Поэтому вместо:

div { background-color: #fff; background-image: url(../images/bg.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: top center; }

Пишем:

div { background: #fff url(../img/bg.gif) repeat-y fixed top left; }

Для свойства background-position первое значение относится к положению по вертикали, второе - по горизонтали. По умолчанию оба значения - center.

Сокращенные правила для list-style

Свойство list-style включает: list-style-position, list-style-type (или list-style-image).

ul { list-style-type: square; list-style-position: inside; }

Сокращенный код:

ul { list-style: square inside; }

Если нужно обнулить все значения стилей списков, то пишем:

ul { list-style: none; }

Сокращенные правила для font

Использование сокращений для свойства font, скорее всего, наиболее актуально, т.к. включает множество свойств: font-style, font-variant, font-weight, font-size, line-height, и font-family. Вместо большого и некрасивого кода:

p { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: small; line-height: 1.2em; font-family: Helvetica, Arial, sans-serif; }

Можно написать:

p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }

Конечно, не всегда нам нужно указывать все 6 значений - это пример лишь для указания порядка значений. Наиболее часто мы используем значения font-size, line-height, font-family одновременно.

Можно отметить еще одно небольшое правило к оформлению кода для указания цвета. Если все 6 символов цвета одинаковы, например #FFFFFF, то достаточно прописать #FFF. Это правило также будет работать и в случае если первые 3 символа совпадают с остальными 3мя  каждые 2 символа образуют пару соотвественно модели R G B: #336699 = #369

 Оптимизация CSS
Дата публикации 28 мая 2008

Реклама

about | design | programming | art | contacts

copyrights (C) 2005-2014 Uru-ru.ru