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

Kuvaus:

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 rel="stylesheet" type="text/css" media="screen" href="tyyli.css" />
<link rel="stylesheet" type="text/css" media="print" href="tyyli_printti.css" />

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.
Luokka: »
Avainsanat:

Keskustelu

#310 Rauli H.
2009-02-17 09:01
@Halko: Kiitos hyvästä kommentistasi. Laitoin aikanaan kaskadisuuden lainausmerkkeihin, ja hämärästi viittasin tässä ainoastaan englanninkieliseen termiin, ilman yritystä suomentaa tai määritellä sitä. Kirjoitussäännöt-sivulla en vielä käsittele keskenään ristiriitaisten määritysten suhteita, vaan yksittäisen irrallisen merkinnän koostumusta. Tulkintajärjestys mainitaan tällä sivulla, joten maininta on tässä suhteessa paikallaan täälläkin. Koko kohta on muutenkin jäänyt suppeaksi, ja voisin ehkä täydentää esitystä jossain vaiheessa, vaikkakaan tämän oppaan tarkoitus ei ole olla kaiken kattava lähdeteos, vaan käytännönläheinen, konkreettisesti etenevä opas aloittajalle. Tarpeetonta teoriaa olen välttänyt... vaikka, eihän se koskaan ole tarpeetonta.
#309 Halko
2009-02-17 06:35
”Tyylisivujen 'kaskadisuus' tarkoittaa sitä että samalle elementille voidaan antaa useita määrityksiä.” Tämä on hieman hämmentävä kohta lukijalle. En ole ihan varma haluatko kyseisellä määritellä kaskadisuuden merkityksen vai ilmoittaa mitä käytännön hyötyä kaskadisuus tuo tullessaan. Suosittelisin että kaskadisuus määriteltäisiin jo aikaisemmalla ”kirjoitussäännöt”-sivulla. Kaskadi on sivistyssanana luultavasti monelle tuntematon, ja sen tunteminen helpottaisi ymmärtämään CSS:n tarkoituksen. Lyhyehkö historianoppi helpottaisi tässä kohtaa myöskin. CSS luotiin helpottamaan HTML-dokumenttien jälkieditointia. Sen sijaan että sivujen muotoilu on pirstaloitunut usealle eri sivulle, useaan eri kohtaan; nyt se sijaitsee parhaimmassa tilanteessa vain yhdessä kohtaa tiiviinä pakettina, helpottaen sivustojen tyylin muokkaamista jälkikäteen. Kyseisestä kohdasta muotoilu ”sataa/laskeutuu/putoaa” (vesiputouksen lailla) sivuston eri osiin. Tästä johtunee symbolinen nimike kaskadinen tyylisivu.
#304 Janek T
2009-02-11 07:39
kiitos paljon avusta =)
#303 Rauli Haverinen
2009-02-10 23:47
... ja jos tiedosto on alihakemistossa, merkintätapa on sama kuin suhteellisilla linkeillä http://raulihaverinen.fi/web/xhtml/linkki/ , esim. href="alihakemisto/tyyli.css"
#302 Rauli H.
2009-02-10 23:45
rel-attribuutti kertoo missä suhteessa (relation) ko. linkitettävä tiedosto on XHTML-asiakirjaan - että kyseessä tyylitiedosto (stylesheet). Vaihda vain lopussa kohta href="tyyli.css" viittaamaan omaan tiedostoosi.
#301 Janek T
2009-02-10 21:30
varmaan huomaat että olen uusi, <link rel="stylesheet" type="text/css" media="screen" href="tyyli.css" /> mutta tuossa on "stylesheet" voiko kertoa tarkemmin mitä tuo rel="... meinaa?
#220 Rauli H.
2008-10-25 00:36
Tiedostoja voi hyvin olla useampia, ja eri tapoja voi käyttää myös yhdessä. Pitää vain olla tarkkana miten selaimet tulkitsevat mahdollisesti keskenään ristiriitaiset määrittelyt. Tästä yllä lyhyesti kohdassa "CSS-tyylien järjestys".
#219 Bansku
2008-10-24 22:41
Joo ja vielä haluaisin kysyä voiko samalle sivulle linkittää 2 css-tiedostoa, niin että perusrakenne on toisessa ja yksilöllinen sivulle tehty muotoilu toisessa ettei tarvisi jokaiselle sivulle tehdä erikseen omaa css-muotoilua.
#218 Bansku
2008-10-23 20:09
Vika ei ollut linkityksessa. CSS-tiedoston muotoilutoli vahingossa laitettu style-tagien sisään. Anteeks häiriö. Kiitos
#216 Rauli H.
2008-10-23 19:36
Kyllä tuo siltä kuulostaa että linkityksessä on sittenkin joku pikku virhe. Tarkista vielä (moneen kertaan). Jos tiedosto on alihakemistossa, muista laittaa "hakemisto/tyyli.css". Ja ulkoisessa CSS-tiedostossa ei sitten saa olla <style>-tägejä.
#215 Bansku
2008-10-23 19:20
Mulla on ongelma, en saa css:ää toimimaan ulkoisesti. Linkitys xhtml-sivusta css-tiedostoon on oikein. Sitten kun laitan muotoilun head-tagin sisään, se toimii. Mistä tämä voisi johtua ja onko ratkaisua?
#23 Rauli H.
2008-04-10 16:27
Katso esimerkit luennoilta 2 ja 3 tältä sivulta http://raulihaverinen.fi/varasto/hy2007k/
#22 Ape
2008-04-10 16:14
Musta ois hyvä jos vois laittaa konkreettisesti tonne esimerkin miltä näyttää Kun css:ää ja xhtml:ää on liitetty yhteen. Koska en ainakaan tajua miten se tapahtuu ohjeista huolimatta.

Kommentoi tätä sivua

Kommentit ovat julkisia. Sähköpostiosoitettasi ei julkaista tai jaeta.

*
*
*
http://raulihaverinen.fi/verkko-opas/?id=88