CSS

Tyylimäärittelyt CSS:ään

2015-05-06T16:25:38+03:00

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.

TYYLIMÄÄRITTELYT CSS:llä

2015-05-06T16:27:33+03:00

CSS-sääntöjen kirjoitustapa:

a) jos valitsimella vain yksi kuvaus:
valitsin { ominaisuus: arvo; }

esim.
body { background-color: red } Tällä saa taustavärin punaiseksi

b) jos valitsimella monta kuvausta:
valitsin {
ominaisuus: arvo;
ominaisuus: arvo;
ominaisuus: arvo;
}

esim.
div {
color: green; Tekstin väri vihreäksi
text-align: right; Tekstin sijainti oikeaan reunaan
border: 2px red solid; Alueen reunaviivan leveys kaksi pikseliä, väri punainen ja viivan tyyppi yhtenäinen
}

Tyylimäärittelyt CSS:llä voi sijoittaa kolmella tavalla:

1) HTML-elementin esim. h1:n sisällä (Ei suositeltava, koska ei poikkea juurikaan aikaisemmasta tyylimäärittelytavasta ja tekee koodista sekavan.)

<h1 style="color:blue;margin-left:30px;">Tämä on otsikko</h1> 

2) upotetuna tyylisääntönä html-tiedostossa <head>-elementin sisällä

<head>
<style>
body { background-color: lightblue; } Taustaväri vaaleansininen
h1 {
color: orange; h1-otsikon väri oranssi
margin-left: 40px; h1-otsikon vasen marginaali 40 pikseliä
}
</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"> Tiedoston nimen voi tietysti itse keksiä. Ei tarvitse aina olla tyylit.css.
</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

2015-05-06T16:28:35+03:00

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: /** kommentti **/

Valmiita CSS:llä tehtyvä sivupohjia tai niiden osia esim. valikkoja löytää googlettamalla esim. CSS templates tai CSS menus.