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ä 
		tagissa tyyli määritellään</div>

</body>

</html>

Tässä on itse HTML-dokumentti.

Tässä kappaleessa ei luokka ole voimassa

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

CSS ja id

Yhden elementin tyylimääritykset hoidetaan yleensä id-parametrin avulla. Id voidaan määritellä elementtin 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ä on itse HTML-dokumentti.</p>
	
	<p>Tässä kappaleessa ei määritys ole voimassa</p>


</body>

</html>

Tässä on itse HTML-dokumentti.

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

Id ja div

Edellä näimme vilauksen div-elementistä. Div tagia käytetään yleisesti niputtamaan yhteen elementtijoukkoja. Elementtijoukon ominaisuudet, kuten paikka sivulla voidaan tällöin määritellä sivulla tarkasti.

<STYLE TYPE="text/css">

	#palsta1 {
		position:relative;
		top:20px;
		left:100px;
		width:100px;
		height:200px;
		background-color:#606005;
		border:1px;
		color:#ffffff;		
		font-family:Verdana;
	}

	#palsta2 {
		position:relative;
		top:40px;
		left:0px;
		width:100px;
		height:100px;
		background-color:#606060;
		color:#ffffff;		
		font-family:Verdana;
	}

</STYLE>
	
	<h2>Sivuotsikko</h2>

	<div id="palsta1">Tekstiä ja kuvaa laatikossa</div>

	<div id="palsta2">Toisen laatikon tekstit, kuvat jne...</div>

Sivuotsikko

Tekstiä ja kuvaa laatikossa

Toisen laatikon tekstit, kuvat jne...

Div-elementin css-määrityksiä

Div-elementissä tuntuvat toimivan kaikki fontin laatuun vaikuttavat css-määritykset. Lisäksi alla muutamia muita palstan kokoon ja sijaintiin liittyviä määrityksiä.

position	sijainnin laji	relative tai absolute eli sijainti suhteessa muihin elementteihin sivulla tai sijainti suhteessa sen elementin vasempaan ylänurkkaan, minkä sisällä ollaan
top	sijainti ylhäältä	pikseleinä
left	sijainti vasemmalta	pikseleinä
height	elementin korkeus	pikseleinä
width	elementin leveys	pikseleinä
background-color	taustan väri	esim. heksadesimaalina
background	taustakuva	esim. url(tausta.jpg);
z-index	tason päällekkäisyys	numeerinen arvo 0,1,2 jne. Jos tasot menevät päällekkäin, niin suuremman arvon saanut on päällä.
display	elementin näkyvyys	hidden tai visible
overflow	mitä tehdään, jos sisältö menee reunojen yli	auto, hidden
margin-left	vasen marginaali	koko esimerkiksi 12px
margin-right	oikea marginaali	koko esimerkiksi 12px
margin-top	ylämarginaali	koko esimerkiksi 12px
margin-bottom	alamarginaali	koko esimerkiksi 12px
margin	koskee jokaista marginaalia	koko esimerkiksi 12px
Fonttiin vaikuttavia
font-family	kirjasinlaji	tyylin nimi
font-weight	tekstin tyyli	bold, bolder, normal, lighter
font-style	kirjaisimen tyyli	esimerkiksi normal, italic
font-size	tekstin koko	koko esimerkiksi 12px
color	fontin väri	värin nimi tai RGB-arvo heksadesimaalina
line-height	tekstirivin korkeus	koko esimerkiksi 12px
text-decoration	tekstin alleviivaus	none tai underline
letter-spacing	kirjainten väli	koko esimerkiksi 12px
background-color	tekstin taustaväri	värin nimi tai RGB-arvo heksadesimaalina
text-align	tekstin tasaaminen	left, right, center tai justify
text-indent	tekstin sisentäminen	sisennys esimerkiksi 12px
float	tekstin kierrätys	pikseleinä
clear	tekstin kierrätyksen lopetus	pikseleinä

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.Linkki:link {
		text-decoration: none;
		color:#ff0000;
	}

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

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

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

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


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

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


</STYLE>

</head>


<body>

	<a class="Linkki1" href="http://www.mtv3.fi">http://www.mtv3.fi</a>
	<br />	
	<a id="Linkki2" href="http://www.mtv3.fi">http://www.mtv3.fi</a>


</body>

</html>

http://www.helsinki.fi

http://www.mtv3.fi

Esimerkki

Tehdään esimerkki, jossa rakennetaan koko nettisivu pelkästään div-elementtien varaan.
Huomaa, että palstojen position-arvot on laitettu absolute-mukaisesti. Koska div-elementit sijaitsevat bodyn sisällä lasketaan sijainti koko sivun eli body-elementin vasemmasta ylänurkasta lukien.

Esimerkkisivu


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html>


<head>

	<title>
		Div-esimerkki
	</title>


<style type="text/css">

body {
	background: url('../kuvat/beige-tausta.jpg');
}

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

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

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

a.linkki:active {
		text-decoration: none;
		color:#000055;
}

#linkkilista{	
		position:absolute;
		top:50px;
		left:10px;
		width:200px;
		background-color:#f3e2e2;
		font-family:arial;
		font-size:18px;
}

#otsikkokentta{	
		position:absolute;
		top:30px;
		left:250px;
		width:800px;
		background-color:#f3f2f2;
		font-family:arial;
		font-size:28px;
		text-align:center;
}

#keskiteksti{	
		position:absolute;
		top:70px;
		left:250px;
		width:800;
		height:400;
		background:url(tausta.jpg);
		font-family:arial;
		color:#020211;
		font-size:16;
		text-indent:20;
		line-height:20px;
}


</style>

</head>

<body>


<div id="linkkilista">

Linkkini:<br /><br />
	<a href="http://www.google.fi" class="linkki">Google</a><br />
	<a href="http://www.facebook.com" class="linkki">Facebook</a><br />
	<a href="http://www.youtube.com" class="linkki">Youtube</a><br />
	<a href="http://www.vesay.edu.hel.fi" class="linkki">Koulu</a><br />

</div>


<div id="otsikkokentta">
Sivuni otsikko
</div>



<div id="keskiteksti">
<img src="../kuvat/anim.gif" width="200" align="left" /><br />
Tässä voisi olla kuvaa ja tekstiä koskien jotain sivun asioita.
<br />

</div>

</body>

</html>

Valikko: