Ostatnio edytowany:

column-rule-style

Autor: Virtual Patriot

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

Za pomocą właściwości column-rule-style możemy określić styl 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-style

przeznaczenie
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

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

Firefox

tak, lecz z przedrostkiem -moz-

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-style

styl linii

Opis

Za pomocą właściwości column-rule-style oraz dowolnej dostępnej wartości stylu linii możemy określić styl linii oddzielającej kolejne kolumny, na które została podzielona treść interesującego nas elementu HTML.

różne wartości stylów linii

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

Przykład

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

Stylem linii oddzielającej kolejne kolumny, na które została podzielona treść przykładowego elementu "div" jest styl "dashed" (pojedyncza przerywana linia), ponieważ do wspomnianego elementu "div" została dodana właściwość "column-rule-style" wraz z wartością "dashed".

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:5px;
        column-rule-style:dashed;
        column-rule-color:black;
        -moz-column-width:200px;
        -moz-column-rule-width:5px;
        -moz-column-rule-style:dashed;
        -moz-column-rule-color:black;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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>