Kotisivujen uudet tyylit

Näytteitä CSS:n toiminnasta

Tällä sivulla esitellään eri CSS-ominaisuuksien mahdollisia arvoja. Joskus elementeille on tehty joitakin muutoksia (esimerkiksi lisätty reunaviiva) havainnollisuuden vuoksi, vaikka se ei näy esimerkkikoodissa.

CSS:llä kannattaa leikkiä – kokeilla eri asioita ja arvoja (ja muistaa tehdä tärkeistä tyylitiedostoista varmuuskopio, kun jokin asia tuntuu olevan kunnossa).

Mikäli jokin ei näytä toimivan sivulla, voi olla, ettei selaimesi tue kyseistä CSS-ominaisuutta. Sivu on katsottu läpi IE 6.0:ssa, Mozilla 1.7.5:ssä, Firefox 1.0:ssa ja Opera 6.0:ssa enkä ole huomannut puutteita (selainten eroja lukuunottamatta).

Fontin ominaisuuksia

Joissakin selaimissa voi muuttaa asetusta, jolla fonttiperhettä edustava fontti valitaan.

font-family: sans-serif;
Sans-serif-fonttiperhe
font-family: serif;
Serif-fonttiperhe
font-family: monospace;
Tasalevyinen fontti
font-family: cursive;
"Käsinkirjoitettu" fontti
font-family: fantasy;
Erikoinen, "fantasiafontti"

font-weight: normal;
Normaali
font-weight: bold;
Lihavoitu teksti

font-style: normal;
Normaali
font-style: italic;
Italic
font-style: oblique;
Oblique

font-variant: normal;
Normaali
font-variant: small-caps;
Small-caps

line-height: 1.3;
Harvaa
tekstiä
line-height: 0.6;
Tiuhaa
tekstiä

Kaikki yhdessä fonttimäärityksessä

(kaikkea mahdollista ei silti tarvitse määrittää)
font: italic small-caps bold 100%/100% serif;
Kursiivi, small-caps, lihavoitu, normaalikokoinen fontti, normaali rivinleveys, serif-fonttiperhe

Tekstin ominaisuuksia

word-spacing: 5px;
väliä sanoihin
letter-spacing: 3px;
harvennettua tekstiä

text-decoration: none;
linkki ilman alleviivausta
text-decoration: underline;
alleviivaus
text-decoration: overline;
yliviivaus
text-decoration: line-through;
läpiviivaus
text-decoartion: blink;
välkkyy (ei IE:ssä)
text-decoration: underline overline blink;
näitä voi myös yhdistellä

text-transform: capitalize
isot alkukirjaimet
text-transform: uppercase;
kaikki isolla
text-transform: lowercase;
KAIKKI PIENELLÄ
text-transform: none;
normaali

text-indent: 3em;
sisentää ensimmäisen
rivin

Väriä sivulle

color: #2B9489;
fontin väri vihreäksi
background-color: #40E0D0;
turkoosi tausta

Taustakuva

background-image: url(merkki.gif);
background-repeat: repeat-x;

 

background-image: url(merkki.gif);
background-repeat: repeat-y;

 

background-image: url(merkki.gif);
background-repeat: repeat;

 

background-image: url(merkki.gif);
background-repeat: no-repeat;

 

background-image: url(merkki.gif);
background-repeat: no-repeat;
background-position: right bottom;

 

background-image: url(merkki.gif);
background-repeat: no-repeat;
background-position: 75% 50%;

 

Kaikki yhdessä

(kaikkea mahdollista ei silti tarvitse määrittää)
background: #40E0D0 url(merkki.gif) no-repeat 25% 50%;

 

Laatikkomallin ominaisuuksia

Reunaviivat

border: 3px solid #40E0D0;
yhtenäinen viiva
border: 3px double #40E0D0;
kaksoisviiva
border: 3px dotted #40E0D0;
pisteviiva
border: 3px dashed #40E0D0;
katkoviiva
border: 3px groove #40E0D0;
kaiverrettu viiva
border: 3px ridge #40E0D0;
kohokuvioinen viiva
border: 3px inset #40E0D0;
"alaspainettu nappi"
border: 3px outset #40E0D0;
"nappi"
border-top: 3px dotted red;
border-right: 3px dashed green;
border-bottom: 3px double blue;
border-left: 3px groove purple;
vähän kaikkea

Voi myös määrittää viivan tyylin (border-style), värin (border-color) tai leveyden (border-width).

Täyte

padding: 5px;

vähän tilaa reunaviivan ja sisällön välille

padding: 20px;

enemmän tilaa reunaviivan ja sisällön välille

Jokaiselle reunalle voi määrittää oman täytteen (padding-top, padding-right, padding-bottom, padding-left) tai kaikki yhdessä (padding: top right bottom left, jossa top/right/bottom/left saa siis jonkin mitan).

Marginaali

margin-left: 10px;

vasenta reunaa kauemmaksi muista elementeistä
ilman margin-määrettä reunaviiva olisi samassa kohtaa kuin yllä

margin-left: 20px;

vasenta reunaa vieläkin kauemmaksi muista elementeistä

Jokaiselle reunalle voi määrittää oman marginaalin (margin-top, margin-right, margin-bottom, margin right) tai kaikki yhdessä (margin: top right bottom left, jossa top/right/bottom/left saa siis jonkin mitan).

Listan ominaisuuksia

list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: none;
list-style-image: url(merkki.gif);

Mitä tehdään jos teksti menee yli sille varatun tilan?

overflow: hidden;
- 'hidden' piilottaa ylimenevän tekstin
maalamalla
tekstin Mozillassa tai
Firefoxissa voi nähdä
kyllä loputkin
overflow: scroll;
- 'scroll' tekee vaaka- ja pystyvierityspalkit
vierityspalkit tulevat yleensä
sekä pysty- että vaakasuuntaan
vaikkei niitä tarvittaisikaan
overflow: visible;
- 'visible' laittaa tekstin näkyviin hinnalla millä hyvänsä
Mozillassa ja Firefoxissa teksti menee
muun sisällön päälle
IE:ssä tätä aluetta
suurennetaan


overflow: auto;
- selain määrittelee mitä 'auto' asetuksella tehdään
'auto' tekee
yleensä vierityspalkin
pystysuuntaan
kun tila ei riitä

Osoittimen ominaisuuksia

Osoittimen asetuksilla ei välttämättä kannata alkaa leikkiä. Mutta yksi käyttötapa on esimerkiksi määrittää lyhenteet (<abbr> (ei toimi IE:ssä) ja <acronym>) näyttämään help-osoittimen: CSS
(osoitin vaihtuu kun hiirellä osoittaa ominaisuuden selitystä)

cursor: crosshair;
tähtäin
cursor: default;
oletusarvoinen
cursor: hand;
käsi (vain IE:ssä)
cursor: pointer;
käsi (Mozillassa, Firefoxissa)
cursor: move;
siirto
cursor: e-resize;
oikean reunan siirto
cursor: ne-resize;
oikean yläkulman siirto
cursor: nw-resize;
vasemman yläkulman siirto
cursor: n-resize;
yläkulman siirto
cursor: se-resize;
oikean alakulman siirto
cursor: sw-resize;
vasemman alakulman siirto
cursor: s-resize;
alareunan siirto
cursor: w-resize;
vasemman reunan siirto
cursor: text;
tekstikursori
cursor: wait;
kiireinen (tiimalasi)
cursor: help;
apua

Näennäisluokat ja -elementit

Linkin ominaisuudet

a:link { font-style:italic; }
a:visited { color: green; }
a:hover { text-decoration: none; }
a:active { font-weight: bold; }
a.ulos:hover { text-transform: uppercase; }
linkki
käyty linkki (jos linkki on samanlainen kuin yllä, klikkaa ylläolevaa, jolloin siitä pitäisi tulla vihreä)
linkki jolle määritetty luokka 'ulos'
(uusi linkki kursivoitu, käyty linkki vihreä, hiiren mennessä linkin päälle alleviivaus katoaa, napsautettaessa linkkiä se lihavoidaan)

Näennäiselementit

p:first-letter { font-weight: bold; }

ensimmäinen kirjain punaisella

p:first-line { color: green; }

ensimmäinen rivi
vihreällä

Tekstin ja kuvien tasaus

text-align: left;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede.

text-align: right;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede.

text-align: justify;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede.

text-align: center;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede.

float: left;
float: right;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Lomakkeen tyylittelyä

Opera (ainakaan 6.0) ei suostu muuttamaan lomakkeen osien taustavärejä tai kenttiin kirjoitettavan tekstin väriä. Jos siis katsot tätä sivua Operassa, et näe alla olevan ison tekstikentän taustaväriä tai taustakuvallista ja -värillistä tekstikenttää.

<textarea> hienommaksi

background-color: #B9E5E3;
border: 3px double #2B9489;
scrollbar-base-color: #B9E5E3;

Taustakuva tekstikentälle

background-image: url(input-bg.gif);
border: 0;
height: 25px;
width: 130px;
padding: 3px 10px 3px 10px;
font-size: 18px;
johon kannattaa lisätä taustaväri:
background-color: #B9E5E3;
Taustakuva on 150 pikseliä leveä ja 30 pikseliä korkea.
Tässä on tekstikenttä

joka ilman taustakuvaa näyttäisi tältä:
(kyllä se siinä on)
mutta onneksi taustavärin voi määritellä kuvan lisäksi: