ngr wrote in dk.edb.internet.webdesign.html:
> Her har du først et link til filen
>
> <LINK REL="Stylesheet" HREF="css/s.css" TYPE="text/css"> (det skal
> stå i headeren på hver html fil)
>
>
> og så et eksempel på css-file, som altså hedder s.css og ligger i
> biblioteket css
>
>
> BODY
> {
> FONT-SIZE: 11px;
> COLOR: #000080;
> FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
> SCROLLBAR-FACE-COLOR: #ffd979;
> SCROLLBAR-HIGHLIGHT-COLOR: #ffd979;
> SCROLLBAR-SHADOW-COLOR: #ffd979;
> SCROLLBAR-3DLIGHT-COLOR: #ffd979;
> SCROLLBAR-ARROW-COLOR: #ffff99;
> SCROLLBAR-TRACK-COLOR: #ffeab9;
> FONT-STYLE: normal;
> FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
> SCROLLBAR-DARKSHADOW-COLOR: #666666;
> BACKGROUND-COLOR: #DFDFFF;
> TEXT-DECORATION: none;
> }
> A:link
> {
> TEXT-DECORATION: none;
> COLOR:#000066;
> }
> A:visited
> {
> TEXT-DECORATION: none;
> COLOR:#000066;
> }
> A:active
> {
> COLOR: red;
> TEXT-DECORATION: underline;
> }
> A:hover
> {
> COLOR: red;
> TEXT-DECORATION: none;
> }
> ..txt
> {
> FONT-SIZE: 11px;
> COLOR: #000080;
> FONT-STYLE: normal;
> FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
> TEXT-DECORATION: none
> }
> ..t12
> {
> FONT-SIZE: 12px;
> COLOR: #000080;
> FONT-STYLE: normal;
> FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
> TEXT-DECORATION: none
> }
> ..t14
> {
> FONT-SIZE: 14px;
> COLOR: #000080;
> FONT-STYLE: normal;
> FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
> TEXT-DECORATION: none
> }
> ..c14
> {
> FONT-SIZE: 14px;
> COLOR: #000080;
> FONT-STYLE: normal;
> FONT-FAMILY: Comic Sans MS;
> TEXT-DECORATION: none
> }
> ..c16
> {
> FONT-SIZE: 16px;
> COLOR: #000080;
> FONT-STYLE: normal;
> FONT-FAMILY: Comic Sans MS;
> TEXT-DECORATION: none
> }
> TD
> {
> FONT-SIZE: 11px;
> COLOR: #0c0000;
> FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
> TEXT-DECORATION: none
> }
> H1
> {
> FONT-WEIGHT: bold;
> FONT-SIZE: 10px;
> COLOR: #0c0000;
> FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif
> }
>
Hej igen.
Hvad hvis CSS'en ser sådan ud?
<style type="text/css">
<!--
/* GENERAL LINK */
a:link
{
font-size: 9px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
a:active
{
font-size: 9px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
a:visited
{
font-size: 9px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
a:hover
{
font-size: 9px;
font-weight: bold;
text-decoration: underline;
color: navy;
}
/* WHITE GENERAL LINK */
a.white:link
{
font-size: 9px;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a.white:active
{
font-size: 9px;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a.white:visited
{
font-size: 9px;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a.white:hover
{
font-size: 9px;
font-weight: bold;
text-decoration: underline;
color: #FEBE11;
}
/* NAV LINK */
a.nav:link
{
font-size: 9px;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
text-transform: uppercase;
}
a.nav:active
{
font-size: 9px;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
text-transform: uppercase;
}
a.nav:visited
{
font-size: 9px;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
text-transform: uppercase;
}
a.nav:hover
{
font-size: 9px;
font-weight: bold;
text-decoration: underline;
color: #FEBD11;
text-transform: uppercase;
}
/* BUTTON LINK */
a.btn:link
{
width: 40px;
background-image: url("images/bg_btn.gif");
height: 17px;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding-top: 1px;
padding-left: 14px;
padding-right: 6px;
font-size: 9px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
a.btn:active
{
width: 40px;
background-image: url("images/bg_btn.gif");
height: 17px;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding-top: 1px;
padding-left: 14px;
padding-right: 6px;
font-size: 9px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
a.btn:visited
{
width: 40px;
background-image: url("images/bg_btn.gif");
height: 17px;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding-top: 1px;
padding-left: 14px;
padding-right: 6px;
font-size: 9px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
a.btn:hover
{
width: 40px;
background-image: url("images/bg_btn_on.gif");
height: 17px;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding-top: 1px;
padding-left: 14px;
padding-right: 6px;
font-size: 9px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
/* BORDER LINK */
a.border:link
{
background-image: url("images/bg_border.gif");
height: 17px;
border-width: 1px;
border-style: solid;
border-color: #FF9C67;
padding-top: 1px;
padding-left: 6px;
padding-right: 6px;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
a.border:active
{
background-image: url("images/bg_border.gif");
height: 17px;
border-width: 1px;
border-style: solid;
border-color: #FF9C67;
padding-top: 1px;
padding-left: 6px;
padding-right: 6px;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
a.border:visited
{
background-image: url("images/bg_border.gif");
height: 17px;
border-width: 1px;
border-style: solid;
border-color: #FF9C67;
padding-top: 1px;
padding-left: 6px;
padding-right: 6px;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
a.border:hover
{
background-image: url("images/bg_border.gif");
height: 17px;
border-width: 1px;
border-style: solid;
border-color: #000000;
padding-top: 1px;
padding-left: 6px;
padding-right: 6px;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
/* SPECIAL CLASSES */
.textfield
{
font-family: verdana, helvetica, sans-serif;
font-size: 9px;
color: #000000;
background-color: #FEBE11;
border: 1px solid;
border-color: #F14407 #FEDB7A #FEDB7A rgb(241,68,7);
}
.textfieldwhite
{
font-family: verdana, helvetica, sans-serif;
font-size: 9px;
color: #000000;
background-color: #FFFFFF;
border: 1px solid;
border-color: #444444 #CCCCCC #CCCCCC rgb(68,68,68);
}
input.button
{
border-width: 1px;
border-style: solid;
border-color: #000000;
font-family: Verdana;
font-size: 9px;
font-weight: bold;
text-decoration: none;
background-color: #303030;
color: #FFFFFF;
}
img
{
border-color: #000000;
}
/* TEXT CLASSES */
p, div, td
{
color: #000000;
font-family: verdana, helvetica, sans-serif;
font-size: 9px;
font-style: normal;
}
.txt9
{
color: #000000;
font-family: verdana, helvetica, sans-serif;
font-size: 9px;
font-style: normal;
}
.txt10black
{
color: #000000;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
font-style: normal;
}
.txt10blackbold
{
color: #000000;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
.txt10white
{
color: #FFFFFF;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
font-style: normal;
}
.ingress
{
font-family: verdana, helvetica, sans-serif;
color: #444444;
font-weight: bold;
font-size: 9px;
}
.redvote
{
font-family: verdana, helvetica, sans-serif;
color: #FF0000;
font-weight: bold;
font-size: 10px;
}
.head
{
font-family: verdana, helvetica, sans-serif;
color: #000000;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
.smallhead
{
font-family: verdana, helvetica, sans-serif;
color: #000000;
font-size: 9px;
font-weight: bold;
}
.txt
{
color: #000000;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}
.date
{
color: #000000;
font-family: georgia,verdana, helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}
-->
</style>
Så starter filen jo ikke med body som i dit eksempel. Der er nemlig mere
end et stylesheet i HTML dokumentet, og det er kun det første der starter
med body. Hvordan kommer det så til at se ud? Undskyld det lange stykke
kode :-;
På forhånd tak
Med venlig hilsen Lasse Jensen...
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials