 |
Samma stilmall ger ganska olika resultat i olika webbläsare (jämför till exempel Mozilla och Internet Explorer)!
Så här kan HTML-taggen för en blå "stilmallsknapp" se ut:
<INPUT TYPE="button"
VALUE="en knapp"
STYLE= "border-color:blue;border-style:outset;background-color:blue;"
ONMOUSEOVER="this.style.border='inset'"
ONMOUSEOUT="this.style.border='outset'"
ONMOUSEDOWN="this.style.color='silver';"
ONMOUSEUP="this.style.color='white'">
När muspekaren förs över knappen (ONMOUSEOVER) ändras kanten från "outset" till "inset" med
raden this.style.border='inset'.
När musknappen trycks ner (ONMOUSEDOWN) ändras textfärgen till "silver".
När musknappen släpps upp (ONMOUSEUP) ändras textfärgen till "white".
Exemplets första blå knapp definieras efter STYLE med följande värden satta:
padding:6px;
border-width:4px;
width:160px;
border-color:blue;
background-color:#0000ff;
color:#0000ff;
font-weight:bold;
font-family:verdana,arial
TEXTENS UTSEENDE:
font-weight:bold //fetstil
font-family:verdana //typsnitt verdana
color:white //textfärg vit
KNAPPENS YTA:
background-color:blue //knappens bakgrundsfärg
width:160px //knappens bredd
padding:6px //utrymme mellan text o knappkant
KNAPPKANTEN :
border-width:4px //kantbredd 4 pixel
border-color:blue // kantens färg
Man kan använda en bild:
<INPUT TYPE="button"
STYLE="border-width:black;border-width:6px; background-image:url(bild.jpg)">
Man kan också rita egna knappbilder och använda JavaScript för att få dem att "röra" på sig. Exempel finns under BILD & FÄRG och
JAVASCRIPT
FLER EXEMPEL PÅ STiLMALLAR:
stilmallar & listor
stilmallar & länkar
stilmallar & tabeller
bilder/färgändring
cursor/muspekare
stilmall & TEXTAREA
stilmall & textrutor
dynamiska tabeller
första rad/bokstav
listor/egna bilder
IFRAME/ram
rubriker/H-taggar
rita med stilmallar - "skuggor"
visa/gömma ytor t ex julkalender
text-align
bredd & höjd
Sidan gjordes av
ilj@flowsim.se
Senast ändrad 30 april 2004.
Den här sidan hör hemma i ett ramsystem hos:
www.flowsim.se
Stilmallar på svenska
| |