[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / CSS /

Сокращенные команды в CSS

By Trenton Moss, перевод tacit для www.realcoding.net

Введение

Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз. Возможно, вы также использовали для разметки таблицы, вложенные таблицы и spacer gifs. Теперь же вся информация о представлении шрифта может быть сведена в один документ CSS, в котором каждая команда форматирования описана только один раз.

Но и на этом мы не останавливаемся. Используя сокращенные команды CSS можно еще больше уменьшить размер документа.

Шрифт

Используйте конструкцию:

font: 1em/1.5em bold italic serif

...вместо:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Такая сокращенная форма записи будет работать только в том случае, если явно заданы font-size и font-family. Если же не задать такие свойства, как font-weight, font-style или font-variant, то им будут присвоены значения по умолчанию, т.е. normal, имейте это ввиду.

Фон

Используйте конструкцию:

background: #fff url(image.gif) no-repeat top left

...вместо:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Если вы не зададите какой-либо параметр, ему будет присвоено значение по умолчанию. Если вы пропустите команду background-position, то фоновый рисунок будет помещен в левый верхний угол контейнера и размножен как горизонтально. так и вертикально.

Списки

Используйте конструкцию:

list-style: disc outside url(image.gif)

...вместо:

list-style: #fff;

list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Если вы пропустите какуой-либо из этих параметров, то каждому из них будет присвоено значение по умолчанию, а именно: disc, outside и none (т.е. без изображения) соответствено.

Отступ и набивка

There are a number of different CSS shorthand commands for margin and padding, depending on how many of the sides of the containing element have the same margin or padding values:

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

Четыре разных значения

Используйте конструкцию:

margin: 2px 1px 3px 4px (top, right, bottom, left)

...вместо:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Три разных значения

Используйте конструкцию:

margin: 5em 1em 3em (top, right and left, bottom)

...вместо:

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Два разных значения

Используйте конструкцию:

margin: 5% 1% (top and bottom, right and left)

...вместо:

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

Одно значение

Используйте конструкцию:

margin: 0 (top, bottom, right and left)

...вместо:

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

Такие конструкции применимы также и к padding border (более подробно о border смотрите ниже).

 

Рамка

Используйте конструкцию:

border: 1px black solid

...вместо:

border-width: 1px;
border-color: black;
border-style: solid

Используйте конструкцию:

border-right: 1px black solid

...вместо:

border-right-width: 1px;
border-right-color: black;
border-right-style: solid

(Right можно заменить на top, bottom или left.)

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

 

Такого вида границ элемента можно достичь следующим сочетанием команд CSS:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

Того же можно достичь используя такую конструкцию:

border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf

Вывод <!-- Article Ends -->

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




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 3335 сегодня - 1

История про CSS (часть II)
05-01-2010   

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

Кол. просмотров: общее - 3334 сегодня - 1

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 3176 сегодня - 0

Необычное применение CSS: реализация эффекта rollover c помощью CSS
05-01-2010   

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее

Кол. просмотров: общее - 3203 сегодня - 1

Сокращенные команды в CSS
05-01-2010   

Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее

Кол. просмотров: общее - 3948 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects