CSS2

CSS2 tekee seuraavat lisäykset CSS1:een:

Uusia listanumerointityylejä

Uusia listatyylejä ovat:

decimal (1, 2, 3, ...)
decimal-leading-zero (01, 02, 03, ...)
lower-roman (i, ii, iii, iv, v, ...)
upper-roman (I, II, III, IV, V, ...)
lower-latin (a, b , c, ...)
upper-latin (A, B, C, ...)
lower-greek (alpha, beta, gamma, ...)
hebrew
georgian
armenian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha

Esimerkki uusista listatyyleistä listat.html listat.css

compact ja run-in

compact ja run-in ovat uusia vaihtoehtoja display-ominaisuudelle inline ja block vaihtoehtojen rinnalle.

Esimerkki compactin ja run-inin käytöstä compact.html compact.css

Tekstivarjot

text-shadow-ominaisuudella voi määritellä varjostuksen tekstille.

Esimerkki text-shadow-ominaisuudesta text-shadow.html text-shadow.css

Ylivuoto, leikkaus ja näkyvyys-ominaisuudet

Ylivuoto eli overflow-ominaisuudella voidaan määritellä mitä pitää tehdä jos elementti ei mahdu sille annettuun tilaan.

leikkaus eli clip-ominaisuudella voidaan rajoittaa elementistä näkyvää suorakaiteen muotoista aluetta.

Näkyvyys eli visibility-ominaisuudella voidaan poistaa elementti näkyvistä, mutta kuitenkin pitää se sivulla eli näkymätön elementti vaikuttaa muiden sivun osien sijoitteluun.

Esimerkki overlow-, clip-, ja visibility-ominaisuuksista overflow.html overflow.css

Käyttäjän omien värien ja kirjasimien käyttäminen

Voidaan käyttää sivulla suoraan käyttäjän käyttöympäristössä määriteltyjä värejä ja kirjasimia.

Esimerkki järjestelmäväreistä ja -fonteista. system.html system.css

Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle

Esimerkki minimin ja maksimin määrittelystä. minmax.html minmax.css

Generoitu sisältö, automaattinen numerointi ja merkinnät

CSS2:en avulla voidaan suoraan lisätä sisältä html-dokumenttiin. CSS2:lla pystytään myös numeroimaan mitä tahansa elementtejä.

generoidusta sisällöstä ja automaattisesta numeroinnista. content.html content.css

Mediatyypit

Mediatyypit - Omat tyylimääritykset tulosteille, ääniselaimille jne.

Esimerkki: aural.css

Esimerkki: print2001.css

z-index

z-index-ominaisuudella voidaan määrätä mikä elementti näkyy minkäkin päällä tai alla.

Esimerkki: z-level.htm Esimerkki: z.css

Asemointi

Suhteellinen (engl. relative) asemointi
Elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla suhteutettuna normaaliin sijaintiinsa.
```
  .up {
	position: relative;
	top: -1em;
  }

  
```
esimerkki:
Suhteellinen asemointi relative.htm relative.css
Absoluuttinen (engl. absolute) asemointi
Elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti isä-elementin sisälle välittämättä normaalista sijainnista.
Asemoitu elementti vierii dokumentin sisällön mukana.
```
  .vasenylanurkka {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 30%;
	height: 10%;
  }
	
```
Esimerkkejä:
Navigointilinkit abs.htm abs.css
Kiinnitetty (engl. fixed) asemointi
Elementti sijoitetaan top-, left-, right- ja bottom-ominaisuuksilla absoluuttisesti isä-elementin sisälle välittämättä normaalista sijainnista.
Asemoitu elementti EI vieri dokumentin sisällön mukana.
```
  .vasenylanurkka {
	position: fixed;
	top: 10%;
	left: 10%;
	width: 30%;
	height: 10%;
  }
	
```
esimerkkejä:
Paikallaan pysyvät navigointilinkit navbar.htm navbar.css
Sekalaista asemointia mixed.html mixed.css
Jos suinkin mahdollista niin asemointi kannattaa tehdä float-ominaisuuden avulla, koska se on parhaiten tuettu eri selaimissa
esimerkkejä:
Elementtejä rinnakkain float.htm float.css
Rinnakkaisuuden esto float2.htm float.css
Sarakejako columns.htm columns.css
Lomake form.htm form.css

CSS ja XML

http://appro.mit.jyu.fi/2001/syksy/tietoverkot/luennot/luento9/index.html