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

Здравствуйте уважаемые начинающие веб-мастера. 

В этой статье изучим просто замечательное свойство CSS, здорово упрощающего нам жизнь – сокращение записей.

Начнём со свойства форматирования текста — font

p{
  font-style: italic;
  font-weight: bold;
  font-size: 20px;
  font-family: "Comic Sans MS" cursiv";
}

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

p{
  font: italic bold 20px "Comic Sans MS" cursiv;
}

Все значения, которые сначала были записаны каждое со своим свойством, теперь записаны в одну строку через пробел с одним только свойством font. Лучше? Конечно лучше.

И одно правило, которое нужно соблюдать при таком варианте – это последовательность написания свойств. То есть сначала пишется, если нужно italic, затем, опять-же если нужно — bold, потом размер шрифта, и его название и семейство.

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

Сокращение свойства background

p {
  background-color: #cc212d;
  background-image: url(images/zvon.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top right;
}

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

p {
  background: #cc212d url(images/zvon.png) no-repeat fixed top right; 
}

Сокращение свойства border.

p {
  border-width: 30px;
  border-style: solid;
  border-color: #cc212d;
}

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

p{
  border: 30px solid #cc212d;
}

Сокращение свойства list-style. (Установка картинки маркера для списка)

ul{
  list-style-type: square;
  list-style-position: inside; 
  list-style-image: url(images/zvon.png);
}

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

ul{
  list-style:square inside url(images/zvon.png);
}

Сокращение записи для свойств имеющих своими значениями отступы сверху, справа, снизу, и слева — margin и padding.

p{
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 40px;
}

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

p{
  margin: 20px 10px 30px 40px;
}

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

p{
  margin: 40px;
}

Сокращение шестнадцатеричных значений свойств color и background.

Если в значении свойств color и background все шесть цифр одинаковые, то можно в коде оставлять только три цифры.

p{
  color: #ffffff;
}

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

p{
  color: #fff;
}

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить


Перекур


-Женщина — это тайна.
-Да. От жены.

Выравнивание и красная строка в CSS < < < В раздел > > > Создание рамок средствами CSS

 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *