stylesheet
Ik heb hiervoor een stylesheet gemaakt dat ik door jullie wil laten beoordelen. Hoop dat ik het hier op de juiste plek neerzet. Misschien wil er iemand naar kijken en suggesties altijd welkom.
BODY
{
BACKGROUND-IMAGE: url(images/back.gif);
FONT: 11px Tahoma,Arial,sans-serif;
BACKGROUND-REPEAT: repeat;
HEIGHT: 100%;
BACKGROUND-COLOR: #ffffff
}
H1
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #676767;
PADDING-TOP: 0px
}
H2
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #676767;
PADDING-TOP: 0px
}
H3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #676767;
PADDING-TOP: 0px
}
H4
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #676767;
PADDING-TOP: 0px
}
H5
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #676767;
PADDING-TOP: 0px
}
H6
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #676767;
PADDING-TOP: 0px
}
h7
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #676767;
PADDING-TOP: 0px
}
H1
{
FONT-WEIGHT: bold;
FONT-SIZE: 13px;
COLOR: #676767
}
H2
{
FONT-WEIGHT: bold;
FONT-SIZE: 14px
}
H3
{
FONT-WEIGHT: bolder;
FONT-SIZE: 15px;
POSITION: relative
}
H4
{
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
TEXT-ALIGN: center
}
H5
{
FONT-WEIGHT: bold;
FONT-SIZE: 12px
}
H6
{
BORDER-RIGHT: #676767 1px solid;
BORDER-TOP: #676767 1px solid;
FONT-WEIGHT: bold;
FONT-SIZE: 13px;
BACKGROUND: url(images/h6_bg.png) #FFFFFF;
BORDER-LEFT: #676767 1px solid;
COLOR: white;
BORDER-BOTTOM: #676767 1px solid;
TEXT-ALIGN: center
}
A
{
TEXT-DECORATION: none
}
A:link
{
COLOR: #676767
}
A:visited
{
COLOR: #FFFFFF
}
A:active
{
COLOR: #000000
}
A:hover
{
COLOR: #ffffff
}
A.plain
{
TEXT-DECORATION: none
}
A.plain:link
{
COLOR: #676767
}
A.plain:visited
{
COLOR: #FFFFFF
}
A.plain:active
{
COLOR: black
}
A.plain:hover
{
COLOR: white
}
INPUT
{
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #ffffff 1px solid;
BORDER-LEFT: #ffffff 1px solid;
BORDER-BOTTOM: #ffffff 1px solid;
BACKGROUND-COLOR: #ffffff
}
TEXTAREA
{
BORDER-RIGHT: #ffffff 1px solid;
BORDER-TOP: #ffffff 1px solid;
BORDER-LEFT: #ffffff 1px solid;
BORDER-BOTTOM: #ffffff 1px solid;
BACKGROUND-COLOR: #ffffff
}
TD
{
FONT: 13px Tahoma,Arial,sans-serif
}
TH
{
FONT: 13px Tahoma,Arial,sans-serif
}
TABLE#borderless
{
BORDER-COLLAPSE: collapse
}
TABLE.borderless TH
{
BORDER-RIGHT: 0px;
PADDING-RIGHT: 5px;
BORDER-TOP: 0px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
VERTICAL-ALIGN: top;
BORDER-LEFT: 0px;
PADDING-TOP: 5px;
BORDER-BOTTOM: 0px
}
TABLE.borderless TD
{
BORDER-RIGHT: 0px;
PADDING-RIGHT: 5px;
BORDER-TOP: 0px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
VERTICAL-ALIGN: top;
BORDER-LEFT: 0px;
PADDING-TOP: 5px;
BORDER-BOTTOM: 0px
}
TABLE.borderless CAPTION
{
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
PADDING-BOTTOM: 8px;
MARGIN-LEFT: auto;
COLOR: #676767;
MARGIN-RIGHT: auto;
PADDING-TOP: 3px;
TEXT-ALIGN: left
}
.datatable
{
BORDER-RIGHT: #676767 1px solid;
BORDER-TOP: #676767 1px solid;
MARGIN-LEFT: auto;
BORDER-LEFT: #676767 1px solid;
MARGIN-RIGHT: auto;
BORDER-BOTTOM: #676767 1px solid;
BORDER-COLLAPSE: collapse
}
.datatable TD
{
BORDER-RIGHT: #676767 1px solid;
PADDING-RIGHT: 4px;
BORDER-TOP: #676767 1px solid;
PADDING-LEFT: 4px;
PADDING-BOTTOM: 4px;
VERTICAL-ALIGN: top;
BORDER-LEFT: #676767 1px solid;
PADDING-TOP: 4px;
BORDER-BOTTOM: #676767 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: left
}
.datatable TH
{
BORDER-RIGHT: #676767 1px solid;
PADDING-RIGHT: 4px;
BORDER-TOP: #676767 1px solid;
PADDING-LEFT: 4px;
PADDING-BOTTOM: 4px;
VERTICAL-ALIGN: top;
BORDER-LEFT: #676767 1px solid;
PADDING-TOP: 4px;
BORDER-BOTTOM: #676767 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: left
}
.datatable CAPTION
{
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
PADDING-BOTTOM: 8px;
MARGIN-LEFT: auto;
COLOR: #676767;
MARGIN-RIGHT: auto;
PADDING-TOP: 3px;
TEXT-ALIGN: left
}
.datatable TR.altrow
{
COLOR: #676767;
BACKGROUND-COLOR: #ffffff
}
A.info
{
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
Z-INDEX: 24;
COLOR: #FFFFFF;
POSITION: relative;
BACKGROUND-COLOR: white;
TEXT-DECORATION: none
}
A.info:hover
{
Z-INDEX: 90;
BACKGROUND-COLOR: #ffffff
}
A.info SPAN
{
DISPLAY: none
}
A.info:hover SPAN
{
BORDER-RIGHT: white 1px solid;
BORDER-TOP: white 1px solid;
DISPLAY: block;
Z-INDEX: 90;
LEFT: 1em;
BORDER-LEFT: white 1px solid;
WIDTH: 25em;
COLOR: white;
BORDER-BOTTOM: white 1px solid;
POSITION: absolute;
TOP: 2em;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: left
}
- Gebruik enters en tabs voor overzichtelijke code
- Gebruik comments om het een en ander duidelijker te maken
- Gebruik shorthand code (zoals margin: [top] [right] [bottom] [left];)
- Gebruik of #ffffff of #fff of white, waarbij ik het eerste aanraad. Niet alles zomaar door elkaar (dit is niet overzichtelijk)
- Sluit elke CSS regel af met een ;, ook de laatste.
- Zet strings (zoals Tahoma) altijd tussen quotes('')
- Bij 0px kun je de px weglaten, dit is sneller
- Hou 1 formaat aan voor borders. De meest gebruikte is border: 1px solid #000;
- Als je geen bottom border wil, maar de rest wel kun je beter dit gebruiken:
Code (php)
1
2
2
border: 1px solid #000;
border-bottom: none;
border-bottom: none;
- Gebruik een global CSS reset
voorbeeldje:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
body {
border 0px;
}
/*gastenboek*/
#gb {
}
#gb h1 {
}
border 0px;
}
/*gastenboek*/
#gb {
}
#gb h1 {
}