column-rule-width в CSS


column-rule-w >

Свойство CSS column-rule-width используется для указания толщины линий между колонками (столбцами) многоколоночного элемента.

Вместо column-rule-width можно применить универсальное свойство column-rule.

Тип свойства

Применяется: к незамещаемым элементам уровня блока (кроме и элементов с display: table ). К ячейкам таблиц — , и элементам с display: table-cell . А также к встроенным блокам — display: inline-block .

Значения

Значением свойства column-rule-width является указание толщины линий в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. При этом отрицательные значения недопустимы. Также значениями могут быть следующие ключевые слова:

  • thin — тонкие линии.
  • medium — средние линии.
  • thick — толстые линии.

Процентная запись: не существует.

Значение по умолчанию: medium.

Если свойство column-rule-style имеет значение none , то толщина линий станет равной нулю (0).

Синтаксис

Пример CSS: использование column-rule-width

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

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

Свойство column-rule-width определено в спецификации CSS 3 модуль Multi-column Layout (многоколоночная разметка), применяется к многоколоночным элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение medium. На данный момент свойство поддерживается во всех основных браузерах.

свойство column-rule-widthCSS3-генератор ☛

В многоколоночном тексте задаёт толщину линий между колонок.

Краткая информация

Значение по умолчанию medium
Наследуется Нет
Применяется К многоколоночным элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину линии. Для более точного значения толщину можно указывать в пикселях или других единицах.

Пример

Объектная модель

Примечание

Firefox поддерживает свойство -moz-column-rule-width .

Safari, Chrome и Аndro >-webkit-column-rule-width .

Спецификация ?

Спецификация Статус
CSS Multi-column Layout Module Редакторский черновик

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
10 1 11.1 3 3.5
Android Firefox Mobile Opera Mobile Safari Mobile
1 3.5 11 3

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

CSS column-rule-w >

The CSS column-rule-width property allows you to set the width of the column rule between columns on a multi-column layout.

The column rule appears as a kind of border that appears in between the columns on a multi-column layout.

The column-rule-width property should be used in conjunction with the column-rule-color and column-rule-style properties, otherwise no effect will take place (due to there being no «style» or «color» value).

You can use the column-rule shorthand property to set the column rule’s width , style , and color of in one place.

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

This example uses vendor prefixes for the multi-column layout due to lack of browser support for the official standard at the time of writing.

CSS Specifications

  • The column-rule-width property is defined in CSS Multi-column Layout Module (W3C Candidate Recommendation 12 April 2011).

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

CSS3 column-rule-width Property

Description

The column-rule-width CSS property sets the width of the rule drawn between the columns in a multi-column layout.

The following table summarizes the usages context and the version history of this property.


Default value: medium
Applies to: Multi-column elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

length | medium | thin | thick | initial | inherit

The example below shows the column-rule-width property in action.

Example

Property Values

The following table describes the values of this property.

Value Description
length A length in absolute or relative units that specifies the width of the rule.
medium Defines a medium rule. This is default value.
thin Defines a thin rule. Width is less than the default.
thick Defines a thick rule. Width is greater than the default.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element column-rule-width property.

Browser Compatibility

The column-rule-width property is supported in all major modern browsers.

CSS column-rule-w > Feb. 7, 2020 CSS HTML 1574

The column-rule-width property is used to set the width of the rule between adjacent columns in a multi-column layout. It is a longhand property for column-rule .

A column rule is like a border drawn between adjacent columns in a multi-column document, which can make it easier to distinguish between different columns if the column gap is small and can make the layout look more presentable. Its width can be changed using the column-rule-width property.

A column rule does not take up any space. It appears in the middle of the space between adjacent columns. The space between columns can be changed using the column-gap property.

Note that you must define the column-rule-style property while giving the column-rule-width value. This is because there is no column rule present by default. So in order to give a rule width, you must first define a rule using the column-rule-style property.

Values

medium : Sets a medium width for the rule. This is the default value.

thin : Sets a thin width for the rule.

thick : Sets a thick width for the rule.

: Allows you to define the thickness of the rule. Negative values are not allowed.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

The following demo shows the rule widths for different values. The number of columns into which the content of the paragraphs is to be divided is set to 3 using the column-count property, and the gap between the columns is set as 40px using the column-gap property. Use the prefix -webkit- for browser support from Chrome, Safari and Opera, and -moz- for support from Firefox.

The code to make a thin rule is shown below, where thin is the id of the paragraph the width of whose rule is to be changed.

In this example, rule styles are given using the column-rule-style property. You may not see good results for multi columns in small devices.

Browser Support

This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.

Column-rule-width в CSS

Css module of single purpose classes for column rule width

434 44 132
bytes selectors declarations

Learn more about using css installed with npm:

Import the css module

Then process the css using the tachyons-cli

The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:

The built css is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

The source css files can be found in the src directory. Running $ npm start will process the source css and place the built css in the css directory.

Properties for the CSS Columns

Contents

Working with CSS columns

CSS columns is a shorthand for both column-width and column-count properties:

The syntax for this property is rather intuitive:

columns: width count;

We will explain both column-width and column-count properties in the following sections.

Defining column w >

To specify the optimal CSS column width, use the column-width property:

The syntax is simple, as you only need to define one value:

You can either use the default value auto which will simply divide the content into the number of columns specified by column-count equally, or define the width in any CSS unit (e.g., px or ems).

Setting column count

By using the CSS column-count property, you can specify the number of columns an element should be divided into:

Just like column-width , column-count only takes one value:

The default value for CSS column-count is auto , which lets column-width define the number of columns. The browser will divide the window into columns of specified width.

If you need an exact number of columns, define one in a unitless number.

Manipulating the CSS column rule

Just like columns , the column-rule property is actually a shorthand for three subproperties:

  • column-rule-width
  • column-rule-style
  • column-rule-color

The CSS column rule is a kind of border that separates CSS columns from one another.
Using this shorthand, you can define three values for it:

column-rule: width style color;

In the following sections, we will explain each subproperty in more detail.

The w >

The CSS column-rule-width property is used to specify the width of rule between columns:

The syntax only requires you to define one value:

Is there a way to specify different w > Ask Question

I would like to use CSS to present a two-column layout. The markup I am using is this

Is there a way to give one column a width of 20px and one column a width of, say, 80px?

3 Answers 3

No, there isn’t a way.

The feature is designed for content that flows between equal columns.

Technically it’s not possible to do it with the multi-column property only but for a 2-column layout you can accomplish that by setting a negative margin on one of the sides.

Column-rule-width в CSS

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Илон Маск рекомендует:  Имитация файлов и директорий
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL