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


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



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


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

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




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




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


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


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


Значение
Описание
thinКолонки разделяются тонкой линией
mediumКолонки разделяются средней линией
thickКолонки разделяются толстой линией
<Число>Любое числовое значение,указывает на ширину между колонками
inheritНаследует значение родителя

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство column-rule-width</title>
<style type="text/css">
<!--
.one {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule-width:20px;
-moz-column-rule-width:20px;
-webkit-column-rule-width:20px;
column-rule-style:double;
-moz-column-rule-style:double;
-webkit-column-rule-style:double;
column-rule-color:indigo;
-moz-column-rule-color:indigo;
-webkit-column-rule-color:indigo;
border:5px double green;
color:white;
}
-->
</style>
</head>
<body>
<center>
<div class="one">По установленным значениям колонок будет две.
Ширина между колонками соответственно установленному значению будет равна 20px ( пикселей ).</div>
</center>
</body>
</html>

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




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





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






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

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

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