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


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



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


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

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




Свойство column-rule-style устанавливает стиль линии разделяющей колонки в многоколоночном элементе.По сути стиль этого свойства схож со свойством border-style,точнее схожи дополнительные значения применяемые к свойству.Существует альтернативное свойство для браузеров Safari и Chrome -webkit-column-rule-style.Для браузера Mozila применяется альтернативное свойство -moz-column-rule-style.Свойство применимо к многоколоночным элементам,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




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


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


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


Значение
Описание
noneСтиль линии отсутствует
hiddenСтиль линии скрытый ( невидимый )
dottedСтиль линии как серия точек
dashedСтиль линии как пунктирная ( прерывистая ) линия
solidСтиль линии как сплошная линия
doubleСтиль линии как сплошная двойная линия
grooveСтиль линии как ( смотрите в примере,может отличатся в зависимости от размера и цвета )
ridgeСтиль линии как ( смотрите в примере,может отличатся в зависимости от размера и цвета )
insetСтиль линии как ( смотрите в примере,может отличатся в зависимости от размера и цвета )
outsetСтиль линии как ( смотрите в примере,может отличатся в зависимости от размера и цвета )
inheritНаследует значение родителя

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство column-rule-style</title>
<style type="text/css">
<!--
.hidden {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:10px;
-moz-column-rule-width:10px;
-webkit-column-rule-width:10px;
column-rule-style:hidden;
-moz-column-rule-style:hidden;
-webkit-column-rule-style:hidden;
column-rule-color:yellow;
-moz-column-rule-color:yellow;
-webkit-column-rule-color:yellow;
border:5px double green;
color:black;
}
.dotted {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:10px;
-moz-column-rule-width:10px;
-webkit-column-rule-width:10px;
column-rule-style:dotted;
-moz-column-rule-style:dotted;
-webkit-column-rule-style:dotted;
column-rule-color:yellow;
-moz-column-rule-color:yellow;
-webkit-column-rule-color:yellow;
border:5px double green;
color:black;
}
.dashed {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:10px;
-moz-column-rule-width:10px;
-webkit-column-rule-width:10px;
column-rule-style:dashed;
-moz-column-rule-style:dashed;
-webkit-column-rule-style:dashed;
column-rule-color:yellow;
-moz-column-rule-color:yellow;
-webkit-column-rule-color:yellow;
border:5px double green;
color:black;
}
.solid {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:10px;
-moz-column-rule-width:10px;
-webkit-column-rule-width:10px;
column-rule-style:solid;
-moz-column-rule-style:solid;
-webkit-column-rule-style:solid;
column-rule-color:yellow;
-moz-column-rule-color:yellow;
-webkit-column-rule-color:yellow;
border:5px double green;
color:black;
}
.double {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:10px;
-moz-column-rule-width:10px;
-webkit-column-rule-width:10px;
column-rule-style:double;
-moz-column-rule-style:double;
-webkit-column-rule-style:double;
column-rule-color:yellow;
-moz-column-rule-color:yellow;
-webkit-column-rule-color:yellow;
border:5px double green;
color:black;
}
.groove {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:10px;
-moz-column-rule-width:10px;
-webkit-column-rule-width:10px;
column-rule-style:groove;
-moz-column-rule-style:groove;
-webkit-column-rule-style:groove;
column-rule-color:yellow;
-moz-column-rule-color:yellow;
-webkit-column-rule-color:yellow;
border:5px double green;
color:black;
}
.ridge {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:10px;
-moz-column-rule-width:10px;
-webkit-column-rule-width:10px;
column-rule-style:ridge;
-moz-column-rule-style:ridge;
-webkit-column-rule-style:ridge;
column-rule-color:yellow;
-moz-column-rule-color:yellow;
-webkit-column-rule-color:yellow;
border:5px double green;
color:black;
}
.inset {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:10px;
-moz-column-rule-width:10px;
-webkit-column-rule-width:10px;
column-rule-style:inset;
-moz-column-rule-style:inset;
-webkit-column-rule-style:inset;
column-rule-color:yellow;
-moz-column-rule-color:yellow;
-webkit-column-rule-color:yellow;
border:5px double green;
color:black;
}
.outset {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:10px;
-moz-column-rule-width:10px;
-webkit-column-rule-width:10px;
column-rule-style:outset;
-moz-column-rule-style:outset;
-webkit-column-rule-style:outset;
column-rule-color:yellow;
-moz-column-rule-color:yellow;
-webkit-column-rule-color:yellow;
border:5px double green;
color:black;
}
-->
</style>
</head>
<body>
<center>
<div class="hidden">По установленным значениям колонок будет две.Цвет линии установлен yellow.
Ширина между колонками соответственно установленному значению будет равна 10px ( пикселей ).Применённый тип стиля <big><em>hidden</em></big>.</div><br>
<div class="dotted">По установленным значениям колонок будет две.Цвет линии установлен yellow.
Ширина между колонками соответственно установленному значению будет равна 10px ( пикселей ).Применённый тип стиля <big><em>dotted</em></big>.</div><br>
<div class="dashed">По установленным значениям колонок будет две.Цвет линии установлен yellow.
Ширина между колонками соответственно установленному значению будет равна 10px ( пикселей ).Применённый тип стиля <big><em>dashed</em></big>.</div><br>
<div class="solid">По установленным значениям колонок будет две.Цвет линии установлен yellow.
Ширина между колонками соответственно установленному значению будет равна 10px ( пикселей ).Применённый тип стиля <big><em>solid</em></big>.</div><br>
<div class="double">По установленным значениям колонок будет две.Цвет линии установлен yellow.
Ширина между колонками соответственно установленному значению будет равна 10px ( пикселей ).Применённый тип стиля <big><em>double</em></big>.</div><br>
<div class="groove">По установленным значениям колонок будет две.Цвет линии установлен yellow.
Ширина между колонками соответственно установленному значению будет равна 10px ( пикселей ).Применённый тип стиля <big><em>groove</em></big>.</div><br>
<div class="ridge">По установленным значениям колонок будет две.Цвет линии установлен yellow.
Ширина между колонками соответственно установленному значению будет равна 10px ( пикселей ).Применённый тип стиля <big><em>ridge</em></big>.</div><br>
<div class="inset">По установленным значениям колонок будет две.Цвет линии установлен yellow.
Ширина между колонками соответственно установленному значению будет равна 10px ( пикселей ).Применённый тип стиля <big><em>inset</em></big>.</div><br>
<div class="outset">По установленным значениям колонок будет две.Цвет линии установлен yellow.
Ширина между колонками соответственно установленному значению будет равна 10px ( пикселей ).Применённый тип стиля <big><em>outset</em></big>.</div><br>
</center>
</body>
</html>


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




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





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






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

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

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