column-rule | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Главная » Справочник CSS3 » Свойства колонок


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


column-rule | Свойство CSS

Свойство column-rule устанавливает вид линии между колонками.




Свойство column-rule устанавливает вид линии между колонками в многоколоночном элементе.Это свойство - сокращённый способ указать значения для всех дополнительных свойств column-ruleСуществует альтернативное свойство для браузеров Safari и Chrome -webkit-column-rule.Для браузера Mozila применяется альтернативное свойство -moz-column-rule.Значения устанавливаются в следующей последовательности,через пробел.
1.Значение дополнительного свойства column-rule-width указывающего ширину линии
2.Значение дополнительного свойства column-rule-style указывающего стиль линии
3.Значение дополнительного свойства column-rule-color указывающего цвет линии
Свойство применимо к многоколоночным элементам,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные свойства применяемые к column-rule


Свойство
Описание
-webkit-column-ruleАльтернативный,сокращённый вид записи для всех значений для браузеров Safari и Chrome
-moz-column-ruleАльтернативный,сокращённый вид записи для всех значений для браузера Mozila
column-rule-widthСвойство указывающее ширину линии
-moz-column-rule-widthСвойство указывающее ширину линии для браузера Mozila
-webkit-column-rule-widthСвойство указывающее ширину линии для браузеров Safari и Chrome
column-rule-styleСвойство указывающее стиль линии
-moz-column-rule-styleСвойство указывающее стиль линии для браузера Mozila
-webkit-column-rule-styleСвойство указывающее стиль линии для браузеров Safari и Chrome
column-rule-colorСвойство указывающее цвет линии
-moz-column-rule-colorСвойство указывающее цвет линии для браузера Mozila
-webkit-column-rule-colorСвойство указывающее цвет линии для браузеров Safari и Chrome


Дополнительные значения применяемые к column-rule


Значение
Описание
<Значения дополнительных свойств>Значения указанные в дополнительных свойствах применяемых к column-rule
transparentЗначение прозрачности разделяющей линии

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство column-rule</title>
<style type="text/css">
<!--
.rule {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule:10px solid green;
-moz-column-rule:10px solid green;
-webkit-column-rule:10px solid green;
border:5px solid orange;
color:white;
}
-->
</style>
</head>
<body>
<center>
<div class="rule">По установленным значениям колонок будет две.
Для свойства <em>column-rule</em> прописаны поочерёдно значения ширины равной 10px,стиля со значением solid и цвета с именем green.
Значения указаны через пробел.</div>
</center>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-multicol/#column-rule0
Категория: Свойства колонок | Добавил: IZOTOP (21.05.2012) | Автор: Меренков Михаил E W
Просмотров: 385 | Теги: css, свойство, пример, Колонок, style, column-rule, Что делает | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]