CSS: Tyylien lisääminen XHTML-asiakirjaan 2008-01-01 02:34

CSS-tyylejä voidaan liittää XHTML-asiakirjaan usealla tavalla. Tässä kolme niistä:

1. rivinsisäisesti, eli style-attribuuttina XHTML-elementin yhteyteen

   <li style="color: #00f;">Sinistä tekstiä</li>

2. sivulle upotettuna, eli style-elementtiin head-elementin sisään

   <style type="text/css" media="all">
     valitsin { ominaisuus: arvo; }
   </style>
   

3. ulkoisesti, eli erilliseen css-tyylitiedostoon johon viitataan head-elementtiin sijoitettavassa link-elementissä

Ulkoinen tyylitiedosto

Ulkoinen tyylitiedosto on usein kätevin tapa liittää sivulle CSS-muotoiluja. Näin sama tyylitiedosto voidaan linkittää kaikille sivuston sivuille, jolloin kaikkia sivuja koskeva ulkoasumuutos voidaan tehdä yhdessä paikassa sen sijaan, että muutos tehtäisiin jokaisella sivulla erikseen. Tyylitiedosto myös tallentuu selaimen välimuistiin ja nopeuttaa siten sivujen latautumista.

CSS-tyylitiedosto linkitetään XHTML-sivun head-elementtiin sijoitettavassa link-elementissä:

link-elementtin attribuutit:

• rel linkitettävän tiedoston suhde asiakirjaan
• type linkitettävän tiedoston tyyppi
• media mediatyyppi jolle tyyli osoitetaan
• href tyylitiedoston sijainti

Huom! Jos CSS-sijoitetaan ulkoiseen tyylitiedostoon, sen ympärille ei pidä laittaa <style>....</style> -merkintää kuten sivulle upotettuna (kohta 2), vaan tiedostoon tulee pelkkä CSS-koodi!

Mediatyypit

Tyylisivujen "kaskadisuus" tarkoittaa sitä että samalle elementille voidaan antaa useita määrityksiä. Näkyvin etu tästä on se, että samalle asiakirjalle voidaan antaa useampia ulkoasuja, oma tyyli eri lukijalaitteille. Edellisessä esimerkissä ensimmäinen rivi tarkoitettiin näytöllä näkyviä muotoiluja varten, jälkimmäinen tulostusta varten.

CSS2 Media Types

Mediatyypeistä lyhyesti.

Media types

Mediatyypit W3C:n CSS-suosituksissa.

CSS-termejä

CSS-sanastoa suomeksi ja englanniksi.

CSS-tyylien järjestys

Mikäli samaan elementtiin kohdistuu useampia tyylimuotoiluja, etusijajärjestys on seuraava.

1. rivinsisäinen
2. upotettu
3. ulkoinen

• Näiden sisällä tarkempi valitsin menee väljemmän valitsimen edelle
• Valitsimien ollessa samanlaiset, viimeisin määritys menee aiemman edelle

!important-sääntö

Edellemainitut voidaan vielä ohittaa !important-säännöllä.

a.ulos {
	color: #0f0 !important;
}

Assigning property values, Cascading, and Inheritance

Tyylimääritysten etusijajärjestyksestä ja periytymisestä W3C:n CSS-spesifikaatiossa.