ilj@flowsim.se
stylesheets på svenska 14 - stilmallar
stilmallar och knappar/button







 

Ner till texten!


 
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