Css Parametrejä!

Hyödullisimmät CSS ominaisuudet!

Text-align:

Jos laitettuna body:yn niin keskittää kaiken sisällön määritettyyn kohtaan.

Melkeimpä kaikissa muissa Html tag:eissa sillä voidaan määrittää yksittäisen elementin paikka rivillänsä. Voidaan käyttää tekstin keskittämiseen esim. div:ien ja table:jen sisällä, mutta pitää muistaa vaikka ominaisuuden nimi onkin text-align se vaikutaa kaikkiin elementteihin. (valitettavasti text-align ei keskitä taulukkoja joten taulukot saa keskitettyä, mutta "margin:0 auto;":lla saa taulukon helposti keskitettyä keskelle sivua!)

Syntaksi:

text-align: <arvo>

Mahdolliset arvot:

left - (vasen)

right - (oikea)

center - (keskitä)

justify - (tasaa tekstin molempiin reunoihin)

<string> - for example, a full stop (period). This value only works on table cells.

(esim. piste (.). Tämä arvo toimi vain taulukoiden soluissa.)

inherit - (perii arvon ylemmältä html elementiltä jossa nykyinen elementti sijaitee)

Tämä esimerkki tag keskittää kaikki nettisivun elementit keskelle text-align:in avulla (ja kyllä taulukot eivät vaan halua keskittyä tällä)

------

------

Position:

Erittäin kätevä CSS parametri, jolla voidaan sijoitella elementtejä nettisivulla.

Sitä käytetään top, bottom, left ja right parametrien kanssa, jotta voit sijoittaa elementtejä mihinkä vaan.

Syntaksi:

position: <arvo>

Mahdolliset arvot:

static - The element flows as normal. The left and top properties don't take effect.

(Elementti käyttäytyy normaalisti. left ja top parametrit eivät vaikuta elementin sijaintiin.)

relative - The element is offset relative to it's normal position in the flow.

(Elementti siirtyy suhteessa sen normaaliin sijaintiin)

absolute - The element is positioned based on it's containing block. The element is taken out of the normal flow. Any subsequent elements will not be impacted - they will appear where they normally would even if the previous element was not offset.

(Elementti on sijoitettu sen sisältymään osioonsa. Elementti on otettu pois sivun asettelusta. Sen sijainti ja koko ei vaikuta muiden elementtien sijainteihin - Muut elementit sijaitevat siellä missä ne normaalisti sijaitsisivat vaikka edellinen elementti ei olisi siirretty.)

fixed - Similar to absolute, but also doesn't move when scrolled.

(Samantyyppinen absolute:n kanssa, mutta ei liiku sivua navigoidessa.)

inherit - (perii arvon ylemmältä html elementiltä jossa nykyinen elementti sijaitee)

Top:

Css parametri jota käytetään yhdessä position, left, right ja bottom parametrejen kanssa, jolla saadaan sijoitettua elementtejä nettisivuilla.

Syntaksi:

top: <arvo>

Mahdolliset arvot:

<pituus> (esim. 20 px)
<prosentti> (esim. 20%)
auto
inherit - (perii arvon ylemmältä html elementiltä jossa nykyinen elementti sijaitee)

Left:

Css parametri jota käytetään yhdessä position, top, right ja bottom parametrejen kanssa, jolla saadaan sijoitettua elementtejä nettisivuilla.

Syntaksi:

left: <arvo>

Mahdolliset arvot:

<pituus> (esim. 20 px)
<prosentti> (esim. 20%)
auto
inherit - (perii arvon ylemmältä html elementiltä jossa nykyinen elementti sijaitee)

Right:

Css parametri jota käytetään yhdessä position, top, left ja bottom parametrejen kanssa, jolla saadaan sijoitettua elementtejä nettisivuilla.

Syntaksi:

right: <arvo>

Mahdolliset arvot:

<pituus> (esim. 20 px)
<prosentti> (esim. 20%)
auto
inherit - (perii arvon ylemmältä html elementiltä jossa nykyinen elementti sijaitee)

Bottom:

Css parametri jota käytetään yhdessä position, top, left ja right parametrejen kanssa, jolla saadaan sijoitettua elementtejä nettisivuilla.

Syntaksi:

bottom: <arvo>

Mahdolliset arvot:

<pituus> (esim. 20 px)
<prosentti> (esim. 20%)
auto
inherit - (perii arvon ylemmältä html elementiltä jossa nykyinen elementti sijaitee)

Tässä esimerkki tag:issa sijoitamme keltaisen "div"-elementin keskelle ruutua käyttäen juuri oppimiamme position parametreja. Tämä "div" ei liiku scrollatessa ja sen reunat ovat 20% sivun reunoista irti

------

------

Hae tästä blogista

Opiskelublogi