CSS
Tyylimäärittelyt CSS:ään
Aikaisemmissa HTML-versioissa tyylimäärittelyt esim. tekstin väri, asettelu vaakasuunnassa, marginaalit, kuvan sijainnit yms. kirjoitettiin html-koodin sisälle. Tästä syystä html-koodi näytti hyvin sekavalta. Ja näiden tyylimäärittelyjen muuttaminen oli aikaavievää varsinkin, jos niitä oli käyttänyt paljon.
Nykyään suositetaan, että tyylimäärittelyt tehdään CSS-kielellä joko html-tiedostoon head-osioon tai kaikista mieluiten omaan CSS-tiedostoon.
CSS on lyhenne sanoista Cascading Style Sheet eli kirjaimellisesti suomennettuna porrastetut tyyliarkit.
Nykyään suositetaan, että tyylimäärittelyt tehdään CSS-kielellä joko html-tiedostoon head-osioon tai kaikista mieluiten omaan CSS-tiedostoon.
CSS on lyhenne sanoista Cascading Style Sheet eli kirjaimellisesti suomennettuna porrastetut tyyliarkit.
TYYLIMÄÄRITTELYT CSS:llä
CSS-sääntöjen kirjoitustapa:
a) jos valitsimella vain yksi kuvaus:
valitsin { ominaisuus: arvo; }
esim.
body { background-color: red } <i>Tällä saa taustavärin punaiseksi</i>
b) jos valitsimella monta kuvausta:
valitsin {
ominaisuus: arvo;
ominaisuus: arvo;
ominaisuus: arvo;
}
esim.
div {
color: green; <i>Tekstin väri vihreäksi</i>
text-align: right; <i>Tekstin sijainti oikeaan reunaan</i>
border: 2px red solid; <i>Alueen reunaviivan leveys kaksi pikseliä, väri punainen ja viivan tyyppi yhtenäinen</i>
}
Tyylimäärittelyt CSS:llä voi sijoittaa kolmella tavalla:
1) HTML-elementin esim. h1:n sisällä <i>(Ei suositeltava, koska ei poikkea juurikaan aikaisemmasta tyylimäärittelytavasta ja tekee koodista sekavan.)</i>
<h1 style="color:blue;margin-left:30px;">Tämä on otsikko</h1><br />
2) upotetuna tyylisääntönä html-tiedostossa <head>-elementin sisällä
<head>
<style>
body { background-color: lightblue; } <i>Taustaväri vaaleansininen</i>
h1 {
color: orange; <i>h1-otsikon väri oranssi</i>
margin-left: 40px; <i>h1-otsikon vasen marginaali 40 pikseliä</i>
}
</style>
</head>
3) ulkoinen, linkitetty tyylisääntö eli oma, erillinen css-tiedosto (paras tapa!)
Head-elementissä linkitys ulkoiseen tyylitiedostoon:
<head>
<link rel="stylesheet" type="text/css" href="tyylit.css"></b> <i>Tiedoston nimen voi tietysti itse keksiä. Ei tarvitse aina olla tyylit.css.</i>
<b></head>
Tyylitiedostossa (tyylit.css) tyylimäärittelyt esim.
body {
background-color: lightblue;
}
h1 {
color: orange;
margin-left: 20px;
}
Tyylitiedoston voi tehdä kuten html-tiedoston muistio-tekstieditorilla. Tallennuksessa tiedostopäätteeksi .css ja tallennusmuodoksi kaikki tiedostot.
a) jos valitsimella vain yksi kuvaus:
valitsin { ominaisuus: arvo; }
esim.
body { background-color: red } <i>Tällä saa taustavärin punaiseksi</i>
b) jos valitsimella monta kuvausta:
valitsin {
ominaisuus: arvo;
ominaisuus: arvo;
ominaisuus: arvo;
}
esim.
div {
color: green; <i>Tekstin väri vihreäksi</i>
text-align: right; <i>Tekstin sijainti oikeaan reunaan</i>
border: 2px red solid; <i>Alueen reunaviivan leveys kaksi pikseliä, väri punainen ja viivan tyyppi yhtenäinen</i>
}
Tyylimäärittelyt CSS:llä voi sijoittaa kolmella tavalla:
1) HTML-elementin esim. h1:n sisällä <i>(Ei suositeltava, koska ei poikkea juurikaan aikaisemmasta tyylimäärittelytavasta ja tekee koodista sekavan.)</i>
<h1 style="color:blue;margin-left:30px;">Tämä on otsikko</h1><br />
2) upotetuna tyylisääntönä html-tiedostossa <head>-elementin sisällä
<head>
<style>
body { background-color: lightblue; } <i>Taustaväri vaaleansininen</i>
h1 {
color: orange; <i>h1-otsikon väri oranssi</i>
margin-left: 40px; <i>h1-otsikon vasen marginaali 40 pikseliä</i>
}
</style>
</head>
3) ulkoinen, linkitetty tyylisääntö eli oma, erillinen css-tiedosto (paras tapa!)
Head-elementissä linkitys ulkoiseen tyylitiedostoon:
<head>
<link rel="stylesheet" type="text/css" href="tyylit.css"></b> <i>Tiedoston nimen voi tietysti itse keksiä. Ei tarvitse aina olla tyylit.css.</i>
<b></head>
Tyylitiedostossa (tyylit.css) tyylimäärittelyt esim.
body {
background-color: lightblue;
}
h1 {
color: orange;
margin-left: 20px;
}
Tyylitiedoston voi tehdä kuten html-tiedoston muistio-tekstieditorilla. Tallennuksessa tiedostopäätteeksi .css ja tallennusmuodoksi kaikki tiedostot.
CSS-ominaisuuksia
Taulukko CSS:n ominaisuuksista
vaikutus: css-ominaisuus (vaihtoehdot)
taustaväri: background-color
taustakuva: background-image (url(kuvan nimi), none)
taustakuvan toisto: background-repeat (repeat, repeat-x, repeat-y, no-repeat)
taustakuvan sijainti: background-position (left, center, right, px) (top, center, bottom, px)
tekstin koko: font-size (px, em)
tekstin väri: color
tekstin tasaus vaakasuunnassa: text-align (left, right, center)
tekstin tasaus korkeussuunnassa: vertical-align (top, middle, bottom)
tekstin ensimmäisen rivin sisennys: text-indent (px, %)
luettelomerkin tyyppi järjestömättömässä listassa: list-style-type (disc, circle, square, none)
luettelomerkin tyyppi järjestetyssä, numeroidussa listassa: list-style-type (decimal, decimal-leading-zero, lower-roman, upper-roman, lower-latin, upper-latin none)
luettelomerkin kuva: list-style-image
reunaviivan väri: border-color
reunaviivan pyöristys kulmissa: border-radius (px,%)
reunaviivan tyyppi: border-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset)
reunaviivan leveys: border-width (thin, medium, thick, px)
reunuksen leveys: margin (px, %, auto)
yläreunuksen leveys: margin-top (px, %, auto)
alareunuksen leveys: margin-bottom (px, %, auto)
vasemmaan reunuksen leveys: margin-left (px, %, auto)
oikean reunuksen leveys: margin-right (px, %, auto)
taulukon reunaviivojen yhdistäminen: border-collapse (collapse, separate)
taulukon reunaviivojen etäisyys toisistaan: border-spacing (px)
taulukon parittomien rivien määrittäminen: tr:nth-child (odd)
taulukon parillisten rivien määrittäminen: tr:nth-child (even)
taulukon tietyn rivin määrittäminen: tr:nth-child (rivin numero)
taulukon sarakkeita voi määrittää samoin vaihtamalla tr -> td
reunan ja sen sisällä olevan tekstin väli: padding (px, %)
elementin leveys: width (px, %)
elementin korkeus: height (px, %)
elementin sijoittelutapa: position (static, relative, absolute, fixed)
elementin sijoitus ylhäältä: top (px, %)
elementin sijoitus alhaalta: bottom (px, %)
elementin sijoitus vasemmalta: left (px, %)
elementin sijoitus oikealta: right (px, %)
päällekkäisten elementtien järjestys: z-index (luku, pienin taustalla, suurin edessä)
elementin esim. kuvan kellutus: float (left, right, none)
elementin kellutuksen poisto: clear (left, right, both)
ylivuodon käsittely eli jos sisältö ei mahdu elementtiin: overflow (visible, hidden, scroll, auto)
palstojen määrä: column-count (luku)
Chromelle eteen -webkit-
Firefoxille eteen -moz-
linkkien valitsimia:
avaamaton linkki: a: link
avattu linkki: a: visited
kohdistin linkin päällä: a: hover
klikattaessa: a: active
kommentti: /** </b>kommentti **/
Valmiita CSS:llä tehtyvä sivupohjia tai niiden osia esim. valikkoja löytää googlettamalla esim. CSS templates tai CSS menus.
vaikutus: css-ominaisuus (vaihtoehdot)
taustaväri: background-color
taustakuva: background-image (url(kuvan nimi), none)
taustakuvan toisto: background-repeat (repeat, repeat-x, repeat-y, no-repeat)
taustakuvan sijainti: background-position (left, center, right, px) (top, center, bottom, px)
tekstin koko: font-size (px, em)
tekstin väri: color
tekstin tasaus vaakasuunnassa: text-align (left, right, center)
tekstin tasaus korkeussuunnassa: vertical-align (top, middle, bottom)
tekstin ensimmäisen rivin sisennys: text-indent (px, %)
luettelomerkin tyyppi järjestömättömässä listassa: list-style-type (disc, circle, square, none)
luettelomerkin tyyppi järjestetyssä, numeroidussa listassa: list-style-type (decimal, decimal-leading-zero, lower-roman, upper-roman, lower-latin, upper-latin none)
luettelomerkin kuva: list-style-image
reunaviivan väri: border-color
reunaviivan pyöristys kulmissa: border-radius (px,%)
reunaviivan tyyppi: border-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset)
reunaviivan leveys: border-width (thin, medium, thick, px)
reunuksen leveys: margin (px, %, auto)
yläreunuksen leveys: margin-top (px, %, auto)
alareunuksen leveys: margin-bottom (px, %, auto)
vasemmaan reunuksen leveys: margin-left (px, %, auto)
oikean reunuksen leveys: margin-right (px, %, auto)
taulukon reunaviivojen yhdistäminen: border-collapse (collapse, separate)
taulukon reunaviivojen etäisyys toisistaan: border-spacing (px)
taulukon parittomien rivien määrittäminen: tr:nth-child (odd)
taulukon parillisten rivien määrittäminen: tr:nth-child (even)
taulukon tietyn rivin määrittäminen: tr:nth-child (rivin numero)
taulukon sarakkeita voi määrittää samoin vaihtamalla tr -> td
reunan ja sen sisällä olevan tekstin väli: padding (px, %)
elementin leveys: width (px, %)
elementin korkeus: height (px, %)
elementin sijoittelutapa: position (static, relative, absolute, fixed)
elementin sijoitus ylhäältä: top (px, %)
elementin sijoitus alhaalta: bottom (px, %)
elementin sijoitus vasemmalta: left (px, %)
elementin sijoitus oikealta: right (px, %)
päällekkäisten elementtien järjestys: z-index (luku, pienin taustalla, suurin edessä)
elementin esim. kuvan kellutus: float (left, right, none)
elementin kellutuksen poisto: clear (left, right, both)
ylivuodon käsittely eli jos sisältö ei mahdu elementtiin: overflow (visible, hidden, scroll, auto)
palstojen määrä: column-count (luku)
Chromelle eteen -webkit-
Firefoxille eteen -moz-
linkkien valitsimia:
avaamaton linkki: a: link
avattu linkki: a: visited
kohdistin linkin päällä: a: hover
klikattaessa: a: active
kommentti: /** </b>kommentti **/
Valmiita CSS:llä tehtyvä sivupohjia tai niiden osia esim. valikkoja löytää googlettamalla esim. CSS templates tai CSS menus.