CSS Vormingud

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:

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

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

form {
  background-color : #ffc;
}

Ää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;
}

| Koju  | Veebidisain |  Html+Xhtml |  Css |  Javascript |  HTML DOM |  DHTML |  XML |  Sisukord | Mail |
| Windows 7 |