Za pomocą właściwości column-rule-width możemy określić rozmiar grubości linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.
Informacje dodatkowe
gdy stylem linii oddzielającej kolejne kolumny, na które została podzielona treść elementu HTML jest styl none lub hidden, wtedy rozmiarem grubości wspomnianej linii jest zawsze rozmiar 0
Informacje techniczne o właściwości column-rule-width
Zobacz więcej informacji o interpretacji właściwości column-rule-width.
Opis wartości właściwości column-rule-width
rozmiar
Wyjaśnienie
Za pomocą właściwości column-rule-width oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną możemy określić rozmiar grubości linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.
Przykład
column-rule-width:8px;
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
Rozmiar grubości linii oddzielającej kolejne kolumny, na które została podzielona treść przykładowego elementu "div" wynosi 8 pikseli, ponieważ do wspomnianego elementu "div" została dodana właściwość "column-rule-width" wraz z wartością "8px".
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-width:8px;
column-rule-style:solid;
column-rule-color:black;
font-size:1.3em;
background-color:#7DCDE8;
}
</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>
grubość linii
Wyjaśnienie
Za pomocą właściwości column-rule-width oraz dowolnej dostępnej wartości grubości linii możemy określić rozmiar grubości linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.
Przykład
column-rule-width:thin;
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
Rozmiarem grubości linii oddzielającej kolejne kolumny, na które została podzielona treść przykładowego elementu "div" jest rozmiar cienki, ponieważ do wspomnianego elementu "div" została dodana właściwość "column-rule-width" wraz z wartością "thin".
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-width:thin;
column-rule-style:solid;
column-rule-color:black;
font-size:1.3em;
background-color:#7DCDE8;
}
</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>