CSS lisamine

Autor: Margo Munner | Kuupäev: 13.10.2007

Selles juhendis selgitan kõiki levinumaid võimalusi lisamaks CSS-i XHTML koodile.

Nüüd, kus on CSS-faili struktuur juba veidikenegi tuttav, tutvustan võimalusi, kuidas CSS-i siduda kindla XHTML dokumendiga.

Eraldi CSS fail (element: link)

Antud võimalust kasutatakse üldjuhul võrgulehtede loomisel, et rakendada ühtseid stiile mitmetele www-dokumentidele korraga. Selleks lisatakse igale XHTML-dokumendile link-elemendi abil stiililehe asukoht ning luuakse vastav .css laiendiga fail. XHTML-koodi täiendatakse seega päiseosas (head) näiteks järgnevalt:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>See on XHTML õppimise esimene näiteleht</title>
  <link rel="stylesheet" type="text/css" href="stiilid.css" media="all" />
</head>
<body>

</body>
</html>

Eraldi CSS-faili saab lisada ka kasutades teisi võimalusi. Praegu piirdun sellega. Olgu siis öeldud, et fail nimega stiilid.css peaks sisaldama dokumendile sobivat CSS koodi (näiteks see, mis kirjutasime eelmises juhendis). Sellisel viisil saab stiililehti lisada ka mitu tükki ühele XHTML dokumendile, sh. saab niimoodi eristada meediumi tüüpi - näiteks teha erinev stiilileht printversiooni või mobiiltelefoni lehitseja tarbeks.

CSS kirjutatuna XHTML dokumenti (element: style)

Element style abil on võimalik lisada stiilid XHTML dokumendile ka sellesama dokumendi sisse. Sellisel juhul võiks lehe XHTML struktuur näha välja umbes selline:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>See on XHTML õppimise esimene näiteleht</title>
<style type="text/css">
body {
  background-color: blue;
}
#unikaalne_plokk {
  width: 100%
}
.mitmekordselt_kasutatav_plokk {
  width: 200px;
}
</style>
</head>
<body>

</body>
</html>

Kõik, mis asub <style type="text/css">siin vahel</style> peaks seega olema CSS-vormeeringus. Ülejäänud osas on tegemist tavalise XHTML dokumendiga.

CSS ja XHTML läbisegi (atribuut: style)

XHTML elementidele saab määrata atribuudi style. See võimaldab rakendada CSS-i otse XHTML koodi sees. W3C maailmas pole see just kõige enam soovitatud variant, kuna eesmärgiks on hoida stiilid ja XHTML osa lehel võimalikult suurel määral lahus.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>See on XHTML õppimise esimene näiteleht</title>
</head>
<body>

<h1 style="color: red; text-align: center;">See on "Lorem ipsum" teksti tutvustav jutt</h1>

</body>
</html>

Selline kood kuvab pealkirja kirjutatuna punaselt ning joondatuna dokumendi keskele.

Sellega on ära toodud kõige enam kasutatavad võimalused CSS stiilide lisamiseks XHTML dokumentidele.

Kommentaarid, arvamused, küsimused

Postitaja nimi:

Kommentaari pealkiri:

Kommentaari sisu:

Kontrollküsimus (loe selgitust kõrvalt)!

Vasta küsimusele: Mis värvi on taevas siis, kui seal ühtegi pilve ei ole?

Teadmiseks kommenteerijale!

Edukaks postitamiseks tuleb täita kõik väljad. Maksimaalne sisuosa pikkus on 10'000 tähemärki, teistel väljadel 200 tähemärki!

Kommentaari sisuosas saab kasutada HTML koodi, kuid seda mitte tekstitöötluseks, vaid näitliku materjali sisestamiseks. Kõik, mis asub <nende märkide vahel> kuvatakse kommentaarilehel nähtava tekstina ning märgid ise tõlgitakse erimärkideks!

Kontrollküsimus on mõeldud kuritahtlike robotite takistamiseks. Palun vasta esitatud küsimusele eesti keeles läbivalt väikeste tähtedega, nimetavas käändes ning võimalikult konkreetselt!

NB! RSS-lugemistarkvara abil kommentaare postitada ei saa!

© Margo Munner | Sisukaart