CSS правильное сокращение.



Путь к мастерству начинается через знания разных правил. Таблицу CSS можно создавать по разному. Можно написать таблицу с использованием множества классов и стилей, а можно упорядочить и оптимизировать. Жестких правил нет, но попробуем рассмотреть некоторые способы, которые помогут облегчить код при написании.

При написании стиля или класса старайтесь оптимизировать их для более широкого использования. Должна присутствовать здравая логика.

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


Стили по умолчанию


Многие свойства CSS имеют значения по умолчанию. Писать лишнее не имеет смысла. Пример с указанием стилей по умолчанию:

p {
font-style: normal;
text-decoration: none
}

Не указывайте значения по умолчанию в таблице стилей.

Группировка стилей


Элементы с одинаковыми свойствами

.div1 {width: 25px; height: 25px; background: #ff0; margin: 10px;}
.div2 {width: 25px; height: 25px; background: #ff0; margin: 10px;}

можно объединить.

.div1,.div2 {width: 25px; height: 25px; background: #ff0; margin: 10px;}

Элементы с одинаковыми свойствами объединяют.

Фон


Фон имеет следующие свойства:

{
background-color: #FFF;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0 0;
}

Все можно записать в одну строку.

{
background: #FFF url(background.gif) no-repeat scroll 0 0;
}

По правилам W3C должна быть следующая последовательность: цвет → картинка → повторение → аттачмент → координаты. Если указываем два значения координат, то они должны следовать одна за другой. При использовании em, px или процентов, горизонтальное значение идет первым.

Обводка


Обводка имеет следующие свойства:

{
border-width: 1px;
border-style: solid;
border-color: #000
}

Все можно записать в одну строку.

{
border: 1px solid #000;
}

По правилам W3C должна быть следующая последовательность: ширина → стиль → цвет.

Шрифт


Шрифт имеет следующие свойства:

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

Записываем в одну строку.

{
font: italic small-caps bold 1.2em/100% Verdana, Arial, sans-serif;
}

По правилам W3C должна быть следующая последовательность: style → variant → weight → size/line-height → family.

Списки


Такое описание:

{
list-style-type: square;
list-style-position: inside;
list-style-image: url(image.gif);
}

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

{
list-style: square inside url(image.gif);
}

Порядок значения не имеет.

Далее рассмотрим: Генератор HTML+CSS шаблонов