Ostatnio edytowany:

column-rule

Autor: Virtual Patriot

Opis właściwości column-rule

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

przeznaczenie

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

pozycja

dowolna

dziedziczenie

nie

wartość initial

medium none currentColor

wyjątki initial

brak

animowanie

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

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

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 grubości linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.

Wartość domyślna

medium

style

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.

Wartość domyślna

none

color

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.

Wartość domyślna

currentColor

Przykład

  column-rule:4px solid blue;
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 gruboś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>