CSS-lisäesimerkit, XML ja CSS

Käydään läpi CSS:n perusteita HTML-, XHTML- ja XML-dokumentin avulla. Luentovideolla kerrataan kurssin CSS-asiat käytännön esimerkein.

1. HTML, XHTML ja XML

HTML-määrittely ei ole tarkka esimerkiksi lopetustagien kanssa: selain korjaa puutteet omin päin. XHTML- ja XML-dokumentit sen sijaan ovat tarkkoja eivätkä toimi lainkaan, jos dokumentissa on pienikin virhe.

• XHTML-dokumenttia ei tunnisteta, ellei html-elementissä ole määritelty oikeaa nimiavaruutta:

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

• XML-dokumentteihin tyylit linkitetään eri tavalla kuin HTML- ja XHTML-dokumentteihin. Heti dokumentin alkuun lisätään prosessointiohje:

  <?xml-stylesheet type="text/css" href="tyyli.css"?>

• XML-dokumenteilla ei ole oletusulkoasua. Selain ei tiedä, mitä elementit tarkoittavat, joten ilman tyylitiedostoa se esittää sisällön sellaisenaan elementtipuuna.

1.1 Mallidokumentit

Kaikilla mallidokumenteilla on sama tyylitiedosto malli.css, joka muotoilee sekä HTML- että XML-elementit. Sama tiedosto siis riittää molempiin, vaikka elementtien nimet ovat eri.

2. Selaimen oletustyylit

Selaimeen on aina määritelty jokin oletusulkoasu HTML-dokumenteille. Juuri siksi otsikot ovat lihavoituja ja isompia, listoissa on merkit ja linkit ovat sinisiä ja alleviivattuja, vaikka et kirjoittaisi riviäkään CSS:ää.

2.1 Oletusulkoasun nollaaminen

Oletusulkoasun voi nollata seuraavalla tyylillä. Kokeile sitä mallidokumenttiin ja katso, mitä tapahtuu.

* {
  padding: 0;
  margin: 0;
  border: 0;
  display: inline;
  font-size: 1em;
  font-weight: normal;
}

2.2 Ulkoasun palauttaminen nollauksen jälkeen

Nollauksen jälkeen ulkoasu on rakennettava itse. Alla on tiivis malli, joka palauttaa tavallisimmat elementit lähelle selaimen oletusulkoasua. Tämä ei ole täydellinen lista vaan riittää siihen, että esimerkkidokumentti näyttää taas normaalilta. Täydellisen listan löydät Rendering-luvusta.

/* 1. Piilotetaan uudelleen se, mikä ei kuulu näkyä. */
head, title, style, script { display: none; }

/* 2. Palautetaan lohkotason elementit. */
html, body, h1, h2, h3, p, ul, ol, div, pre, blockquote, figure,
header, nav, main, section, article, aside, footer {
  display: block;
}

li    { display: list-item; }
table { display: table; }
tr    { display: table-row; }
th, td { display: table-cell; }

/* 3. Perusasetukset. */
body {
  margin: 1em;
  font-family: sans-serif;
  line-height: 1.5;
}

/* 4. Otsikot: koko, lihavointi ja marginaalit. */
h1 { font-size: 2em;    font-weight: bold; margin: 0.67em 0; }
h2 { font-size: 1.5em;  font-weight: bold; margin: 0.83em 0; }
h3 { font-size: 1.17em; font-weight: bold; margin: 1em 0; }

/* 5. Kappaleet ja listat. */
p, ul, ol, pre, blockquote { margin: 1em 0; }
ul, ol { padding-left: 2.5em; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }

/* 6. Tekstitason elementit. */
strong, th { font-weight: bold; }
em         { font-style: italic; }
code, pre  { font-family: monospace; }
pre        { white-space: pre; }

/* 7. Linkit. */
a:link    { color: #0645ad; text-decoration: underline; }
a:visited { color: #663366; }

/* 8. Lomakekentät: border: 0 poisti niiden reunat kokonaan. */
input, textarea, select, button { border: 1px solid #767676; }

3. Perintä ja taustaväri

HTML-rakenteessa elementti perii äitielementiltään tiettyjä tyylimäärityksiä, kuten kirjasintyypin, kirjasimen koon ja tekstin värin. Perintä on käsitelty CSS-luennon luvussa 4.1.

Kaskadin kolme vaihetta on kuvattu CSS-luennon luvussa 3. Kaksi kohtaa on syytä muistaa tässäkin:

• Jos kaksi sääntöä on yhtä spesifinen, myöhemmin kirjoitettu voittaa. Tämä ei koske vain identtisiä valitsimia: .varoitus ja .tarkea ovat yhtä spesifisiä, joten myöhempi voittaa.
• Spesifisempi valitsin voittaa yleisemmän riippumatta kirjoitusjärjestyksestä.

4. XML ja CSS

CSS ei ole pelkästään HTML:ää varten. Sillä voi muotoilla minkä tahansa XML-dokumentin, eikä selain tarvitse siihen mitään erityistä: riittää, että dokumentin alussa on prosessointiohje ja että jokaiselle elementille kerrotaan ainakin display-ominaisuus.

Alla on kuvitteellinen otuskirja, jossa on oma elementtijoukkonsa: otuskirja, otsikko, otus, nimi, laji, kuvaus ja havaintoja. Näitä elementtejä ei ole missään standardissa, mutta CSS ei siitä välitä.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="otukset.css"?>
<otuskirja>
  <otsikko>Jyväskylän seudun tuntemattomat otukset</otsikko>

  <otus vaarallisuus="suuri">
    <nimi>Validaattorin peikko</nimi>
    <laji>Trollus validator</laji>
    <kuvaus>Piileskelee rivillä 47.</kuvaus>
    <havaintoja>2311</havaintoja>
  </otus>
</otuskirja>

otuskirja { display: block; max-width: 42em; margin: 1em auto; }
otsikko   { display: block; font-size: 1.9em; font-weight: bold; }
otus      { display: block; border: 2px solid #7a3b12; padding: 0.8em; }
nimi      { display: block; font-weight: bold; }
laji      { display: block; font-style: italic; }

/* Pseudoelementit ja attribuuttivalitsimet toimivat XML:ssä
   täsmälleen samoin kuin HTML:ssä. */
havaintoja::before { content: "Havaintoja: "; }
havaintoja::after  { content: " kpl"; }

otus[vaarallisuus="suuri"] { border-color: #b3261e; }
otus::before { content: "Vaarallisuus: " attr(vaarallisuus); float: right; }

• Avaa otuskirja tyyleineen
• Katso koko tyylitiedosto

5. SVG ja CSS

SVG on XML-pohjainen kuvaformaatti, joten sekin on CSS:n muotoiltavissa. Kun SVG kirjoitetaan suoraan HTML-dokumenttiin, sen osat ovat osa dokumenttia ja niihin pääsee käsiksi tavallisilla valitsimilla.

<svg class="kuva" viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"
     role="img" aria-labelledby="svg-otsikko">
  <title id="svg-otsikko">Talo: seinä, katto, ovi ja ikkuna</title>
  <rect class="seina" x="40" y="50" width="120" height="60" />
  <polygon class="katto" points="30,50 100,10 170,50" />
  <rect class="ovi" x="85" y="80" width="30" height="30" />
  <circle class="ikkuna" cx="60" cy="70" r="10" />
</svg>

Värit ja viivat annetaan SVG:n omilla ominaisuuksilla, jotka kirjoitetaan tyylitiedostoon aivan kuten mitkä tahansa CSS-ominaisuudet:

5.1 Erillinen SVG-tiedosto

SVG on XML-dokumentti, joten erillinen .svg-tiedosto muotoillaan täsmälleen samalla tavalla kuin mikä tahansa XML-dokumentti: tiedoston alkuun lisätään sama xml-stylesheet-prosessointiohje, ja tyylit kirjoitetaan erilliseen CSS-tiedostoon.

talo.svg:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="talo.css"?>
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <title>Talo</title>
  <rect class="seina" x="40" y="50" width="120" height="60" />
  <polygon class="katto" points="30,50 100,10 170,50" />
</svg>

talo.css:

.seina {
  fill: #ffe9a8;
  stroke: #23201c;
  stroke-width: 2;
}

.katto {
  fill: #b3261e;
}

Näin sama kuva voidaan esittää eri tyylein vaihtamalla pelkkä tyylitiedosto, aivan kuten HTML-sivullakin.

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <style>
    .seina { fill: #ffe9a8; stroke: #23201c; stroke-width: 2; }
    .katto { fill: #b3261e; }
  </style>
  <title>Talo</title>
  <rect class="seina" x="40" y="50" width="120" height="60" />
</svg>

6. Lisätietoa

• HTML Living Standard: Rendering, selainten suositeltu oletustyylitiedosto.
• MDN: SVG tutorial ja SVG:n esitysominaisuudet.
• MDN: Cascade and inheritance.
• Kurssin CSS-luento, valitsinluento ja asemointiluento.