|
|
Web - программирование / CSS /
| |
| | |
Возможно вас заинтересует
|
|
Сокращенные команды в CSS
Одно из основных преимуществ использования 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 /
| |
| | |
|
Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее
|
|
Кол. просмотров: общее - 4733 сегодня - 1
|
|
|
Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее
|
|
Кол. просмотров: общее - 5168 сегодня - 1
|
|
|
Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее
|
|
Кол. просмотров: общее - 4738 сегодня - 1
|
|
|
Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее
|
|
Кол. просмотров: общее - 4688 сегодня - 1
|
|
|
Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее
|
|
Кол. просмотров: общее - 5457 сегодня - 0
|
|
| 
