ZODIOS.net

Сокращения при написании CSS

09.12.2008  –  Рубрика: HTML&CSS

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

Единицы измерения при значении параметра 0

При присвоении значения 0 какому-либо параметру писать величину измерения после 0 необязательно. Например, нет необходимости писать margin:0px; если можно написать margin:0;

Margin & Padding

Всем известно, что значении margin:10px; создаст отступ в 10px со всех сторон блока. Но этот свойство может иметь и следующее написание “margin:10px 5px;” “ margin:10px 5px 7px;” “margin:10px 5px 7px 3px;”. На чем основано такое написание. Если после свойства стоит 1 значение оно будет применено ко всем сторонам, если 2 первое будет относиться к верхней и нижней стороне, а второе к левой и правой. Если параметров 3 то первое значение будет относиться к верхней стороне, второе к левой и правой стороне, а третье к нижней стороне. Если параметров 4 то первое значение относиться к верхней стороне, второе к правой стороне, третье к нижней стороне, четвертое к левой стороне, то есть параметры присваиваются к сторонам идя по часовой стрелке начиная с верха . Аналогично можно писать и свойство padding. Таким образом, можно сэкономить на написании margin-top,margin-right,margin-bottom,margin-left.

#someSyle {
    margin:10px;
    margin:10px 5px;
    margin:10px 5px 3px;
    margin:10px 5px 3px 2px;
}

Border

Сокращенное написание параметра – border:5px solid #000. Где первый параметр свойства толщина рамки, второй тип рамки и третий цвет рамки. Стоит отметить ,что к этому свойству НЕ применимо предыдущее свойство. То есть, сожалению нельзя написать border:5px 2px 3px 4px solid #000. Но предыдущее свойство применимо к параметру border-width. Таким образом можно написать border: solid #000; border-width: 5px 2px 3px 4px; Если рамка одинаковго цвета и типа но разной ширины. Если каждая сторона разной ширины, цвета, и типа то единственный выход – писать – border-top:5px solid #0D5; border-right:3px dotted #FFD; border-bottom:4px dotted #EF7; border-right:2px dotted #C4D;

#someSyle{
    border:5px solid #000;
    border-right:6px solid #4FD;
    border-width:10px 5px 3px 6px;}

Background

Сокращенное написание – background:#CCC url(images/bg.gif) no-repeat 3px 5px;. Где первый параметр цвет фона, второй параметр – фоновый рисунок, третий – как повторяется фон(repeat,no-repeat,repeat-x,repeat-y), четвертый – позиция фона первое число –позиция относительно левого края блока, второй – верхнего края.

#someSyle{
    background:#CCC url(images/bg.gif) no-repeat 3px 5px;
}

Font

Сокращенное написание – font:italic bold 12px/24px Verdana, Arial, Helvetica; Обязательным является параметр, который указывает на название шрифта. Шрифты можно писать через запятую. Если первого указанного шрифта нет на компьютере пользователя, будет использоваться второй шрифт.Очередность параметров должна быть такой как в примере иначе не будет работать и необходимо присутствие как минимум двух параметров. Параметр который идет после / задает line-height для текста.

#someSyle{
    font:italic bold 12px/24px Verdana, Arial, Helvetica;
}

List

Сокращенный вид – list-style:square inside; Таким образом в одном свойстве можно комбинировать два параметра.

#someSyle{
    list-style:square inside;
}

Color

Цвета можно задавать названием цвета(red,green,gray). Но более рационально записывать цвета в шестнадцатеричном коде, то есть цвет вида #ffffff – white, #000000 – black. Таким образом, цвет задается в формате RBG(Red Blue Green) и можно сокращать коды цветов до вида #fff, #000

#someSyle{
    color:#000;
    background:#fff;
}

Резюме

Сокращения в каскадных таблицах стилей – инструмент которым незаслуженно пренебрегают. Не используя эти методы вы сами у себя воруете силы и время на формирования кода

Tags: CSS