... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Использование нескольких стилей одновременно

 

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок


Использование нескольких стилей одновременно

Рассмотрим простой пример. Допустим, в вашей таблице стилей есть несколько правил:

.left {text-align:left;}
.right {text-align:right;}
.green{color: green; border: lpx solid green;}
.red{color: red; border: 1px solid red;}
.blue{color: blue; border: 1px solid blue;}
.narrow {width:50%}

А теперь представьте, что необходимо создать блок шириной 50% контейнера, выровненный по правому краю. Как быть? Можно написать новый стиль вида:

.nar_right{ width:50%; text-align:right;}

А можно ли поступить по-другому? На самом деле все гораздо проще. Вы можете просто указать в качестве значения атрибута class несколько имен классов через символ пробел тогда правила, написанные для этих классов, объединятся. Например, чтобы создать блок шириной 50% контейнера, выровненный по правому краю, достаточно написать:

<Р class="right narrow">Этот параграф шириной в 50% контейнера будет выровнен по правому краю</Р>

Приведем еще несколько примеров подобных комбинаций:

<Р class="right blue">Этот параграф будет синим и выровнен по правому краю</P>
<Р class="red narrow right">Этот параграф будет красным и узким, текст выровнен по правому краю</P>
<Р class="green left">Этот параграф будет зеленым и выровнен по левому краю</P>

В браузере увидим все эти абзацы так - ОТКРЫТЬ ПРИМЕР. Из этого примера видно, что свойства прекрасно объединяются и без явного объединения стилей. Кроме того, комбинировать можно не только два, но и три стиля. Главное следить за тем, чтобы в одном стиле какие-то свойства не переопределяли другие, иначе можно получить неожиданный результат.

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены