Spécifie la taille du texte
Sommaire de ce chapitre :
Définition et utilisation da la propriété css column-rule
La propriété column-rule définit la largeur, le style et la couleur de la règle entre les colonnes.Cette propriété est un raccourci des propriétés :
column-rule-width
column-rule-style (obligatoire)
column-rule-color
Si column-rule-color est omis, la couleur appliquée sera celle du texte.
La Syntaxe CSS
column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;
| Valeurs par défaut | medium none color |
|---|---|
| Inherited: | non |
| Animable : | oui voir les propriétés individuelles En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columnRule="3px outset blue" |
Valeurs de la propriété
Voir les propriétés :column-rule-width column-rule-style column-rule-color.Exemple Copier le code
div {
column-rule: 4px double #ff00ff;
}
Cet exemple pourait être écrit autrement en separant les tois régles(column-rule-width, column-rule-style et column-rule-color) comme dans ce qui suit.
Définition et utilisation da la propriété css column-rule-color
La propriété column-rule-color spécifie la couleur de la règle entre les colonnes.La Syntaxe CSS column-rule-color
column-rule-color: color|initial|inherit;
| Valeurs par défaut | la couleur du texte de l'élément |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columnRuleColor="#ff0000" |
Valeurs de la propriété column-rule-color
color : Spécifie la couleur de la règle. Consultez le tutoriel sur les couleurs CSS pour obtenir une liste complète des valeurs de couleur possibles.initial: Définit cette propriété à sa valeur par défaut.
inherit: Hérite cette propriété de son élément parent.
Exemple Copier le code
div {
column-rule-color: #ff0000;
}
Définition et utilisation da la propriété css column-rule-style
La propriété column-rule-style spécifie le style de la règle entre les colonnes. La Syntaxe CSS column-rule-stylecolumn-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columnRuleStyle="dotted" |
Valeurs de la propriété column-rule-style
none : Valeur par défaut. Ne définit aucune règlehidden : Définit une règle cachée
dotted : Définit une règle en pointillés
dashed : Définit une règle en pointillés
solid : Définit une règle solide
double : Définit une règle double
groove : Spécifie une règle rainurée en 3D. L'effet dépend des valeurs de largeur et de couleur
ridge : Spécifie une règle striée en 3D. L'effet dépend de la largeur et des valeurs de couleur
inset : Spécifie une règle à encastrement 3D. L'effet dépend des valeurs de largeur et de couleur
outset : Spécifie une règle de départ en 3D. L'effet dépend des valeurs de largeur et de couleur
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.
Exemple Copier le code
div {
column-rule-style: dotted;
}
Définition et utilisation da la propriété css column-rule-width
La propriété column-rule-width spécifie la largeur de la règle entre les colonnes. La Syntaxe CSS column-rule-widthcolumn-rule-width: medium|thin|thick|length|initial|inherit;
| Valeurs par défaut | medium |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columnRuleWidth="10px" |
Valeurs de la propriété column-rule-width
medium : Valeur par défaut. Définit une règle moyennethin : Définit une règle fine
thick : Définit une règle épaisse
length : Spécifie la largeur de la règle
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.
Exemple Copier le code
div {
column-rule-width: 10px;
}
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 50 4 -webkit- | 10 | 52 2 -moz- | 9 3.1 -webkit- | 37 15 -webkit- 11.1 -o- |
Animation de la règle de la colonne : column-rule
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Animation de la règle de la colonne</title>
<style>
#monDIV {
border: 1px solid black;
column-count: 3;
column-rule: 1px outset red;
animation: monAnimation 5s infinite;
}
@keyframes monAnimation {
50% {
column-rule: 50px outset #00ffff;
}
}
</style>
</head>
<body>
<h1>Animation de la règle de la colonne : column-rule</h1>
<p>Changez progressivement la règle entre les colonnes :<p>
<div id="monDIV">
Tristique et egestas quis ipsum. Eget aliquet nibh praesent tristique. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Odio euismod lacinia at quis risus sed vulputate odio ut. Ut morbi tincidunt augue interdum velit euismod in pellentesque. Aliquet eget sit amet tellus cras. Pretium nibh ipsum consequat nisl vel pretium lectus quam id. Ultricies integer quis auctor elit sed vulputate mi sit. Adipiscing vitae proin sagittis nisl. Habitant morbi tristique senectus et netus et malesuada fames ac. Arcu felis bibendum ut tristique et. Purus ut faucibus pulvinar elementum. Lacus laoreet non curabitur gravida arcu. Velit euismod in pellentesque massa. Arcu non odio euismod lacinia at quis risus sed vulputate.
</div>
<p>La propriété column-rule est un raccourci pour toutes les propriétés column-rule.</p>
<p>Les propriétés column-rule-color et column-rule-width sont <em>animatable</em> en CSS.</p>
</body>
</html>