 ilj@flowsim.sestylesheets på svenska 2 - stilmallar - css stylesheets: css/ stilmallar |
||
 |
 VAR? I det första exemplet finns stilmallen i en separat fil som heter minstilmall.css. LINK-taggen placeras i HTML-sidans HEAD-del och kan se ut så här: <LINK REL="stylesheet" TYPE="text/css"HREF="minstilmall.css">En stilmallsfil, t ex minstilmall.css, som gör bakgrundsfärgen vit och textfärgen svart på alla HTML-sidor som innehåller LINK-taggen ovan, kan se ut här: BODY {background-color:white; color:black} De tecken som används i stilmallen är krullparenteser { } kolon : semikolon ; 
Man kan också placera stilmallen direkt på den HTML-sida vars utseende den ska reglera; stilmallen placeras då mellan STYLE-taggar i HTML-sidans HEAD-del. Den enda raden i exemplet här nedanför bestämmer att texten efter P-taggar (<P>) ska vara svart. <STYLE TYPE="text/css"> <!-- P { color: black }
--> </STYLE>
Man kan också använda attributet STYLE tillsammans med vilken HTML-tagg som helst i BODY-delen. I följande exempel sätts texten i det första stycket här nedanför till blå och texten i det andra blir röd. <P STYLE="color: blue"> första stycket, den här texten blir blå <P STYLE="color: red"> andra stycket, den här texten blir röd
HUR? Om man t ex vill bestämma att BODY-delens bakgrundsfärg ska vara röd och att textfärgen ska vara svart kan man skriva så här: <STYLE TYPE="text/css"> <!-- BODY {background-color: red}
BODY {color: black}
--> </STYLE> eller så här (obs! semikolon mellan de olika bitarna): <STYLE TYPE="text/css"> <!-- BODY
{
background-color: red;
color: black;
}
--> </STYLE> Om man sätter BODY-delens text- och bakgrundsfärg har man alltså bestämt hela sidans text- och bakgrundsfärg - om man inte anger annat för andra delar.
Om man vill att alla H3-rukriker (dvs text som på sidan placeras mellan <H3> och </H3>) ska skrivas i grönt kan man skriva så här: H3 { color: green }
Om man vill att betonade delar av H3-rubriker (dvs text som på sidan placeras mellan <H3><EM> och </EM></H3>) ska skrivas i rött kan man göra så här: H3 EM { color: red }
/* det här är en kommentar */
ID - t ex om det inte alltid ska se likadant ut efter alla P-taggar. Så här definierar man stilmallen: <STYLE TYPE="text/css"> <!-- #svart1{color:black;background-color:yellow;}
#svart2{color:black;background-color:red;}
--> </STYLE> Och så här kan man använda man den: <P ID="svart1"> svart text på gul bakgrund <P ID="svart2"> svart text på röd bakgrund <P ID="svart1"> svart text på gul bakgrund
CLASS <STYLE TYPE="text/css"> <!-- .gult{color:black;background-color:yellow;}
--> </STYLE> <H1 CLASS="gult"> svart text på gul bakgrund <P CLASS="gult"> svart text på gul bakgrund <PRE CLASS="gult"> svart text på gul bakgrund Stilmallen här ovan för bestämmer att allt som är av klassen .gult kommer att skrivas i svart på en gul bakgrund.
Som vanligt fungerar det olika i olika webbläsare och det är definitivt bäst att kolla sidan i åtminstone både MIE och Netscape. Mer om stilmallar under rubriken STYLESHEETS på www.flowsim.se.  Sidan gjordes av ilj@flowsim.se Senast ändrad 13 Mars, 2004 Den här sidan hör hemma i ett tredelat ramsystem hos www.flowsim.se Stilmallar på svenska | |