CSS parameetrid PDF Trüki
Kirjutas Mario Metshein   

css.gif

Enim kasutatavad CSS parameetrid
Teksti vormindamine
Parameeter (Properties) Väärtus (Values) Kommentaar / näide

font-family

Arial, Tahoma
serif, sans-serif jne.

Määrab elemendile fondi ehk kirjatüübi.

  1. font-family: helvetica, arial, sans-serif;

font-size

(pt), (px), (percent)

Võimaldab määrata fondi suuruse

  1. font-size: 13px;

font-style

normal, italic, oblique

Määratleb selle, kas tekst peaks olema kaldkirjas

  1. font-style: italic;

font-variant

normal, small-caps

Määratleb selle, kuidas kuvada väikseid tähti

  1. font-variant: small-caps;

font-weight

normal, bold, bolder, lighter, (number), xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller

Määratleb selle, kas tekst tuleks kuvada paksuna e. "rasvases" kirjas. Numbrilised väärtused 100, 200, 300, 400 (vaikimisi), 500, 600, 700, 800, or 900.

  1. font-weight: bold;

font

 

Kombineerib endas kõikide järgnevate atribuutide väärtusi.

  1. font: italic bold 1em/1.5 helvetica, arial, sans-serif;

letter-spacing

normal, 1em

Määrab kirjatähtede vahed. 1em, 2em, jne

  1. letter-spacing: 0.1em;

text-align

left, right, center, justify

Määrab teksti joonduse plokk-elemendi sees

  1. p {text-align: justify;}

text-decoration

none, underline, overline, line-through, blink

Määrab selle, kas tekst on allajoonitud, läbikriipsutatud või omab ülemist joont.

  1. a {text-decoration: underline;}
  2. a:hover {text-decoration: none;}

text-transform

none, capitalize, uppercase, lowercase

Võimaldab muuta kõik tähed kas suurtähtedeks või väiketähtedeks

  1. p {text-transform: uppercase;}

text-indent

(px), (%)

Määrab lõigu taanduse.

  1. p {text-indent: 1em;}

word-spacing

normal, 1em

Määrab sõnadevahelise kauguse. Väärtused 1em, 2em, jne
  1. p {word-spacing: 1em;}

 

Tausta vormindamine
Parameeter (Properties) Väärtus (Values) Kommentaar / näide

background-attachment

scroll, fixed

Taustapildi "kinnitusviis". Kas taustapilt jääb lehe kerimisel jätkuvalt nähtavale

  1. body {background-attachment: fixed;}

background-color

(color), transparent

Värvide tabel siin.

  1. background-color: #00FF00

background-image

none, (url)

Võimaldab määrata elemendile taustapildi, väärtuseks peab olema taustapildi asukoht

  1. background-image: url(pildifail.png);

background-position

(%), (length), top, center, bottom, left, center, right

Taustapildi asukoht teda sisaldava elemendi sees

  1. background-position: bottom right;

background-repeat

repeat, repeat-x, repeat-y, no-repeat

Määrab selle, kas taustapilti korratakse.

  1. background-repeat: repeat-x;

background

Any of the above background values separated by spaces.

Üldine atribuut, võimaldab määrata korraga nii taustavärvi, -pildi, -positsiooni kui ka kuvamisviisi.

  1. background: green url(pildifail.png) no-repeat top left;
Sisu vormindus
Parameeter (Properties) Väärtus (Values) Kommentaar / näide

margin-bottom

(px, pt, em), (%), auto

Määrab vaheala (ehk tühja ala) plokk-elemendi alt

  1. margin-bottom: 10px

margin-left

(px, pt, em), (%), auto

Määrab vaheala (ehk tühja ala) plokk-elemendi vasakult poolt

  1. margin-left: 10px

margin-right

(px, pt, em), (%), auto

Määrab vaheala (ehk tühja ala) plokk-elemendi paremalt poolt

  1. margin-right: 10px;

margin-top

(px, pt, em), (%), auto

Määrab vaheala (ehk tühja ala) plokk-elemendi ülevalt

  1. margin-top: 10px;

margin

(px, pt, em), (%), auto

Selle abil on võimalik määrata vaheala plokk-elemendi kõigile külgedele kasutades mõõtühikuid (px, pt, em) või protsenti.

  1. div {margin: 10px;}

Vaheala kõigile plokk-elemendi külgedele {ülevalt; paremalt; alt; vasakult}

  1. div {margin: 10px 0 20px 0;}

padding-bottom

(px, pt, em), (%)

Määrab vaheala (ehk tühja ala) plokk-elemendi sees alt

  1. div {padding-bottom: 10px;}

padding-left

(px, pt, em), (%)

Määrab vaheala (ehk tühja ala) plokk-elemendi sees vasakult

  1. div {padding-left: 10px;}

padding-right

(px, pt, em), (%)

Määrab vaheala (ehk tühja ala) plokk-elemendi sees paremalt


  1. div {padding-right: 10px;}

padding-top

(px, pt, em), (%)

Määrab vaheala (ehk tühja ala) plokk-elemendi sees ülalt

  1. div {padding-top: 10px;}

padding

(px, pt, em), (%)

Üks võimalus vaheala määramiseks on atribuut padding üksinda.

Vaheala kogu plokk-elemendile:

  1. div {padding: 10px;}

Vaheala kõigile plokk-elemendi külgedele:

  1. div {padding: 10px 0 20px 0;}

border-bottom-width

medium, thin, thick, (px, pt, em)

Alumise äärejoone laiuse määramiseks

  1. border-bottom-width: 2px;

border-bottom

Any of the border-top-bottom, border-color and border-style values.

Võimaldavad määrata ääre elemendi alumisele küljele

border-color

(color)

Võimaldavad määrata ääre elemendi värvuse

  1. border-color: red

border-left-width

medium, thin, thick, (px, pt, em)

Alumise äärejoone laiuse määramiseks

border-left

Any of the border-top-left, border-color and border-style values.

Võimaldavad määrata ääre elemendi vasakule küljele

border-right-width

medium, thin, thick, (px, pt, em)

Alumise äärejoone laiuse määramiseks.

border-right

Any of the border-right-width, border-color and border-style values.

Võimaldavad määrata ääre elemendi paremale küljele

border-style

none, dotted, dashed, solid, double, groove, ridge, inset, outset

Äärejoone stiili määramiseks

  1. border-style: solid;

border-top-width

medium, thin, thick, (px, pt, em)

Alumise äärejoone laiuse määramiseks

border-top

Any of the border-top-width, border-color and border-style values.

Võimaldavad määrata ääre elemendi ülemisele küljele

  1. border-top: 1em dotted #0000ff;

border

Any of the border values. Applies to all borders.

Äärise lisamine kõikidele külgedele

  1. border: 1px solid blue;

height

auto, (px, pt, em), (%)

Määrab plokk-elemendi kõrguse

  1. width: 100%;

width

auto, (px, pt, em), (%)

Määrab plokk-elemendi laiuse

  1. height: 100px;
Loendite vormindamine
Parameeter (Properties) Väärtus (Values) Kommentaar / näide

list-style-type

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroh, none

Määrab selle, milline näeb välja loendi märkija.

  1. li {list-style-type: square;}

list-style-image

none, (url)

Võimaldab kasutada loendi märkijana pildifaili.

  1. li {list-style-image: url(loendielement.png);}

list-style-position

outside, inside

Määrab selle, kas loendi märgistaja peaks kuvatama loendi sees või väljas

  1. li {list-style-position: inside;}

list-style

Any of the above list-style values separated by spaces.

Kombineeritud atribuut, mis sisaldab endas kõikide siin lehel esitatud atribuutide väärtusi

  1. list-style: disc inside;

white-space

normal, pre, nowrap

Määrab selle, kuidas kuvada elemendisiseseid reavahesid ja tühikuid

  1. .htmlkood { white-space: pre; }
Visuaalsed efektid
Parameeter (Properties) Väärtus (Values) Kommentaar / näide

clip

auto vaikeväärtus

rect(1 2 3 4)
(kus 1 = ülemine, 2 = parem, 3 = alumine, 4 = vasak;pikslites ning ilma komadeta)

Määratleb absoluutselt positsioneeritud plokk-elemendi ala, mis peab kindlasti olema nähtav

  1. img {position: absolute;
  2. clip: rect(10px 50px 30px 10px); }

cursor

default;
auto;
crosshair kitsas + märki meenutav rist;
help nool ja küsimärk;
text I kujuline tekstivaliku post;
pointer käsi väljasirutatud nimetissõrmega (nagu tavaliselt linkide korral);
progress nool ja liivakell;
wait liivakell;
move nelja suunda kuvavad nooled;
n-resize üles/alla nool;
ne-resize diagonaalne nool;
e-resize vasak/parem nool;
se-resize diagonaalne nool;
s-resize üles/alla nool;
sw-resize diagonaalne nool;
w-resize vasak-parem nool;
nw-resize diagonaalne nool;
URL abil saab määrata aadressi, kus asub endatehtud kursor.

Määrab, milline peaks kursor välja nägema siis, kui liigub üle kindla elemendi

  1. abbr, acronym {cursor: help;}

outline-width

medium, thin, thick, (length), inherit

Määrab välisjoone laiuse

  1. div {outline-width: 5px;}

outline-style

none, dotted, dashed, solid, double, groove, ridge, inset, outset

Määrab ainult välisjoone stiili

  1. div {outline-style: dashed;}

outline-color

(color), invert, inherit

Määrab ainult välisjoone värvi kasutades kas värvikoodi või värvi ingliskeelset nimetust

  1. div {outline-color: orange;}

outline

Any of the above outline values separated by spaces.

Kombineeritud väärtused kõigi omadest

  1. div {outline: 5px solid orange;}

overflow

visible, hidden, scroll, auto

Määrab selle, mida teha tekstiga, mis width ja height atribuutidega seatud piiridesse ei mahu.


  1. div {overflow: scroll;width: 300px;height: 100px;}

visibility

inherit, visible, hidden

Määrab selle, kas element on nähtav või mitte

  1. p {visibility: hidden;}
Visuaalne vormindus
Parameeter (Properties) Väärtus (Values) Kommentaar / näide

bottom

auto, inherit, (length), (percent)

Määrab plokk-elemendi kauguse teda sisaldava elemendi alumisest küljest. Absoluutse paigutuse korral (position: absolute) tähendab see kaugust võrgulehitseja alumisest servast. Suhtelise (relatiivse) paigutuse korral (position: relative) tähendab see kaugust vanem-jaotise alumisest servast


  1. position: absolute; bottom: 20px;

clear

none, left, right, both, inherit

Määrab selle, kuidas tuleb sisuplokke kuvada "hõljuva elemendi" (CSS atribuut float) kasutamise järel.

  1. clear: both;

direction

ltr, rtl, inherit

Määrab teksti suuna. Kasutuses nende keelte juures, mida kirjutatakse ja loetakse paremalt vasakule. Rakendatakse koos unicode-bidi atribuudiga

  1. p {direction: rtl; unicode-bidi: bidi-override;}

display

inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit

Määrab, kuidas elementi kuvada. Võimaldab teha plokk-elemendist reasisese elemendi ja vastupidi, samuti vajadusel "peita" mingi osa lehest.

  1. span {display: block;}

float

none, left, right, inherit

Määratleb selle kas ja kuidas peaks element "hõljuma". Kasutuses nii lehe üldise paigutuse korraldamisel, aga ka näiteks piltide lisamisel teksti sisse nii, et tekst ümbritseks pilti.

  1. .minupilt {float: right;}

height

auto, inherit, (length), (percent)

Määrab plokk-elemendi kõrguse.

  1. height: 100px;

line-height

normal, (length), (percent)

Määrab blokk-elemendi reakõrguse

  1. line-height: 14pt

left

auto, inherit, (length), (percent)

Määrab plokk-elemendi kauguse teda sisaldava elemendi vasakust küljest. Absoluutse paigutuse korral (position: absolute) tähendab see kaugust võrgulehitseja vasakust servast. Suhtelise (relatiivse) paigutuse korral (position: relative) tähendab see kaugust vanem-jaotise vasakust servast.

  1. position: absolute; left: 20px; position: relative; left: 10%;

max-height

none, inherit, (length), (percent)

Määrab plokk-elemendi maksimaalse kõrguse. Internet Explorer seda atribuuti ei tunnista. Väärtus peab olema mõõtühikutes (px, pt, em) või protsentides (%);

  1. max-height: 120px;

max-width

none, inherit, (length), (percent)

Määrab plokk-elemendi maksimaalse laiuse. Internet Explorer seda atribuuti ei tunnista. Väärtus peab olema mõõtühikutes (px, pt, em) või protsentides (%);

  1. max-width: 200px;

min-height

inherit, (length), (percent)

Määrab plokk-elemendi minimaalse kõrguse. Internet Explorer seda atribuuti ei tunnista, vaid käsitleb height atribuuti samamoodi, nagu teised lehitsejad kasutavad min-height atribuuti.

  1. min-height: 200px;

min-width

inherit, (length), (percent)

Määrab plokk-elemendi minimaalse laiuse.

  1. min-width: 300px;

position

static, absolute, relative, fixed, inherit

Määrab selle, kuidas plokk-elementi positsioneerida

  1. .kast {position: absolute; left: 30px;top: 10px; }

right

auto, inherit, (length), (percent)

Määrab plokk-elemendi kauguse teda sisaldava elemendi paremast küljest. Absoluutse paigutuse korral (position: absolute) tähendab see kaugust võrgulehitseja paremast servast. Suhtelise (relatiivse) paigutuse korral (position: relative) tähendab see kaugust vanem-jaotise paremast servast

  1. position: absolute; right: 20px;

top

auto, inherit, (length), (percent)

Määrab plokk-elemendi kauguse teda sisaldava elemendi ülemisest küljest. Absoluutse paigutuse korral (position: absolute) tähendab see kaugust võrgulehitseja ülemisest servast. Suhtelise (relatiivse) paigutuse korral (position: relative) tähendab see kaugust vanem-jaotise ülemisest servast.

  1. position: absolute; top: 20px;

unicode-bidi

normal, embed, bidi-override, inherit

Kasutuses koos direction atribuudiga - kui vaja teksti suund ümber muuta.

  1. direction: rtl; unicode-bidi: bidi-override;

vertical-align

baseline, sub, super, top, text-top, middle, bottom, text-bottom, (percent)

Määrab reasisese elemendi vertikaalse asendi.

  1. .m {font-size: 0.7em; vertical-align: super;}

width

auto, (length), (percent)

Määrab plokk-elemendi laiuse. Segadusi tekitab asjaolu, et standardi järgi ei kuulu selle väärtuse alla ei padding, margin ega border poolt määratud väärtused.

  1. width: 100%;

z-index

auto, inherit, (integer)

Määrab elemendi/objekti asukoha z-teljel. Ehk - võimaldab määrata üksteisega muidu kattuvatele positsioonidele määratud elementidele selle, milline element on "tähtsam" ja tuleks kuvada eespool. Mida kõrgem on numbriline väärtus, seda eespool objekt/element kuvatakse. Väärtused võivad olla ka negatiivsed.

  1. img {z-index: 1;position: absolute;top: 0;left: 0;}

 

Tabelite vormindamine
Parameeter (Properties) Väärtus (Values) Kommentaar / näide

border-collapse

collapse, separate, inherit

Kasutuses tabelite juures ning määrab selle, millisel viisil äärejooni kasutatakse

  1. table {border-collapse: collapse;}
  2. td {border-width: 2px;}

border-spacing

(length)(length), inherit

Kui kasutuses on atribuudi border-collapse väärtus separate (vaikeväärtus), on võimalik border-spacing atribuudi abil määrata see, kui suured vahed lahtritel on. Internet Explorer antud atribuuti ei toeta.

  1. table {border-collapse: separate; border-spacing: 2px 4px;}
  2. td {border-width: 2px;}

caption-side

top, bottom, left, right, inherit

Määrab selle, millisel tabeli küljel peaks XHTML elemendi caption abil määratud informatsioon olema kuvatud.

  1. caption {caption-side: right;}

empty-cells

show, hide, inherit

Toimib tabelite juures ning määratleb selle, kas tühjad lahtrid (st. ilma väärtuseta) tuleks kuvada või mitte

  1. table {empty-cells: hide;}

speak-header

once, always, inherit

  1. table { speak-header: once }

table-layout

auto, fixed, inherit

Määrab selle, kuidas tabeli tulpade laiusi tuleb arvutada. Internet Explorer antud atribuuti ei toeta.

  1. table {width: 700px;
  2. table-layout: fixed;}
 
< Järgmine   Eelmine >
[ Tagasi ]

Lingid

ooo.jpeg firefox.gif getnotepad.jpg getsketchup.jpg
koffer.jpg

Viimati lisatud failid

HKHK esitlusmall
2009-09-05
Small Icons - 700tk
2008-06-30
Flag Icons
2008-06-30

Menüü

Foorum
Galerii