Tee seuraavanlainen tiedosto:
<?xml version='1.0' standalone='yes'?>
<?xml-stylesheet type="text/css" href="harj3a1.css"?>
<document>
<body>
Dokumentin alussa on varoitus.<warning>Voit joutua ojasta allikkoon.</warning> Muita huomautustyyppejä ovat sitten pienet vihjeet <tip>Parempi katsoa kuin katua</tip> ja myös toimintavaihtoehdot: <resource>Parempi pyy pivossa kuin kymmenen oksalla.</resource>
</body>
</document>
Tee sitten sitä varten tyylitiedosto harj3a1.css:
body {display : block}
tip {margin-left:1.5cm;width:250px;border:solid 3px
black;position:relative; background-color:yellow;}
resource {margin-left:1.5cm;width:250px;border:solid 3px
black;position:relative; background-color:green;}
warning {margin-left:1.5cm;width:250px;border:solid 3px
black;position:relative; background-color:red;}
Tallenna ja testaa näiden toiminta. Muokkaa tyylitiedosto yksinkertaisemmaksi niin, että kaikille yhteiset tyylimäärittelyt annetaan vain kerran, ja tallenna nimellä harj3a2.css.
Harjoituksessa 1 suunnittelit, miten esittäisit CD-levyä koskevat tiedot XML-muodossa.
Seuraavaksi luo CD-esittelystä selaimella
aseteltu sivu CSS-tyylitiedoston avulla. Täydennä tiedoston
dataa siten, että sitä on riittävästi kiinnostavan
tulostuksen aikaansaamiseen. Käytä
erilaisia värejä, sisennyksiä tai kirjasintyylejä
erityyppiselle tiedolle.
Voit kehittää CD-esitystä paremmaksi käyttäen hyväksi esim. taulukoita, lohkojen sijoittelua, kuvan
lisäämistä sekä sivupalkkia (alla esimerkki sivupalkin
määrittelystä).
<!--
<style id =”internalstyles”>
style {display : none}
para {display : block; font-family: Arial; position:relative;}
jokupalkki {display : block; float: right; width:250px;border:inset 3pt; background-color:#C0C0FF;padding:3px; }
jokupalkki heading{display : block; font-size: 18pt;}
jokupalkki para{display:block; font-size: 10pt;}
</style>
-->
Jos tyyli on XML dokumentin sisäinen, laita tyyliviittaus muotoon
<?xml-stylesheet type="text/css" href=”#internalstyles” ?>
ja huolehdi siitä, että style-elementti on rakenteen mukaisesti sopivassa paikassa.
Tallenna ja testaa jälleen parilla selaimella. Voit helposti havaita, että XML ja CSS yhdistelmänä eivät vielä riitä kunnollisen lopputuloksen tekemiseen, joten voit suosiolla jättää vaativat asiat toteutettaviksi vaikkapa XSLT:llä.
 |
Päivittänyt: Jaana Holvikivi Muutettu 11.1.2011 |