Сокращения в CSS

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

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

Margin - устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

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

Если после свойства стоит одно значение оно будет применено ко всем сторонам.

Если два, то первое будет относиться к верхней и нижней стороне, а второе к левой и правой.

Если параметров три, то первое значение будет относиться к верхней стороне, второе к левой и правой стороне, а третье к нижней стороне.

Если параметров четыре, то первое значение относиться к верхней стороне, второе к правой стороне, третье к нижней стороне, четвертое к левой стороне.

То есть, параметры присваиваются к сторонам по часовой стрелке, начиная с верха. Аналогично можно писать и свойство padding.

 #shorten { margin:1px; margin:1px 2px; margin:1px 2px 3px; margin:1px 2px 3px 4px; } 

Border - универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, можно воспользоваться свойствами border-top, border-bottom, border-left, border-right

Сокращенное написание параметра – border:1px solid #000. Где первый параметр свойства толщина рамки, второй тип рамки и третий цвет рамки. К этому свойству не применимо свойство рассмотренное выше. То есть, нельзя написать border:1px 2px 3px 4px solid #000.

Однако предыдущее свойство можно применить к параметру border-width, записав свойства следующим образом: border: solid # 3CB371; border-width: 5px 4px 3px 2px; - рамка одинакового цвета и типа, но разной ширины.

Если каждая сторона разной ширины, цвета, и типа то можно написать так: border-top:5px solid #000; border-right:4px solid #fff; border-bottom:3px dotted #3CB371; border-right:2px dotted # 8B2323;

#shorten{ border:5px solid #000; border-right:6px solid #fff; border-width:1px 2px 3px 4px;} 

Background - устанавливает характеристики фона

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

#shorten{ background:#000 url(images/001.gif) no-repeat 2px 3px; } 

Font - задает характеристики шрифта и текста.

Сокращенное написание – font:italic bold 11.5px/18px Verdana, Arial;. Шрифты можно писать через запятую.

#shorten{ font:italic bold 11.5px/18px Verdana, Arial; } 

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

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

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

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