Jep. Jeg gør således, hvis jeg f.eks skal have en menu på alle sider :
Al CSS kode i en seperat fil : default.css. Denne includeres på alle sider i <head> ... </head> således :
Kode
<link rel="stylesheet" TYPE="text/css" href="./css/default.css"> |
Her er et eksempel på noget af det, den externe CSS side indeholder :
Kode
body
{
color: #c0c0c0;´ /*tekst farve*/
background-color: #008080; /*baggrund farve*/
font-family: tahoma; /*font type*/
font-size: 75%; /*font størrelse*/
letter-spacing: 1px; /*font mellemrum*/
}
a
{
text-decoration:none; /*ingen undrestregning af link*/
}
a:link {color:#ffffcc} /*link farve*/
a:visited {color:#cccccc} /*besøgt link farve*/
a:active {color:#ffff00} /*aktivt link farve*/
div.main_icon_menu /*hovedmenu inddeling*/
{
position: absolute;
top: 8px;
left: 8px;
}
div.menu_text /*menupunkt tekst indeling*/
{
text-align: center;
}
p.menu_item /*menu punkt afsnit*/
{
text-align: center;
} |
Min hovedmenu lægges i en seperat javascript fil : menu.js. Den inkluderes ligeledes i <head> ... </head>:
Kode
<script type="text/javascript" src="./js/menu.js"></script> |
..og her en smule af hvad den indeholder :
Kode
<!--
F1 = new Image;
F2 = new Image;
PB = new Image;
PBE = new Image;
F1.src = "./ico/folder.ico";
F2.src = "./ico/openfolder.ico";
PB.src = "./ico/full.ico";
PBE.src = "./ico/empty.ico";
notepad = "notesblok.html";
document.write("<div class='main_icon_menu'>");
document.write("<p class='menu_item'>");
document.write("<a href='index_dk.html' target='_self'>document.write("<div class='menu_text'>");
document.write("Denne hjemmside</a>");
document.write("</div>");
document.write("</p>");
document.write("<p class='menu_item'>");
document.write("<img src='./ico/folder.ico' border='0' onmouseover='this.src=F2.src' onmouseout='this.src=F1.src'>");
document.write("<div class='menu_text'>");
document.write("Mappe 1");
document.write("</div>");
document.write("</p>");
.
. osv....
. |
På denne måde kan jeg fra blot 2 filer (default.css og menu.js) bestemme menuen, dens layout og placering, på alle de sider der skal benytte den. På samme måde styrer jeg også med *.css og *.js filer alle andre elementer, der skal optræde på flere sider.
CSS er nemt at lære : Skal man bruge en gennerel behaviour (opførsel) for et bestemt tag f.eks. <body> fordi tekstfarven skal være ens ( = sort) på alle sider ?
Tjaeh... så bruger man :
body
{
color:black;
}
Skal kun nogle sider sort tekst ?
Så bruger man :
body.sort
{
color:black;
}
Der henvises med <body class="sort">
Hvis andre elementer som f.eks <div> eller <p> også skal kunne bruge denne egenskab :
#sort
{
color:black;
}
Hvilket gør at det kan bruges som f.eks. : <body id="sort">, <div id="sort">, <p id="sort"> ..osv.
I alle disse tags <...> ... </...> mellemrum, vil teksten være sort, undtagen der; hvor der med in-line CSS; style="..." er angivet noget andet i de mellemliggende <...> ... </...>.
..efter modellen :
<...>
.
<...>
.
<...> ... </...>
.
.
</...>
.
.
</...>
..men i stedet for at komme med lange forklaringer synes jeg du skulle kigge på :
http://html.dk/ ...eller, hvis du er til engelsk, dette meget pædagogiske, logiske og omfangsrige site :
http://html.dk/
Her på Kandu.dk er der også et CSS kursus :
http://www.kandu.dk/dk/kurser/css/cssKursus.asp
</MOLOKYLE>