Сокращаем стили css

02.12.2010
ReTweet

О сокращении объемов файлов стилей css шаблона сайта и его влияние на скорость загрузки сайта уже рассказывалось. На сайте в топ меню даже представлен сервис оптимизации файлов стилей.

Остановимся на некоторых моментах, которые дополнительно позволят вам уменьшить размеры файлов без ухудшения работоспособности. Сокращенные формы записи стилей вполне применимы к таким свойствам как margin, border, padding, background, font, list-style.

Часто в файле стилей можно видеть примерно такую запись:

.widget{
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
}

Сокращенный же аналог записи имеет вид:

.widget{margin:10px 20px 10px 20px;}

Свойства определяются от top и по часовой до left.

Последнюю запись можно сократить еще. Параметры определяются попарно top-bottom, right-left. И, если параметры пар повторяются, то вполне можно убрать определение для второго параметра:

.widget{margin:10px 20px;}

Аналогичные сокращения применимы и к padding, border.

Пример сокращений для свойства font:

.riba{
font-style:italic;
font-size:12px;
font-family:arial;
}

Запись говорит, что стиль оформляется шрифтом в стиле italic размером 12 px набором arial. Сокращенная запись будет иметь уже следующий вид:

.riba{font:italic 12px arial;}

Отметим еще один момент, для интерпретатора запись 0px аналогична записи 0. Всего то 2 знака, а если таковых обнаружится не один десяток?

Это лишь несколько примеров в использовании форм сокращений свойств CSS. Их использование корректно, позволяет дополнительно сократить ваш код.

Коротко о сайте.

Блог meganfoxstar.ru поможет вам в Установке и настройке cms Vamshop, PHPProBid, Esyndicat, закрепит и расширит имеющиеся знания. Создание сайтов, продвижение сайтов, оптимизация информации. Теория и практика seo. CSS-верстка, веб-мастеринг, интернет-технологии, манимейкинги – все это и намного больше вы сможете найти на страницах нашего проекта!.

Основной        Дополнит         Twitter
RSS фид основной    RSS фид дополнительный    Всего Фолловеров блога
1006
RSSПодписка на обновления по RSS

Обновления блога по почтеОбновления блога на почтовый ящик