Autor publikacji: Virtual Patriot - Administrator

sekwencja wartości

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Wyjaśnienie

Wartości niektórych właściwości CSS możemy podać jako sekwencję wartości. Sekwencja wartości to połączenie kilku grup wartości lub kilku wzorców wartości lub kilku wartości danej właściwości CSS. Z reguły każdy kolejny składnik tworzący tę samą sekwencję wartości należy oddzielić od poprzedniego składnika dokładnie jednym znakiem przecinka.

/*
  ### TEXT-SHADOW ###############################
  ##  X      |przesunięcie w poziomie cienia|  ##
  ##  Y      |przesunięcie w pionie cienia  |  ##
  ##  BLUR   |rozmycie cienia               |  ##
  ##  COLOR  |kolor cienia                  |  ##
  ###############################################

  ----------------------------------------------------
  Sekwencja wartości właściwości "text-shadow"
  utworzona z jednego składnika,
  z jednego wzorca wartości właściwości "text-shadow":

  - text-shadow:x y blur color;
  ----------------------------------------------------
  Sekwencja wartości właściwości "text-shadow"
  utworzona z dwóch składników,
  z dwóch wzorców wartości właściwości "text-shadow":

  - text-shadow:x y blur color,
                x y blur color;
  ----------------------------------------------------
  Sekwencja wartości właściwości "text-shadow"
  utworzona z trzech składników,
  z trzech wzorców wartości właściwości "text-shadow":

  - text-shadow:x y blur color,
                x y blur color,
                x y blur color;
  ----------------------------------------------------
  itd.
*/

/* Przykładowe reguły CSS */
div {
  text-shadow:1px 1px 0 white;
}

div {
  text-shadow:1px 1px 0 white,
              2px 2px 2px red;
}

div {
  text-shadow:1px 1px 0 white,
              2px 2px 1px red,
              3px 3px 2px black;
}

Przykład

  text-shadow:1px 1px 0 white, 2px 2px 3px red;

tekst tego elementu "div" posiada dwa różne efekty cienia jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-shadow" wraz z następującą sekwencją wartości: "1px 1px 0 white, 2px 2px 3px red"

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-shadow:1px 1px 0 white, 2px 2px 3px red;
        padding:1em;
        font-size:1.8em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" posiada dwa różne efekty cienia jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-shadow" wraz z następującą sekwencją wartości: "1px 1px 0 white, 2px 2px 3px red"
    </div>

  </body>
</html>

Interpretacja

: tak
: tak
: tak
: tak
: tak
: tak