Za pomocą właściwości column-rule możemy określić kilka różnych cech linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.
Dodatkowe techniczne informacje o właściwości column-rule
tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości column-rule
Interpretacja właściwości column-rule
tak
tak
tak
tak
tak, lecz od wersji 10
tak
Zobacz więcej informacji o interpretacji właściwości column-rule.
Opis wartości właściwości column-rule
grupa wartości
Opis
Za pomocą właściwości column-rule oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
column-rule:8px dotted blue;
}
/* REGUŁA - 2 */
div {
column-rule-width:8px;
column-rule-style:dotted;
column-rule-color:blue;
}
Składniki grupy wartości właściwości column-rule
Ważne
podana przez nas grupa wartości właściwości column-rule nie może zawierać wartości globalnych
Przykładowe zapisy
solid
8px solid
solid red
8px solid red
width
Składnik width nie jest wymaganym składnikiem grupy wartości właściwości column-rule. Składnik width określa wartość właściwości column-rule-width, czyli rozmiar szerokości linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.
Składnik style nie jest wymaganym składnikiem grupy wartości właściwości column-rule. Składnik style określa wartość właściwości column-rule-style, czyli styl linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.
Składnik color nie jest wymaganym składnikiem grupy wartości właściwości column-rule. Składnik color określa wartość właściwości column-rule-color, czyli kolor linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
Linia oddzielająca kolejne kolumny, na które została podzielona treść przykładowego elementu "div" posiada rozmiar szerokości równy 4 piksele, styl "solid" (pojedyncza ciągła linia) oraz kolor niebieski, ponieważ do wspomnianego elementu "div" została dodana właściwość "column-rule" wraz z następującą grupą wartości: "4px solid blue".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
column-width:200px;
column-rule:4px solid blue;
font-size:1.3em;
background-color:#CBFFFF;
}
</style>
</head>
<body>
<div>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>
