CSS - tyylimääritykset

HTML-dokumentti näkyy hieman erilaiselta eri selaimissa. Jokaiseen dokumenttiin kotisivuillasi on työlästä kirjoittaa aina samat elementtien määrittelyt. Näiden ongelmien ratkaisemiseksi voimme käyttää CSS (Cascading Style Sheets) tyylikieltä.

CSS voidaan kirjoittaa suoraan HTML-koodiin (joko erilliseen style-tagin sisään tai suoraan elementin parametriksi) tai se voidaan määritellä erilliseen tiedostoon, jolloin samaa tyylimäärittelytiedostoa voidaan kutsua kaikilta halutuilta sivuilta. Saamme siis hyvin järeän keinon muokata sivujemme ulkonäköä.

Vasemmanpuoleisessa kentässä on tuotu tyylimääritykset tiedostosta tyyli.txt ja oikeanpuoleisessa määritykset kirjoitetaan STYLE-elementin sisään. Sivun viimeisessä esimerkissä on tyylit kirjoitettu suoraan elementtien parametreiksi.

<html>

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

<link rel="stylesheet" type="text/css" href="tyyli.txt" />

</head>


<body>

	Tässä on itse HTML-dokumentti ja 
	elementit joihin vaikutetaan tyylissä.

</body>

</html>

<html>

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

<style type="text/css">

	...Tähän tulee tyylimääritykset...

</style>

</head>


<body>

	Tässä on itse HTML-dokumentti ja
	elementit joihin vaikutetaan tyylissä.


</body>

</html>

Elementtien määrittely

Elementin määritys tehdään aaltosulkeiden sisään. Elementin eri ominaisuuksien määritykset erotetaan puolipisteellä. Jos haluamme määritellä useammalle elementille samat määritykset tai ominaisuudelle useamman eri vaihtoehdon, kuten fontin määrityksessä, erotetaan pilkulla eri elementit tai vaihtoehdot.

<style type="text/css">

	H3, H4 {	color : red ;
			font-size : 17px;
	}

	BODY { 		font-family: Verdana,Arial ;
		 	font-size : 12px;
		}

	TABLE { 	font-family: Arial ;
		 	font-size : 15px;
		}

</style>

Huomaa!

dokumentin tekijä voi aina laittaa minkä tahansa tagin parametriksi style="tyylimääritykset ovat tässä" , jotka ylittävät tärkeysjärjestyksessä head-osion tyylimääritykset.
Esim. tämä listan alkio on määritelty <li style="font-size:14px;font-color:#5050FF;"> , kun muut listan alkiot noudattavat head-osion tyylimäärityksiä
saamme tyylimääritykset voimaan myös taulukon sisälle.
fontin väri voidaan myös esittää heksadesimaalina.

Elementtejä ja määrityksiä

Html-dokumentin kaikkiin tageihin voidaan tehdä tyylimäärityksiä, ja yleensäkin tagien ja muiden elementtien kaikkia ominaisuuksia voidaan säädellä tyylimäärityksillä. Alla on muutama määritys, enemmän löytyy esimerkkeineen sivulta:

http://www.w3schools.com/css/css_examples.asp

Tekstiin vaikuttavat määritykset

Tekstiä sisältäville elementeille (esimerkiksi P, BODY,...) on olemassa mm. seuraavat tyylimääritykset:

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	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

Yllä olevia ominaisuuksia voidaan myös määritellä seuraaville linkkityypeille. Huomaa, että linkkityypiksi on määritelty myös linkki, jonka päällä hiiri on.

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

Marginaalien, rajojen ja listan määritys

Elementeille voidaan määritellä marginaaleja, jotka antavat uusia mahdollisuuksia sijoitteluun. Lisäksi voidaan vaikuttaa korkeuteen, leveyteen ja tekstin kierrätykseen.

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
width	elementin leveys	pikseleinä
height	elementin korkeus	pikseleinä
float	tekstin kierrätys	pikseleinä
clear	tekstin kierrätyksen lopetus	pikseleinä
border-style	elementin rajojen tyyli	esim. solid, dotted, dashed, double, groove, ridge
border-width	elementin rajojen paksuus	pikseleinä
border-color	elementin rajojen väri	heksadesimaalina

Kokomäärityksistä px, em ...

Elementin pituus, leveys, korkeus ja koko voidaan määritellä joko suhteellisilla mitoilla tai absoluuttisilla pituusmitoilla. Edellä on käytetty pituusmittaa px, joka on suhteellinen mitta ja tarkoittaa kokoa pikseleinä. Suhteelliseksi tämän tekee se, että pikselin koko on katselijan koneesta riippuen.

Toinen suhteellinen pituusmitta on em. Tätä käytetään, kun halutaan välttää näkymän ongelmia vanhoissa selaimissa. Vanhat selaimet eivät välttämättä muuta fontin kokoa selainasetuksista käsin, jos koko on määritelty px-ominaisuudella.

Pituusmitta em määritellään siten, että 1em on oletuskoko määrityskohdassa. Jos oletuskoko on 16px, niin em -arvo voidaan laskea kaavalla em= haluttu pikselikoko / 16px.

Absoluuttisia pituusmittoja ovat in (tuuma), cm (senttimetri), mm (millimetri).

Esimerkki:

Jokin teksti 12px (oletuskoko tässä dokumentissä)
Jokin teksti 1.16em (1.16 = 14/12)
Jokin teksti 0.1in
Jokin teksti 0.5cm

<ul>

<li style="font-size:12px;">Jokin teksti 12px (oletuskoko tässä dokumentissä)</li>
<li style="font-size:1.16em;">Jokin teksti 1.16em (1.16 = 14/12)</li>
<li style="font-size:0.1in;">Jokin teksti 0.1in</li>
<li style="font-size:0.5cm;">Jokin teksti 0.5cm</li>

</ul>

Listan ominaisuuksia ja url-määritys

Listojen ominaisuuksia voimme määritellä ominaisuudella

list-style: tyyppi

Tyyppi voi olla circle, square, none tai url (osoite). Viimeisimmässä vaihtoehdossa osoite viitta johonkin kuvaan, jonka haluamme laittaa listan eri kohtien merkiksi. Yleisestikin tyylimäärityksissä voimme viitata (jos mahdollista) myös kuvaan tällä tavalla. Alla olevassa kokeiluympäristössä tapaa on käytetty taustakuvan määrittämiseen.

Esimerkiksi:

Otsikkomme

Moi kaikille
teille! Tässä pieni lista:

Eka alkio
- Toinen alkio
- Kolmas alkio


<h1 style="font-family 	: verdana;
	   font-size   	: 13px;
	   margin	: 20px; ">
Otsikkomme
</h1>

<p style="line-height : 12px">
Moi kaikille <br> teille!

Tässä pieni lista:

<ul style="list-style : square">
	<li>Eka alkio
		<ul style="list-style : url('kuvat/merkki.gif')">
			<li>Toinen alkio</li>
			<li>Kolmas alkio</li>
		</ul>
	</li>
</ul>

Valikko: