Tyylimääritykset, luokka ja id

CSS ja luokka

HTML-dokumentissa voidaan tehdä omia tyylimäärityksiä myös luokkana (class). Tämän avulla saamme vahvan keinon vaikuttaa eri elementtien näkyvyyteen, koska luokkaa käyttävät elementit voidaan valita tarkasti ja määritettäviä elementtejä voi olla useita.

Luokka määritetään tyylimäärityksissä pisteen avulla ja body-osan elementtiin kirjoitetaan class-parametri luokan nimellä ilman pistettä.

Luokkaa suositellaan käytettäväksi, jos sinulla on useita elementtejä, jotka noudattavat samaa tyylimääritystä.

<html>

<head> 
<title>
	Dokumentin otsikko
</title>

<STYLE TYPE="text/css">

	.luokka {	color:#1111ff;
			font-size:14px;

		}

</STYLE>

</head>


<body>

	<p class="luokka">Tässä on itse HTML-dokumentti.</p>
	
	<p>Tässä kappaleessa ei luokka ole voimassa</p>

	<div class="luokka">ei väliä missä 
		elementissä tyyli määritellään</div>

</body>

</html>

Tässä on itse HTML-dokumentti.

Tässä kappaleessa ei luokka ole voimassa

ei väliä missä elementissä tyyli määritellään

CSS ja id

Yhden elementin tyylimääritykset hoidetaan yleensä id-parametrin avulla. Id voidaan määritellä elementtiin halutulla nimellä parametriksi ja tyylimäärityksissä siihen viitataan # merkillä.

<html>

<head> 
<title>
	Dokumentin otsikko
</title>

<STYLE TYPE="text/css">

	#jokunimi {	color:#1111ff;
			font-size:14px;

		}

</STYLE>

</head>


<body>

	<p id="jokunimi">Tässä jokin kappale.</p>
	
	<p>Tässä kappaleessa ei määritys ole voimassa</p>


</body>

</html>

Tässä jokin kappale.

Tässä kappaleessa ei määritys ole voimassa

Linkin css-määrityksiä, luokka ja id

Yllä olevia ominaisuuksia voidaan myös määritellä seuraaville linkkielementeille. Itse linkkiin ja sen näkyvyyteen voidaan viitata sekä luokan avulla, että antamalla linkille id.

A:link	normaali linkki
A:visited	linkki, jossa käyty
A:active	linkki, jota painetaan hiirellä
A:hover	linkki, jonka päällä hiiri on

<html>

<head> 
<title>
	Dokumentin otsikko
</title>

<STYLE TYPE="text/css">

a.Luokkalinkki:link {
		text-decoration: none;
		color:#ff0000;
	}

a.Luokkalinkki:visited {
		text-decoration: none;
		color:#00ff00;
	}

a.Luokkalinkki:hover {
		text-decoration: underline;
		color:#0000ff;
	}

a.Luokkalinkki:active {	
		text-decoration: none;
		color:#000000;
	}

#Idlinkki:link {
		text-decoration: underline;
		color:#00ffc0;
	}


#Idlinkki:visited { 
		text-decoration: underline;
		color:#ee0000;
	}

#Idlinkki:hover {
		text-decoration: none;
		color:#0000ff;
	}


</STYLE>

</head>


<body>

	<a class="Luokkalinkki" href="http://www.mtv3.fi">http://www.mtv3.fi</a>
	<br />	
	<a id="Idlinkki" href="http://www.yle.fi">http://www.yle.fi</a>


</body>

</html>

http://www.mtv3.fi

http://www.yle.fi

Valikko: