Site hosted by Angelfire.com: Build your free website today!

CSS Vormingud

CSS

Vormingud (teksti ja sisestusväjad) on veebidisainis kõige igavamad ja vähe informatsiooni andvamad elemendid.

Selleks, et erinevaid vormiguid külastajale veidigi huvitavamaks muuta, saab CSS'i abil kujundada päris omanäolisi vormingu elemente.

Muudame värve

Lisame stiililehele "input" elemendi. Sellega muudame sisestusvälja taustavärvi.

input {
  background-color : #ff7f50;
  color : #000;
}

Selline peaks olema tulemus:







Tekstiala ja valik

Selleks, et muuta kõike vormingu elemente, tuleb stiililehele kirjutada nii:

input, textarea, select {
  background-color : #ff7f50;
  color : #000;
}

Selline peaks olema tulemus:

Tume taust

Kui sa valid tumeda tausta siis pead jälgima, et tekst oleks nähtav. Näiteks tumepunasel taustal on valge kiri kergemini loetav kui must.
Stiililehel märgi elemendid nii.

input, textarea, select {
  background-color : #c00;
  color : #fff;
}

Samuti saab kogu vormingu taustavärvi määrata. "form" märgis on blokk-element, seega värv täidab kogu ala.
Selline on stiil:

form {
  background-color : #ffc;
}

Tulemus peaks olema selline.

Ääriste stiilid

Nii nagu värvidega, on võimalik muuta vormingutes raamistusi e. ääriseid. Oluline on määrata "padding" atribuut stiilides sest vastasel juhul jääb vorming liiga ülemise ääre lähedale:

form {
  border : 1px solid #000;
  padding : 5px;

Tulemus peaks olema selline:

Samuti saab lisada ääriseid vormingu erinevatele elementidele. Sellise stiiliga saab äärise tekstivälja ümber:

input {
  border : 2px dashed #228b22;
}

Paneme kõik kokku

Eelpool olevatest näidetst saame nüüd kokku panna endale meelepärase vormingu stiili:

form {
  border : 1px solid #000;
  padding : 5px;
}
input.submit {
background-color : #c00;
color : #ccc;
font : bold 14px/14px verdana, geneva, helvetica;
border : 2px solid #ccc;
.bright {
color : #c00;
font : bold 12px/12px verdana, geneva, helvetica;
}
input.bright {
border : 1px solid #c00;
}
.faded {
color : #ccc;
font : normal 12px/12px verdana, geneva, helvetica;
}
input.faded {
border : 1px solid #ccc;
}

Palun hinda seda saiti:

Parim Hea Keskmine Kehv