4.3 Tyylien edistynyt käyttö - osa 1

Kuvitellaan sivu, jossa on kaksi taulukkoa, Table A ja Table B, ja molempien taulukkojen solujen taustaväriksi halutaan vaaleansininen:

Esimerkki 1 - taulukot sinisellä taustavärillä
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Tyylit, luokat ja elementit - 1</title>
	<style>
	td { background-color: #9090ff; }
	</style>
</head>

<body>
<h3>Table A</h3>
<table>
	<tr>
		<td>yksi</td>
		<td>kaksi</td>
	</tr>
	<tr>
		<td>kolme</td>
		<td>neljä</td>
	</tr>
</table>

<h3>Table B</h3>
<table>
	<tr>
		<td>yksi</td>
		<td>kaksi</td>
	</tr>
	<tr>
		<td>kolme</td>
		<td>neljä</td>
	</tr>
</table>
</body>
</html>

Esimerkkisivu löytyy täältä.

Jos nyt halutaan B-taulukon solujen taustaväriksi punainen niin se pitäisi toteuttaa seuraavalla tavalla:

Esimerkki 2 - taulukot sinisellä ja punaisella taustavärillä
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Tyylit, luokat ja elementit - 2</title>
	<style>
	td { background-color: #9090ff; }
	.red { background-color: red; }
	</style>
</head>

<body>
<h3>Table A</h3>
<table>
	<tr>
		<td>yksi</td>
		<td>kaksi</td>
	</tr>
	<tr>
		<td>kolme</td>
		<td>neljä</td>
	</tr>
</table>

<h3>Table B</h3>
<table>
	<tr>
		<td class="red">yksi</td>
		<td class="red">kaksi</td>
	</tr>
	<tr>
		<td class="red">kolme</td>
		<td class="red">neljä</td>
	</tr>
</table>
</body>
</html>

Esimerkkisivu löytyy täältä.

Helpommalla pääsisi, jos käyttäisi luokkaa koko taulukko-elementille, ja käyttäisi taustavärin määrittämiseen tyylitiedostoa ja hieman erilaista viittaamistapaa. Näin ei tarvitse taaskaan koodissa joka välissä toistaa luokka-määrityksiä (toistoahan kannatti välttää, antaa koneen hoitaa toistot puolestamme):

Esimerkki 3 - taulukoille kokonaan omat tyylimäärittelyt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Tyylit, luokat ja elementit - 3</title>
	<style>
	/* kaikille soluille yhteiset ominaisuudet: */
	td { font-family: arial; text-align: center; width: 100px;}

	/* vain luokan A soluille tarkoitetut ominaisuudet: */
	.a td { background-color: #9090ff; color:white }

	/* vain luokan B soluille tarkoitetut ominaisuudet: */
	.b td  { background-color: red; color:yellow; }
	</style>
</head>

<body>
<h3>Table A</h3>
<table class="a">
	<tr>
		<td>yksi</td>
		<td>kaksi</td>
	</tr>
	<tr>
		<td>kolme</td>
		<td>neljä</td>
	</tr>
</table>

<h3>Table B</h3>
<table class="b">
	<tr>
		<td>yksi</td>
		<td>kaksi</td>
	</tr>
	<tr>
		<td>kolme</td>
		<td>neljä</td>
	</tr>
</table>
</body>
</html>

Esimerkkisivu löytyy täältä.

Koska luokka (a tai b) on määritelty koko taulukolle, taulukon sisällä olevat elementit perivät ko. luokan ominaisuudet. Siinä mielessä olisi voitu ihan yhtä hyvin käyttää riviä (tr) solun (td) sijaan - tosin tällöin ei olisi voitu määrittää yksittäisen solun leveyttä.

Olen käyttänyt vastaavaa menetelmää myös silloin, kun linkkien värit eivät ole oikein toimineet menussa, mutta muualla tekstissä ovat olleet ihan ok:

/* TAVALLISET LINKIT */
a{
	color: #000066;
	text-decoration: none;
}
a:visited{
	color: #0033CC;
}

a:hover{
	color: Black;
	background-color: #66FFFF;
}

/* JA SITTEN MENUN LINKIT - MENUssa eri taustaväri, joten 
   tavallisten linkkien väriasetukset eivät oikein toimi */
.menu a{
	color: #282828;
}
.menu a:visited{
	color: #282828;
}
.menu a:hover {
	background-color : #90EE90;
}

Tavalliselle linkille käytetään ensin mainittuja ominaisuuksia (a, a:visited, a:hover), mutta menu-luokkaiset linkit jälkimmäisiä. Näin voin vaihtaa värejä sen mukaan, missä linkit sijaitsevat.

Yleisesti ottaen tämä on aika huono ratkaisu, sillä linkkien pitäisi aina olla joka sivulla samannäköiset. Tämä siksi että tavallinen mattimeikäläis-käyttäjäkin tietäisi, missä sivun linkit sijaitsevat ja miltä ne näyttävät. Liiallinen graafinen jippoilu ja pelleily voi johtaa siihen, että sivuista tulee epäselvät ja hankalat käyttää - ja sitä tuskin kukaan haluaa. Näistä asioista vielä lisää kurssin loppupuolella.