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.