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:

style -tagin sisään (alla oikealla)
elementin parametriksi esim. <p style="tyylimääritykset" >Kappaleen teksti</p>
erilliseen tekstitiedostoon (alla vasemmalla)

Tyylimääritykset antavat ohjeet selaimelle, kuinka jokin elementti pitää selaimella näkyä. Nämä määritykset ovat hyvin yksityiskohtaisia, jolloin sivulle saadaan täsmälleen haluttu ulkoasu.

Lisäksi, jos kirjoitamme css-määritykset erilliseen tiedostoon, saamme usealle sivulle saman ulkoasun kirjoittamalla vain yhden rivin halutun html-sivun alkuun.

Selaimen rakentaessa sivua, se lukee css-määritykset järjestyksessä. Toisinsanoen päällekkäisyyksien tapahtuessa jälkimmäinen määritys sivulla voittaa ensin määritellyn ja elementin sisälle määritelty voittaa esim. head-osioon määritellyt css-määritykset.

Vasemmanpuoleisessa kentässä on tuotu tyylimääritykset tiedostosta tyyli.css ja oikeanpuoleisessa määritykset kirjoitetaan STYLE-elementin sisään.

<html>

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

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

</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 css määrittely tiedostossa ja style-tagin sisällä

Elementin määritys tehdään aaltosulkeiden sisään. Elementin eri ominaisuuksien määritykset erotetaan puolipisteellä. Jos haluamme määritellä useammalle elementille samat määritykset, niin elementit erotellaan pilkulla. Katso esim. alla ensimmäisenä määrittelemme H3 ja H4 tason otsikot samalla tavalla.

Jos haluamme määritellä esimerkiksi fontille useamman vaihtoehdon, niin vaihtoehdot erotellaan myös pilkulla.


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

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

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

Elementtien css määrittely parametrinä

CSS-määrittelyt voidaan kirjoittaa suoraan myös minkä tahansa elementin sisään parametriksi style.

Tällöin ominaisuudet erotellaan myös puolipisteillä. Alla on esimerkiksi muutettu kappaleen fontin kokoa 16 pikselin kokoiseksi ja vaihdettu väri punaiseksi.

	<p style="font-size:16px;color:#ff0000;">Jotain kappaleen tekstiä</p>

Jolloin tulos on:

Jotain kappaleen tekstiä

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 'koristelu'	none, underline, overline, line-through
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 ensimmäisen rivin 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
padding	sisämarginaali	koko esimerkiksi 12px
padding-top	yläsisämarginaali	koko esimerkiksi 12px
padding-bottom	alasisämarginaali	koko esimerkiksi 12px
padding-left	vasen sisämarginaali	koko esimerkiksi 12px
padding-right	yläsisämarginaali	koko esimerkiksi 12px
width	elementin leveys	pikseleinä
height	elementin korkeus	pikseleinä
float	tekstin kierrätys	pikseleinä
clear	tekstin kierrätyksen lopetus	pikseleinä

Reunan ominaisuuksiin vaikuttavat

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
border-radius	alueen kulmien pyöristys	koko esimerkiksi 8px

Taustaan vaikuttavia määrityksiä

background-color	taustaväri	väri esim. heksadesimaalina
background-image	taustakuva	esim. muodossa url("kuvannimi.jpg")
background-repeat	taustakuva toisto	repeat-x , repeat-y , no-repeat
background-position	taustakuvan aloituspaikka x y	esim. 50px 100px

Kokeiluympäristö

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: