Luento 3

Tätä luentoa ei ikävä kyllä ole saatavilla MP3-muodossa luentosalin huonosti toimivan tekniikan takia :-(

Seuraavassa luennolla näytetyt kalvot ja hieman alempaa löytyy luennolla näytetyt esimerkit.

Luennolla näytetyt kalvot

Erikoismerkit HTML-dokumentissa ja URLeissa (kalvo 1)

HTML-dokumentissa

Merkki		Koodi
<		&lt;
>		&gt;
&		&amp;

ä		&	auml;
ö		&ouml;
å		&aring;

Ä		&Auml;
Ö		&Ouml;
Å		&Aring;

URLeissa

Merkki		Koodi
Välilyönti	%20
ä		%E4
ö 		%F6
å		%E5
Ö		%D6
Ä		%C4
Å		%C5

CSS (Cascade Style Sheets) (kalvo 2)

Dokumentin ulkoasu määritellään tyylilomakkeen avulla
- Hyödyt
  - Perusdokumenttien tekeminen helppoa
  - Yhtenäinen ulkoasu
  - Keskitetty päivitys
- Haitat
  - Selainten huono tuki

Tyylejä käytetttäessä muistettava, että sivuilla oleva informaatio on saatava myös ilman tyylejä tukevaa selainta!

Tyylien määrittäminen (kalvo 3)

Muutetaan olemassaolevien HTML-elementtien ominaisuuksia

Syntaksi

tyylinimi {

ominaisuus: arvo;

}

Esimerkki

body {
	color: black;
	background-color: white;
}

Tyylien liittäminen dokumenttiin (kalvo 4)

Ulkoinen tyylitiedosto

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

-----------

h1 {
	color:red; 
	text-align: center;
}

STYLE-elementti

<style type="text/css">
	h1 {color:red; text-align: center;}
</style>

HTML-elementti

<p style="text-align:center; color: navy";>
	Elementin sisäinen tyylin määrittely! 
</p>

Tyylien aliluokat (selectors) (kalvo 5)

Pohjataan rakenteellisesti oikeaan elementtiin

CLASS-attribuutti

<p>Vähemmän tärkeä 1. tason otsikko</p>
<p class="varoitus">varoitus </p>

----------------
p {
	background-color: white;
	color: green;
	text-align: center;
}

p.varoitus {
	background-color: white;
	color: red;
}
------------------

Edellisen aliluokan yleistys, jota voidaan käyttää kaikkien elementtien yhteydessä.

.varoitus {
	background-color: white;
	color: red;
}

ID-attribuutti

<p id="otsikko12">Tärkeä 1. tason otsikko</p>

-----------------

h1#otsikko12 {
	background-color: white;
	color: red;
}

Tyylitiedoston tuominen tyylitiedostoon tai dokumenttiin

@import url(http://palvelin.fi/hakemisto/tyyli.css);

Sivun tekijän tyylitiedoston ominaisuuksien kumoaminen

body {
	background: white ! important;
	color: black ! important;
}

Esimerkkejä

http://appro.mit.jyu.fi/2000/syksy/tietoverkot/luennot/luento3/index.html

9.10.2000 09:42:12