4.4 Tyylien edistynyt käyttö - osa 2

Edellisessä luvussa esitettiin kuinka eri taulukoille saadaan erilainen ulkoasu käyttämällä kullekin taulukolle eri luokkaa. Vastaavan lopputuloksen aikaansaamiseksi on olemassa toinenkin (ehkä jopa parempi) menetelmä, joka kannattaa pistää mieleen: elementin voi nimetä (identifioida) ja tyylitiedostossa voidaan määrittää tietynnimisille elementeille ominaisuuksia.

Esimerkki: elementin nimeäminen ja tyylitiedoston käyttö
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Tyylit ja nimetyt elementit- 1</title>
	<style>
	/* vaikuttaa eka-nimiseen elementtiin: */
	#eka { 
		font-family: arial; 
		border-left: 2px double;
		border-right: 1px dashed;
		border-top: 2px dotted;
		border-bottom: 3px ridge;
		padding-left: 20px; 
		padding-top: 30px; 
		padding-bottom: 10px;}

	/* vaikuttaa eka-nimisen elementin sisällä oleviin h3-elementteihin: */
	#eka h3 { 
		background-color: #909090; 
		width: 40%; 	
		border-bottom: 2px double;
	}

	/* vaikuttaa eka-nimisen elementin sisällä oleviin soluihin: */
	#eka td { background-color: #9090ff; color: white; width: 100px;}

	/* vaikuttaa kaikkiin taulukoihin: */
	table { margin-left: 5%; } 

	/* vaikuttaa toka-nimiseen elementtiin: */
	#toka { 
		padding-left: 20px;
		padding-top: 30px; 
		padding-bottom: 10px;
	}

	/* vaikuttaa toka-elementin sisällä oleviin taulukoihin: */
	#toka table { width: 200px; text-align: center;} 

	/* vaikuttaa toka-nimisen elementin sisällä oleviin soluihin: */
	#toka td  { background-color: red; color:yellow; }
	</style>
</head>

<body>
<div id="eka">
<h3>Table A</h3>
<table>
	<tr>
		<td>yksi</td>
		<td>kaksi</td>
	</tr>
	<tr>
		<td>kolme</td>
		<td>neljä</td>
	</tr>
</table>
</div>

<div id="toka">
<h3>Table B</h3>
<table>
	<tr>
		<td>yksi</td>
		<td>kaksi</td>
	</tr>
	<tr>
		<td>kolme</td>
		<td>neljä</td>
	</tr>
</table>
</div>

</body>
</html>

Esimerkkisivu löytyy täältä.

Huomaa yllä olevasta esimerkistä seuraavat asiat:

  • Tyylitiedostossa voidaan vaikuttaa kaikkiin tietyntyyppisiin elementteihin (esimerkissä table)
  • Tyylitiedostossa voidaan vaikuttaa edellisen lisäksi vain tiettyihin elementteihin. Esimerkissä eka-nimisen elementin sisällä olevalle h3-elementille on määritelty taustaväri, leveys sekä alareunaviiva, ja toka-nimisen elementin sisällä olevalle table-elementille leveys ja tasaus.
  • (Nimetyn) lohkon (div) sisällä voi olla useita eri elementtejä. Esimerkissä: h3, table, tr ja td.
  • Kun lohko on nimetty (identifioitu), voidaan mille tahansa sen sisällä olevalle elementille määritellä omia ("henk. koht.") ominaisuuksia ilman että varsinaiseen HTML-koodiin tarvitsee kajota.
  • Ylimmälle tasolle (esimerkissä div) määritetyt ominaisuudet perityvät alaspäin: esimerkissä ainoastaan eka-nimiselle elementille on määritelty kirjaisintyyppi, ja se vaikuttaa kaikkin sen alla oleviin elementteihin (h3, table/td).

Elementtien nimeämisessä täytyy pitää mielessä, että tarkoitus on yksiselitteisesti identifioida elementti. Et siis voi tehdä kahta (erityyppistä) elementtiä ja antaa niille samaa nimeä. Tässä tapauksessa sinun kannattaisi käyttää enemmin luokkaa kuin id:tä.

Yllä olevassa esimerkissä eri elementit on ryhmitetty (yhden nimetyn) div-elementin avulla yhteen.

div on lohkoelementti, jolla voidaan ryhmittää useita eri (lohko)elementtejä yhden nimikkeen alle.

Vastaavasti span on rivinsisäislementti, jonka avulla voidaan ryhmittää useita eri (rivinsisäis)elementtejä yhteen, tai käyttää jotain itse määriteltyä luokkaa keskellä lohkoelementtiä (esim. kappaleen p sisällä)

Ja vielä: jos et huomannut niin yllä olevasta esimerkistä käy ilmi, että CSS:ssä täytyy elementin padding, margin ja border määrittää joka suuntaan erikseen (left/right/top/bottom).

Lisäksi border-omainaisuudessa tulee kertoa reunaviivan paksuuden lisäksi sen tyyppi (single, double, dashed, dotted...). Myöskin värin voi määrittää samaan syssyyn, esim.

h2 {
	border-bottom : 2px ridge Blue;
}