5. Oppitunti - Otsikoiden muotoilu
Edellisessa kappaleessa opimme käyttämään tyylisivuja. Esimerkiksi:
img {
margin:25px;
border:solid;
border-color:red;
}
Ensin tulee valitsin, eli se jolle halutaan tehdä jotain (eli käytännössä sivulla oleva tägi, tässä tapauksessa img, eli kuva). Tägin ominaisuudet ja niiden arvot ovat aina kaarisulkujen sisässä. Jos ominaisuuksia on useampia, ne erotetaan puolipisteellä.
Tyylisivujen avulla voidaan muotoilla mitä tahansa elementtiä. Tässä esimerkissä muokkaan otsikoita:
1. Kopioi seuraavat koodinpätkät tiedostoon tyyli.css muun koodin perään
h3 {
font-size:1em;
font-family: Arial, SunSans-Regular, Times new roman, Sans-Serif;
margin-top:0.5em;
margin-bottom:0.5em;
margin-left:3em;
}
<h3> on esimerkissäni pienikokoinen väliotsikko. Sen pitäisi olla hieman isompi kuin leipäteksti, mutta ei kuitenkaan liian huomiotaherättävä. Koska leipäteksti on kooltaan 0.8em, valitsen väliotsikon kooksi 1em. (Em on webbisivujen teossa käytettävä mittayksikkö, yksi em on selaimen fontin oletuskoko. Tässä esimerkissä siis pienennän leipätekstiä hieman. )
Seuraavaksi määrittelen fontin. Font-family muodostaa "fonttiperheen", josta käytettävä fontti valitaan. Käytännössä tämä tarkoittaa, että mikäli listan ensimmäistä fonttia ei ole käytössä, valitaan seuraava, jne.
Jotta väliotsikko eroaisi hieman leipäteksistä, laitan marginaalia otsikon ylä- ja alapuolelle (huomaa, että jokaisella tekstikappaleellakin on marginaali, joten todellinen marginaali on tietenkin nämä molemmat yhteenlaskettuna). Sen lisäksi laitan hieman marginaalia myös vasempaan reunaan, joka sisentää väliotsikon.
h2 {
font-family: Times new roman, Arial, SunSans-Regular, Sans-Serif;
font-size:1.3em;
font-weight: bold;
margin:0px;
background-color: #6E86A8;
padding-top: 5px;
padding-left: 10px;
}
<h2> on sivun alaotsikko, joten sitä voi korostaa hieman enemmän kuin pelkkää väliotsikkoa. Käytän siis hieman suurempaa kokoa (1.3em) ja lihavointia (font-weight: bold;). Laitan otsikolle hieman tummemman taustavärin (background-color: #6E86A8;). Värit ilmoitetaan html:ssä ns. heksalukuina. Tässä vaiheessa ei tarvitse ymmärtää väriopin syvempää filosofiaa, riittää kun ajattelet niitä vaikka värien niminä.
Varsinaisen marginaalin sijasta käytän "pehmustetta", eli paddingia. Tämä tekee tyhjää tilaa elementin sisäpuolelle, jolloin otsikkotekstin reuna ei törmää elementin reunaan.
h1 {
font-family: lucida console, Arial, SunSans-Regular, Sans-Serif;
padding-top:25px;
padding-left:25px;
max-width:800px;
line-height:125px;
background-image: url(tausta.jpg);
}
<h1> on pääotsikko, joten sen tulisi herättää huomiota. Kokoa on jo vähän enemmän (2em), mutta tasaisen taustavärin sijasta voisi käyttää jotain tehokkaampaa: taustakuvaa. Valitsen sopivan kuvan, rajaan sen oikean kokoiseksi kuten muutkin kuvat ja tallennan samaan kansioon toisten tiedostojen kanssa esim. nimellä tausta.jpg. (Voit ladata käyttämäni taustakuvan tästä.) Ominaisuus background-image: url(tausta.jpg); linkittää taustakuvan sivuumme.
2. Tallenna ja esikatsele
Olemme muuttaneet sivun ulkoasua melkoisesti koskematta itse sisältöön lainkaan. Tätä kutsuisin käteväksi.
« Edellinen: Tyylitiedostot - Seuraava: Palstat »
