Stručný opis kaskádneho štýlu CSS1

OBSAH

1 Umiestnenie v HTML
2 Definície štýlov
2.1 Pseudotriedy
3 Formátovanie blokov
4 Fonty
5 Farba
6 Vlastnosti textu
7 Dĺžkové jednotky

1 Umiestnenie v HTML

V nasledujúcom príklade vidno štyri rôzne spôsoby vkladania štýlu do HTML dokumentu

<HTML>
  <HEAD>
    <TITLE>title</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css" 
      HREF="http://style.com/cool" TITLE="Cool" MEDIA="print">
    <STYLE TYPE="text/css">
      @import url(http://style.com/basic);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Headline is blue</H1>
    <P STYLE="color: green">While the paragraph is green.</P>
  </BODY>
</HTML>

LINK (odporúčané) definuje externý súbor so štýlom a má tieto atribúty:
- TYPE="text/css" - povinne, môže byť aj iný typ
- REL=STYLESHEET | ALTERNATE STYLESHEET - povinne
- HREF=<URL> - povinne
- TITLE=<NAME> - povinné len pre alternate stylesheet
- MEDIA=screen | tty | tv | projection | handheld | print | braille | aural | all - podľa potreby
STYLE - obsahuje definície štýlov pre tento dokument a má povinný atribút typ štýlu, napr.: TYPE="text/css".
Vnútro sa odporúča zakomentovať  a v prípade potreby komentovania časti definície použiť /* komentár */.
@import url(http://style.com/basic) - štandardný spôsob ako pridať súbor s novými štýlmi. Môže sa nachádzať v STYLE, alebo aj v samotnom css súbore, ale vždy pred ostatnými definíciami, ináč je ignorovaná!
<<TAG> STYLE="<style-definiton>"> - štýl je definovaný len pre túto jednu položku (neodporúčané).

Prezerače štandardne ignorujú celú definíciu, ak je v nej aspoň jedna chyba.

2 Definície štýlov

Definícia štýlu má vždy takýto tvar (posledná bodkočiarka je nepovinná):

<SELECTOR> { [ <VLASTNOSŤ> : <HODNOTA> ; ]* }

Selektor je jedna alebo viacero HTML značiek, ktoré môžu byť upresnené triedou alebo identifikátorom:

P - jednoduchý selektor - značka odseku (paragraf)
P.prvy - špecializovaný selektor - týka sa len tých značiek P, ktoré patria do triedy prvy. V tele dokumentu je táto značka písaná <P CLASS=prvy>text</P>. Definícia pre triedu tu má prednosť pred všeobecnou definíciou.
.prvy - špecializovaný selektor - týka sa všetkých tých značiek, ktoré patria do triedy prvy. Inak sa zhoduje s predchádzajúcou definíciou.
P#rt56 - špecializovaný selektor - týka sa len jedinej značky, ktorá má identifikátor rt56. V tele dokumentu je táto značka písaná <P ID=rt56>text</P>. V dokumente nemôžu existovať dve rovnaké značky s rovnakým identifikátorom. Definícia pre identifikátor tu má prednosť pred triedou aj všeobecnou definíciou.
#rt56 - špecializovaný selektor - týka sa všetkých tých značiek, ktoré majú identifikátor rt56. Pre každý typ značky to môže byť len jedna. Inak sa zhoduje s predchádzajúcou definíciou.
P, H1, H2 - skrátený zápis, definícia sa bude týkať všetkých uvedených značiek. Oddeľovačom je čiarka.
DIV P - kombinovaný selektor - definícia sa týka len takého P, ktoré sa nachádza vo vnútri DIV.
H1 B, P.def DIV UL, P.iny I.dva - príklad pre tri rôzne kombinované selektory.

Príklad na priradenie hodnoty atribútom:

BODY { background: white url(pozadie.jpg);
       color: #008;
       font: bold large arial
       }

Jednotlivé definície sú oddelené bodkočiarkami, ak je viac hodnôt pre jeden atribút, sú zvyčajne oddelené medzerami.

2.1 Pseudotriedy

Pseudotriedy vytvára prehliadač pri vytváraní dokumentu. Rozlišujeme ich ako triedy pri definíciách ale nerozlišujeme ich v dokumente (rozlíši ich prehliadač). Sprístupnené sú tieto pseudotriedy:

  /****** Oddeľovačom pseudotriedy je dvojbodka! ******/
A:link { color: red }       /* nenavštívená linka */
A:visited { color: blue }   /* navštívená linka */
A:active { color: lime }    /* aktívna (kliknutá) linka */

P:first-line { font-variant: small-caps }       /* ovplyvní prvý riadok */
P:first-letter { font-size: 200%; float: left } /* ovplyvní prvý znak */

Pseudotrieda môže byť kombinovaná s normálnou triedou, pričom pseudotrieda sa vždy uvádza za normálnou triedou. V kombinovanom selektore môže byť použitý odkaz len na jednu pseudotriedu:

A.external:visited { color: blue }

3 Formátovanie blokov

Všetky blokové elementy majú

margin (transparent) - vonkajšia hranica - vždy priehľadná, predstavuje vonkajší rozmer elementu
border - okraj, ktorý môže byť viditeľný, štandardne priehľadný
padding - priestor medzi okrajom a obsahom elementu, predstavuje pozadie elementu, ktoré je tiež štandardne priehľadné
content - obsah elementu - predstavuje vnútorný rozmer elementu - width a height

Všetky hodnoty pre veľkosť sa uplatňujú v smere hodinových ručičiek od hora, do prava, dolu a do ľava.
Keď je šírka (width) pevná a margin-right a margin-left sa nastavia na auto, element bude centrovaný.

UL {background: red;
    margin: A B C D;
    border-width: E F G H;
    padding: I J K L;
    }

margin-top, margin-right, margin-bottom,
margin-left, margin{1,4}: auto | <length> | <percentage>

padding-top, padding-right, padding-bottom,
padding-left, padding{1,4}: <length> | <percentage>

border-top-width, border-right-width, border-bottom-width,
border-left-width, border-width{1,4}: thin | medium | thick | <length>

border-color: <color>{1,4}

border-style{1,4}: none | dotted | dashed | solid |
                   | double | groove | ridge | inset | outset

border-top, border-right, border-bottom,
border-left: <border-<dir>-width> || <border-style> || <color>

border: <border-width> || <border-style> || <color>
       /* border nastavuje vždy naraz všetky štyri okraje! */

width: auto | <length> | <percentage>

height: auto | <length>

display: block | inline | list-item | none

white-space: normal | pre | nowrap

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman |
                 | lower-alpha | upper-alpha | none

list-style-image: none | <url>

list-style-position: outside | inside

list-style: [disc | circle | square | decimal | lower-roman | upper-roman |
            | lower-alpha | upper-alpha | none] || [inside | outside] ||
            || [<url> | none]


UL { list-style: outside | inside }

Nastavenie atribútu float spôsobí, že vybraný objekt sa presunie vľavo (vpravo) a okolitý text ho bude obtekať. Je vždy zarovnaný na vrch riadku. Atribút clear pre text spôsobí, že text bude zobrazený až pod príslušnými float objektami.

float: none | left | right

clear: none | left | right | both

4 Fonty

font-family: [[ <family-name> | <generic-family> ],]*
             'serif' (e.g. Times) 
             'sans-serif' (e.g. Helvetica) 
             'cursive' (e.g. Zapf-Chancery) 
             'fantasy' (e.g. Western) 
             'monospace' (e.g. Courier)

font-style: normal | italic | oblique

font-variant: normal | small-caps

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 |
             | 400 | 500 | 600 | 700 | 800 | 900
     normal == 400
     bold  ==  700

font-size: <absolute-size> | <relative-size> | <length> | <percentage>
     <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large
     <relative-size> = larger | smaller
     <length>        = 1.5em | 2ex
     <percentage>    = 150%

font: [ <font-style> || <font-variant> || <font-weight> ]?
      <font-size> [ / <line-height> ]? <font-family>

Font-families sa oddeľujú čiarkou! Prehliadač vyberie prvý, ktorý má k dispozícii.

5 Farba

Farby sú definované RGB systémom, prvá zložka je červená, druhá zelená a tretia modrá.

color: transparent | #$$$$$$ | #$$$ | rgb(r,g,b) | rgb(r%,g%,b%) | <MENO>

#$$$$$$ - farba definovaná šestnáskovým číslom, pre každú zložku od 00 do FF
#$$$ - skrátený formát, každá číslica sa pri vyhodnotení zdvojí
rgb(r,g,b) - zápis desiatkovými číslami, každá zložka od 0 do 255
rgb(r%,g%,b%) - ako predchádzajúci prípad, len každá zložka od 0% do 100%

`<MENO> -`	`Black`	`= "#000000"`	`Green`	`= "#008000"`
	`Silver`	`= "#C0C0C0"`	`Lime`	`= "#00FF00"`
	`Gray`	`= "#808080"`	`Olive`	`= "#808000"`
	`White`	`= "#FFFFFF"`	`Yellow`	`= "#FFFF00"`
	`Maroon`	`= "#800000"`	`Navy`	`= "#000080"`
	`Red`	`= "#FF0000"`	`Blue`	`= "#0000FF"`
	`Purple`	`= "#800080"`	`Teal`	`= "#008080"`
	`Fuchsia`	`= "#FF00FF"`	`Aqua`	`= "#00FFFF"`

background-color: transparent | <color>

background-image: none | <url>

background-repeat: repeat | repeat-x | repeat-y | no-repeat

background-attachment: scroll | fixed /* či sa pozadie posúva s textom */

background-position: [<percentage> | <length>]{1,2} |
                     | [top | center | bottom] || [left | center | right]

background: <background-color> || <background-image> || <background-repeat> ||
            <background-attachment> || <background-position>

6 Vlastnosti textu

word-spacing: normal | <length>

letter-spacing: normal | <length>

text-decoration: none | [ underline || overline || line-through || blink ]

vertical-align: baseline | sub | super | top | text-top | middle |
                | bottom | text-bottom | <percentage>

text-transform: none | capitalize | uppercase | lowercase

text-align: left | right | center | justify

Odsadenie prvého riadku:

text-indent: <length> | <percentage>

line-height: normal | <number> | <length> | <percentage>

7 Dĺžkové jednotky

Relatívne

em - výška fontu elementu
ex - výška písmena x
px - pixely
% - percentá (zvyčajne výšky fontu, blok zvyčajne rozmer okna)

Absolútne

in - inches, 1in = 2.54cm
cm - centimetre
mm - millimetre
pt - points, 1pt = 1/72 in = 0.35mm (približne)
pc - picas, 1pc = 12pt

Z originálu skrátil a preložil: Ivan Kapustík