Proprietà CSS column-rule-style
La proprietà CSS column-rule-style imposta lo stile della riga tra le colonne. Scopri i valori con esempi illustrati.
La proprietà CSS column-rule-style imposta lo stile della riga (separatore) disegnata tra le colonne di un layout multi-colonna. Il separatore di colonna funziona esattamente come un border: si trova nel column-gap e separa visivamente le colonne adiacenti, accettando lo stesso insieme di stili di linea utilizzati dai bordi.
Questa proprietà fa parte delle proprietà CSS3.
column-rule-style è una delle tre sotto-proprietà che compongono la proprietà abbreviata column-rule, insieme a column-rule-width e column-rule-color. Da sola controlla solo la forma della linea — generalmente si combinano tutte e tre per ottenere un risultato visibile.
Quando usarla
Usa column-rule-style ogni volta che dividi il testo in più colonne e vuoi un divisore visibile — come in un layout da giornale o rivista. Poiché il separatore si trova all'interno del gap, non occupa spazio aggiuntivo e non spinge mai i contenuti, quindi è un modo pulito per separare le colonne senza modificare la larghezza del layout.
Per utilizzare questa proprietà devi prima trasformare un elemento in un contenitore multi-colonna con le proprietà columns o column-count — il separatore non ha nulla tra cui disegnare se c'è una sola colonna.
Cose a cui prestare attenzione
- Il separatore è invisibile per impostazione predefinita perché lo stile iniziale è
none. Anche dopo aver impostato uno stile, il separatore non verrà renderizzato a meno che column-rule-width non sia maggiore di0(la larghezza predefinita èmedium, che di solito è visibile). - Gli stili 3D —
groove,ridge,inseteoutset— dipendono dal colore del separatore. Con un colore molto chiaro otransparent, l'effetto 3D può essere difficile da vedere; imposta column-rule-color in modo esplicito. hiddenenoneentrambi non disegnano nulla, mahiddenriserva comunque una larghezza nel gap, mentrenonesi riduce a larghezza zero — la differenza conta solo quando altri stili di separatore lo incontrano.
La proprietà column-rule-style ha i seguenti valori:
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
| Valore iniziale | none |
|---|---|
| Si applica a | Elementi multicolonna. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.columnRuleStyle = "dashed" ; |
Sintassi
Sintassi della proprietà CSS column-rule-style
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Esempio della proprietà column-rule-style:
Esempio della proprietà CSS column-rule-style con valore dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: dotted;
}
</style>
</head>
<body>
<h2>Column-rule-style property example</h2>
<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>Risultato
Nel prossimo esempio il separatore tra le colonne è double. Qui al separatore viene assegnato un colore con la proprietà column-rule-color e uno spessore esplicito con column-rule-width, in modo che la doppia linea sia chiaramente visibile.
Esempio della proprietà column-rule-style con il valore "double":
Esempio della proprietà CSS column-rule-style con valore double
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: double;
column-rule-color: #1c87c9;
column-rule-width: 5px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-style property example</h1>
<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>Valori
| Valore | Descrizione |
|---|---|
| none | Nessun separatore è definito. Questo è il valore predefinito. |
| hidden | Il separatore è nascosto. |
| dotted | Il separatore è punteggiato. |
| dashed | Il separatore è tratteggiato. |
| solid | Il separatore è continuo. |
| double | Il separatore è doppio. |
| groove | Il separatore è a scanalatura 3D. La larghezza e il colore definiscono l'effetto. |
| ridge | Il separatore è a cresta 3D. La larghezza e il colore definiscono l'effetto. |
| inset | Il separatore è incassato 3D. La larghezza e il colore definiscono l'effetto. |
| outset | Il separatore è in rilievo 3D. La larghezza e il colore definiscono l'effetto. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
- column-rule — proprietà abbreviata che imposta larghezza, stile e colore in una sola dichiarazione.
- column-rule-width — spessore del separatore.
- column-rule-color — colore del separatore.
- column-gap — il gap all'interno del quale viene disegnato il separatore.
- column-count e columns — creano il layout multi-colonna.