ArtShok. Сайтостроение и немного SEO

Одна из самых полезных особенностей CSS2 - способность использовать стенографию («скоропись»). В результате чего мы получаем красивый, не перегруженный код, который пишется легко и быстро.

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

Давайте еще раз пробежимся по списку, может быть, откроете для себя еще что-то интересное:

1. Отбивка (Margin & Padding)
2. Шрифты (Font)
3. Фон (Background)
4. Границы (Border)
5. Списки (List)
6. Контуры (Outline)

Отбивка (Margin & Padding)

Вместо того, чтобы каждый раз прописывать отдельно margin-top, margin-right …. как здесь:

{
 margin-top: 10px;
 margin-right: 15px;
 margin-bottom: 5px;
 margin-left: 0px;
}

Мы можем сделать следующее:

{margin: 10px 15px 5px 0;}

Первый и второй код абсолютно идентичны друг другу и работоспособны. А чтобы было проще запомнить, что и в каком порядке писать - вспоминаем, как движется стрелка на часах. Сначала она вверху (<code>margin-top</code>), потом справа (<code>margin-right</code>), потом внизу (<code>margin-bottom</code>) и наконец - слева (<code>margin-left</code>)

Если же у нас отбивка (Margin & Padding) со всех сторон одинаковая, то пишем так:

{margin: 10px;}

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

{
 padding-top: 10px
 padding-right: 5px;
 padding-bottom: 10px;
 padding-left: 5px;
}

это мы можем смело писать как

{padding: 10px 5px;}

А вот теперь самое интересное - мало кто знает, что можно использовать не только 1, 2 или 4 переменных, но и 3! Первая будет отвечать за отбивку сверху, вторая - за правую и левые стороны, а третья - за низ. Например:

{margin: 0 10px 5px 10px;}

идентично

{margin: 0 10px 5px;}

Шрифты (Font)

По сравнению с margin и padding параметров здесь несколько больше, но это не повод пугаться. Посмотрим, что у нас вообще есть и в каком порядке это должно писаться:

{
 font-style: italic;
 font-variant: small-caps;
 font-weight: 500;
 font-size: 1em;
 line-height: 24px;
 font-family: arial,verdana,sans-serif;
}

А коротко:

{font: italic small-caps 500 1em/24px arial,verdana,sans-serif;}

Следующий код задает размер шрифта 12 pixels, высоту линий 28 pixels, тип шрифта - без засечек:

{font: 12px/28px sans-serif;}

Остальные параметры, которые были опущены, либо наследуют родительские свойства, либо приравниваются к нормальным (обычным).

Фон (Background)

Объединяем несколько параметров в один:

{
 background-color: #456;
 background-image: url(back.gif);
 background-repeat: repeat-y;
 background-attachment: fixed;
 background-position: 50% 50%;
}

или:

{background: #456 url(back.gif) repeat-y fixed 50% 50%;}

Свойства фона, как и шрифтов, имеют установки по умолчанию. Либо цвет фона, либо фоновый рисунок - должны быть прописаны. Вот эти параметры:

color: transparent;
image: none;
repeat: repeat;
attachment: scroll;
position: left top (0 0);

Самая частая ошибка - это когда значения позиции фона меняются местами. По-русски:

{background-position: top left;}

должно писаться как

{background-position: left top;}

Но, раз мы решили оптимизировать код, то положение фона слева вверху было бы проще написать как 0 0, а справа внизу - 100% 100%.

Еще один момент, который вы могли уже заметить - это настройки цвета. Мы установили цвет фона #456, а его шестнадцатиричное значение - #445566. Хотя это и не значительное изменение, но все-таки оно немного упрощает работу.

Границы (Border)

Одни из самых часто используемых свойств рамок - это ширина и стиль. Раньше, чтобы придать необходимые параметры, нам пришлось бы писать следующий код:

{
 border-left-width: 2px;
 border-left-style: solid;
 border-left-color: #000;
 border-right-width: 2px;
 border-right-style: solid;
 border-top-color: #000;
 border-top-width: 3px;
 border-top-style: solid;
 border-top-color: #000;
}

Сейчас же мы можем уложиться всего в пару строк:

{
 border: solid #000;
 border-width: 3px 2px 0;
}

В случае, если параметры всех границ одинакомы:

{border: 3px solid #000;}

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

Списки (Lists)

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

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

заменяем на:

{list-style: inside circle url(bullet.gif);}

Контуры (Outline)

Так же редко используется. Плюс поддерживается не во всех браузерах - так что будьте осторожны.

{
 outline-color: #fff;
 outline-style: dotted;
 outline-width: 1px;
}

можем смело заменить на

{outline: #fff dotted 1px;}

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

Рекомендуемые статьи:

• 9 полезных FireFox дополнений для вебмастеров
• 5 способов красивого оформления посещенных ссылок с помощью CSS
• jQuery пример: красивая смена текста за 10 минут
• Меню в виде книжного оглавления на CSS
• Как установить вид курсора?
• Страница ошибок 404: как удержать посетителей
• Как правильно поставить ссылки на Skype и ICQ