Autor publikacji
Virtual Patriot - Administrator

kombinacja wartości

Data publikacji
Ostatnio edytowano

Wyjaśnienie

Niektóre właściwości CSS mogą posiadać kombinację wartości należących do tej samej właściwości CSS. Z reguły każdą kolejną wartość należącą do tej samej kombinacji należy oddzielić od poprzedniej wartości przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji).

/*
  Wartości właściwości "text-decoration-line":
  - overline     |linia górna   |
  - line-through |linia środkowa|
  - underline    |linia dolna   |
  ---------------------------------------------------------------------------------------------
  Przykładowe kombinacje wartości właściwości "text-decoration-line":
  - overline line-through           |jednocześnie linia górna oraz linia środkowa             |
  - overline underline              |jednocześnie linia górna oraz linia dolna                |
  - line-through underline          |jednocześnie linia środkowa oraz linia dolna             |
  - overline line-through underline |jednocześnie linia górna, linia środkowa oraz linia dolna|
*/

/* Przykładowa reguła CSS */
div {
  text-decoration-line:overline underline; /* jednocześnie linia górna oraz linia dolna */
}

Przykład

  text-decoration-line:overline underline;
tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline" oraz dodatkową linię dekoracyjną typu "overline" jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z następującą kombinacją wartości: "underline overline"

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 {
        text-decoration-line:overline underline;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline" oraz dodatkową linię dekoracyjną typu "overline" jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z następującą kombinacją wartości: "underline overline"
    </div>

  </body>
</html>

Interpretacja

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak