CSS: 6 правил сокращений

Просмотров: 2510Комментарии: 0
ПрограммированиеCSS
CSS: 6 правил сокращений

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

Сегодня мы рассмотрим как же это делается на основе 6 самых часто используемых свойств css.

1. Свойство margin

Задает величину отступа элемента от каждого края.

Многие используют свойства margin-top, margin-right, margin-bottom, margin-left, но их можно объединить в одно свойство.

Допустим такой код:

div {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 14px;
margin-left: 9px; }

Можно записать в одну строку, вот так:

div { margin: 15px 10px 14px 9px; }

Тут главное не забыть в каком порядке перечисляются отступы: сверху, справа, снизу, слева.

Если некоторые отступы совпадают, то можно записать еще короче:

а) все 4 отступа совпадают

div { margin: 15px; }

б) если совпадают значения слева, справа и сверху, снизу

div { margin: 15px 10px; }

15 пикселей снизу и сверху, а по 10 слева и справа.

в) если совпадают только слева и справа, например 8px

div { margin: 15px 8px 10px; }

Здесь 15 пикселей сверху и 10 пикселей снизу.

2. Свойство padding

Задает величину поля вокруг элемента.

Сокращение для этого свойства такое же, как и у предыдущего свойства margin.

Для того, чтобы выставить свойствам элемента нулевые значения. То можно записать так:

div { padding: 0 30px; }

сверху и снизу 0 без указания единиц измерения.

3. Свойство font

Позволяет установить сразу несколько характеристик шрифта и текста, а именно font-style, font-variant, font-weight, font-size, line-height, и font-family.

Полная версия написания:

span {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 1.5em;
font-family: Verdana, Tahoma; }

Сокращенный вариант:

span { font: italic small-caps bold 12px/1.5em Verdana, Tahoma; }

4. Свойство background

Позволяет задать пять характеристик фона.

В этом свойстве значения могут идти в любом порядке, и браузер сам определяет их назначение.

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

Исходный код:

div {
background-color: #000;
background-image: url(../images/back.jpg);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: bottom center; }

И использование одного свойства:

div { background: #000 url(../image/back.jpg) repeat-y fixed bottom left; }

5. Свойство border

Задает толщину, стиль и цвет границы вокруг элемента.

Вместо такого кода:

div {
border-width: 5px;
border-style: doted;
border-color: #ff0; }

свойство border записывается очень просто

div { border: 5px doted #ff0; }

Стоит отметить, что перечень характеристик задается именно в таком порядке и никак иначе.

6. Свойство list-style

Позволяет задать одновременно стиль маркера, положение и изображение вместо маркера.

ul {
list-style-type: circle;
list-style-position: outside; }

Получаем такой код:

ul { list-style: circle outside; }

или

ul { list-style: url('../image/dot.jpg'); }
Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

     

  

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

(обязательно)