|
Alle on listattu erilaisia tyylejä, joita
voidaan käyttää. Parhaiten näet kunkin tyylin vaikutuksen kirjoittamalla
koodiin esim.
<P
STYLE="font-family:monospace">tämä on monospace-tyyli</P>
Tekstin ominaisuudet
| Ominaisuus |
mahdolliset arvot |
Malli |
| font-style |
normal, italic, oblique |
font-style:oblique |
| font-family |
serif, sans-serif,
cursive, monospace, fantasy |
font-family:monospace |
| |
"fontin nimi"
eli "Times New Roman" |
font-family:arial |
| font-size |
xx-small, x-small,
small, medium, large, x-large, xx-large |
font-size:small |
| |
smaller ja larger -
suhteessa oletuskokoon |
font-size:smaller |
| |
120 % -suhteessa
oletuskokoon |
font-size:120% |
| |
24pt -normaali
pistekoko |
font-size:24pt |
| font-variant |
normal, small-caps eli
pienet suuraakkoset |
font-variant:small-caps |
| font-weight |
normal, bold, bolder,
lighter |
font-weight:bold |
| |
jokin tasasataluku 100-900 |
font-weight:800 |
|
| Tasaaminen |
|
|
| Ominaisuus |
mahdolliset arvot |
Malli |
| vertical-align |
baseline, sub, super,
text-top, text-bottom, middle - tekstin sijainti kuvaan nähden pystysuunnassa |
vertical-align:middle |
| letter-spacing |
0.6em - eli em on
mittayksikkö suhteessa kirjaimen korkeuteen, kirjainten
väli |
letter-spacing:0.6em |
| word-spacing |
0.1em - sanojen väli |
word-spacing:0.2em |
| text-decoration |
line-trough, underline,
overline, blink |
text-decoration:overline |
| text-align |
left, right, center,
justify (molemmat reunat tasalle) |
text-align:center |
| text-transform |
none, UPPERCASE,
lowercase, Capitalize |
text-transform:lowercase |
| text-indent |
8em - 1.rivin sisennys |
text-indent:6em |
| line-height |
3 - eli luku, jolla
fontin korkeus kerrotaan |
line-height:5 |
|
| Tila tekstin ympärille |
|
|
| Ominaisuus |
mahdolliset arvot |
Malli |
| margin-top |
20% tai 4cm - eli ylämarginaali |
margin-top:5cm |
| margin-right |
|
margin-right:4cm |
| margin-left |
|
margin-left:5cm |
| margin-bottom |
|
margin-bottom:2cm |
|
| Reunat teksteille |
|
|
| Ominaisuus |
mahdolliset arvot |
Malli |
| border-top-width |
thin, medium, thick |
border-top-width:thin |
| border-left-width |
|
border-left-width:thin |
| border-right-width |
|
border-right-width:thin |
| border-bottom-width |
|
border-bottom-width:thin |
| border-color |
väri kts.värit |
border-color:rgb(0,255,0) |
| border-style |
none, solid, dashed,
dotted, groove, inset, ridge, double, outset |
border-style:solid |
|
| Värit
myös muille kuin teksteille, esim BODY |
|
| Ominaisuus |
mahdolliset arvot |
Malli |
| color |
red, #00FF00, rgb(0,255,0) |
color:red |
| background-color |
samat, mutta tekstin
taustalle |
background-color:blue |
| background-image |
url(tiedosto.nimi) -
taustakuva elementille |
background-image:url(joku.gif) |
| |
| Listat
OL, UL ja LI-elementeille |
| list-style-type |
disc,
circle, square, decimal, lower-roman, upper-roman, lower-alpha,
upper-alpha, none listan "pallukat" |
list-style-type:
disc |
| list-style-image |
url(tiedoston
nimi) - kuva listan "pallona" |
list-style-image:url(kuva.gif) |
| |
| Muut |
| A:link |
Samoja
ominaisuuksia kuin edellä. Linkin värien määrittely. |
A:link{color:red} |
| A:visited |
Samoja
ominaisuuksia kuin edellä. Vieraillun linkin määrittely. |
A:visited{color:blue} |
| A:hover |
Linkin
ominaisuus, kun hiiri tulee sen päälle. |
A:hover{color:yellow} |
| first-line |
Ensimmäisen
rivin ominaisuudet. |
|
| first-letter |
Ensimmäisen
kirjaimen ominaisuus. |
|
|
![[IMAGE]](opasotsi2.gif){kind=small}