Ostatnio edytowany:

grupa wartości

Autor: Virtual Patriot

Opis

Niektóre właściwości CSS umożliwiają nam podanie kilku różnych wartości należących do tej samej grupy właściwości CSS. Z reguły każdą kolejną wartość należącą do tej samej grupy należy oddzielić od poprzedniej wartości przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji).

/*
  ### BORDER-RIGHT ##########################################
  ##  BORDER-RIGHT-WIDTH  |szerokość prawego obramowania|  ##
  ##  BORDER-RIGHT-STYLE  |styl prawego obramowania     |  ##
  ##  BORDER-RIGHT-COLOR  |kolor prawego obramowania    |  ##
  ###########################################################
*/

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  border-right:9px solid black; /* szerokość, styl oraz kolor prawego obramowania */
}

/* REGUŁA - 2 */
div {
  border-right-width:9px;   /* szerokość prawego obramowania */
  border-right-style:solid; /* styl prawego obramowania */
  border-right-color:black; /* kolor prawego obramowania */
}

Przykład

  border:9px solid black;
do tego elementu "div" zostało dodane prawe obramowanie posiadające rozmiar grubości równy 9 pikseli, styl "solid" (pojedyncza ciągła linia) oraz kolor czarny, ponieważ do tego elementu "div" została dodana właściwość "border-right" wraz z następującą grupą wartości: "9px solid black"

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 {
        border:9px solid black;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      do tego elementu "div" zostało dodane prawe obramowanie posiadające rozmiar grubości równy 9 pikseli, styl "solid" (pojedyncza ciągła linia) oraz kolor czarny, ponieważ do tego elementu "div" została dodana właściwość "border-right" wraz z następującą grupą wartości: "9px solid black"
    </div>

  </body>
</html>

Interpretacja

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak