Ostatnio edytowany:

column-rule-width

Autor: Virtual Patriot

Opis właściwości column-rule-width

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.

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".

Dodatkowe techniczne informacje o właściwości column-rule-width

przeznaczenie

element HTML, którego treść może oraz została podzielona na kolumny

pozycja

dowolna

dziedziczenie

nie

wartość initial

medium

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości column-rule-width

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości column-rule-width

rozmiar

Opis

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:#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>

grubość linii

Opis

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.

różne wartości rozmiaru grubości linii

Porównanie wartości rozmiaru grubości linii występujących w języku CSS.

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:#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>