Verige

Različne osnovne selektorje z omejitvami lahko povežemo v poljubno dolgo verigo, pri čemer sosednja člena povežemo z enim izmed spodnjih treh operatorjev ( presledek, > +). Okoli operatorjev > in + lahko zaradi preglednosti pišemo presledke, niso pa obvezni.
E F tiste pojavitve elementa F, ki so potomci pojavitev elementa E,
E > F tiste pojavitve elementa F, ki so otroci pojavitev elementa E,
E + F tiste pojavitve elementa F, ki so naslednji sorodniki pojavitve elementa E (element E je predhodni sorodnik elementa F).

<html>
       <head>
               <style type="text/css">
                        h1 b { font-style: italic; color:red }
                       h1 + h2 { margin-left: 15mm; color:blue}
                       body > p { font-weight: bold; font-size:10pt; color:green}
                       div > p {text-indent:25px}
                       .vprasanje b { font-style: italic }
                       a img { border: none }               
             </style>
       </head>
       <body>
               <h1>To je <b>poudarjena</b> beseda v naslovu - selektor - h1 b { font-style: italic; color:red }</h1>
               <h2> Podpoglavje - selektor h1 + h2 { margin-left: 15mm; color:blue} </h2>
               <p> To je otrok elementa body - selektor body > p { font-weight: bold; font-size:10pt; color:green}</p>
               <div>   
                       <p class="vprasanje">To je <b>poudarjena</b> beseda v vprašanju - selektor .vprasanje b { font-style:     italic } in div > p {text-indent:25px} </p>
                       <p>To pa je <b>poudarjena</b> beseda v navadnem odstavku - selektor div > p {text-indent:25px}</p>
                       <p>Aktivna slika - selektor a img { border: none } in div > p {text-indent:25px}: 
               <a href="http://www.feri.uni-mb.si"><img src="smiley.gif" alt="Smeško"></a> 
        </p>
               </div>
       </body>
</html>

Primer uporabe navideznih razredov (pseudo class) definicije:

Primer 1:

<a class= "zeleno" href="http://www.feri.uni-mb.si">FERI</a>


a.zeleno:hover {color: #00FF00}

Če je nad tako povezavo kazalec miške se bo izpisana zeleno (premaknite se nanjo).

Primer 2:

div > p:first-child { text-indent:25px }

Ta selektor bo vplival na prvi odstavek znotraj <div>:

<div>      
    <p> Ta odstavek bo levo zamaknjen. </p> 
           
    <p> Ta odstavek ne bo levo zamaknjen </p> 
</div>

Primer definicije navideznega (pseudo) elementa

Primer 1:

div:first-letter

{

color: #ff0000;

font-size:xx-large

}

Prva črka za <div> HTML označbo se izpiše veliko in rdeče.

Primer 2:

p {font-size: 12pt}

p:first-line {color: #0000FF; font-variant: small-caps}

<p> Prva vrstica odstavka se izpiše z velikimi črkami in modro, ostale vrstice se izpišejo normalno </p>

Primeri navideznih razredov in navideznih elementov

Omejitve:

Omejitve, ki se pričnejo z dvopičjem, pa določajo, v kakšnem stanju mora biti element:
- :link element je še neobiskana povezava
- :visited element je že obiskana povezava
- :hover nad elementom je miškin kurzor
- :active element je aktiven (uporabnik je pritisnil tipko na miški in je še ni spustil)
- :focus element ima fokus
- :lang element HTML vsebuje kodo v specificiranem jeziku (npr :Lang(C) vsebina elementa je v jeziku C )
- :first-child element je prvi neposredni potomec nekega drugega elementa
- :first-letter definira stil prvi črki, ki sledi HTML elementu
- :first-line definira stil prvi vrstici, ki sledi elementu HTML
- :before doda vsebino pred element HTML
- :after do vsebino po zaključku elementa HTML

Omejitve - primeri

a:link { color: blue }

a:visited { color: magenta }

a:hover { text-decoration: underline }

a:active { background-color: yellow }

a:focus {color: #00FF00} –ne deluje v IE

a:first-child {text-decoration:none}

q:lang(no) {quotes: "~" "~"} – ne deluje v IE

div > p:first-child {text-indent:25px}

p:first-letter {color: #ff0000;font-size:xx-large}

p:first-line {color: #ff0000; font-variant: small-caps}

h1:before {content: url(smiley.gif)} – ne deluje v IE

h1:after {content: url(smiley.gif)} – ne deluje v IE

Primer gradnje drop-down menuja s pomočjo navideznega razreda hover

<html xmlns = "http://www.w3.org/1999/xhtml">

                  <head>

                     <title>

                        Drop-Down Menu
                     </title>

                     <style type = "text/css">

                         body                { font-family: arial, sans-serif }

                        div.menu          { font-weight: bold;

                                                   color: white;

                                                   border: 2px solid #225599;

                                                   text-align: center;

                                                   width: 10em;

                                                   background-color: #225599 }

                        div.menu:hover a  { display: block }

                        div.menu a        { display: none; 

                                                   border-top: 2px solid #225599;

                                                    background-color: white;

                                                    width: 10em;

                                                   text-decoration: none;

                                                    color: black }

                        div.menu a:hover  { background-color: #dfeeff }                        

                    </style>

                  </head>

                  <body>

                       <div class = "menu">Kaj vas zanima?

                        <a href = "#">Osnovni podatki</a>

                        <a href = "#">Novice</a>

                        <a href = "#">Zabava</a>

                        <a href = "#">Blog</a>

                        <a href = "#">Pišite nam</a>

                     </div>

                  </body>

               </html>

CSS enote

Absolutne enote:
- mm - milimeter
- cm - centimeter (1cm = 10mm)
- in - inch (1in = 2.54cm)
- pt - point (72pt = 1in)
- pc - pica (1pc = 12pt)
Relativne enote:
- em - velikost trenutne pisave

(2em je dvakratna velikost pisave (font-size)

- ex - višina črke x v trenutni pisavi

(polovica velikosti pisave (font-size)

Zaslonske enote:
- px - pixel (običajno je 96px = 1in)
Procenti ( 74%, -47.72%, +8.33%)