Propiedad CSS column-rule
La propiedad abreviada column-rule define el estilo, el ancho y el color de la regla entre columnas. Ten en cuenta que solo se renderiza cuando column-count o columns está establecido en el elemento. Está especificada por las siguientes propiedades:
Si la propiedad column-rule-color no está establecida, su valor predeterminado es currentColor. Al igual que otras propiedades abreviadas, si no se especifica un valor, se establece en su valor inicial.
La propiedad column-rule es una de las propiedades CSS3.
| Valor inicial | medium (ancho), none (estilo), currentColor (color) |
|---|---|
| Se aplica a | Contenedores de bloque que establecen un diseño de varias columnas. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. El color y el ancho de la column-rule son animables. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.columnRule = "5px outset #ccc"; |
Sintaxis
Sintaxis de la propiedad CSS column-rule
css
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;Nota: El orden de los valores de ancho, estilo y color es flexible en la propiedad abreviada.
Ejemplo de la propiedad column-rule:
Ejemplo con valores de ancho, estilo y color
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: 5px dotted #ccc;
}
</style>
</head>
<body>
<h1>Column-rule example</h1>
<p>Here the column-rule is set to 5px dotted gray.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Resultado
Si se proporciona un solo valor, se interpreta como column-rule-style.
Ejemplo de la propiedad column-rule con un solo valor:
Ejemplo con un solo valor
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: dashed;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to only "dashed".</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Ejemplo de la propiedad column-rule con ancho, estilo y color especificados:
Ejemplo con todos los valores especificados
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
column-rule: 10px groove #ccc;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to 10px groove gray.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| column-rule-width | Define el ancho de la regla entre columnas. El valor predeterminado es "medium". |
| column-rule-style | Define el estilo de la regla entre columnas. El valor predeterminado es "none". |
| column-rule-color | Establece el color de la regla. El valor predeterminado es el color actual del elemento. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad 'column-rule' en CSS?