Weitere Infos
Sie lesen:
LB1 (2009)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
8.6 Das aufgeräumte Stylesheet im Überblick
So könnte das Stylesheet aus dem vorherigen Kapitel nach einer kleinen Aufräumaktion aussehen:
01 /* =================================================
02 Stylesheet für die Übungsseiten aus "Little Boxes, Teil 1"
03 Stand: Aufgeräumtes Stylesheet (Ende Kap. 08)
04 Datei: bildschirm.css
05 Datum: 2009-04-20
06 Autor: Peter Müller
07 Aufbau: 1. Kalibrierung und Restauration
08 2. Allgemeine Styles
09 3. Styles für Layoutbereiche
10 4. Sonstige Styles
11 ================================================== */
12
13 /* ======================================
14 1. Kalibrierung und Restauration
15 ====================================== */
16 /* Reset - alle Abstände auf NULL */
17 * { padding: 0; margin: 0; }
18 /* optional: erzwingt Scrollbar im Firefox */
19 html { height: 101%; }
20 h2, p, ul, ol { margin-bottom: 1em; }
21 ul ul { margin-bottom: 0; }
22 li { margin-left: 1em ; }
23 /* hier ggfs. Abstände für weitere Elemente restaurieren */
24
25 /* ======================================
26 2. Allgemeine Styles
27 ====================================== */
28 body {
29 background-color: #8c8c8c;
30 color: white;
31 font-family: Verdana, Arial, Helvetica, sans-serif;
32 font-size: small;
33 }
34 h1 { font-size: 150%; }
35 h2 { font-size: 130%; }
36 address {
37 text-align: center;
38 font-size: 80%;
39 font-style: normal;
40 letter-spacing: 2px;
41 line-height: 1.5;
42 }
43 a {
44 text-decoration: none;
45 /* outline: none; */ /* nur wenn es Sie wirklich stört */
46 }
47 a:link { color: #d90000; }
48 a:visited { color: #cc6666; }
49 a:hover,
50 a:focus {
51 border-bottom: 1px solid #d90000;
52 }
53 a:active {
54 color: white;
55 background-color: #d90000;
56 }
57 /* Allgemeine Klassen und IDs */
58 img#logo {
59 background-color: white;
60 color: black;
61 padding: 10px;
62 border: 10px solid #d9d9d9;
63 }
64
65 /* ======================================
66 3. Styles für die Layoutbereiche
67 ====================================== */
68 #wrapper {
69 background-color: white;
70 color: black;
71 width: 720px;
72 margin: 10px auto;
73 }
74 #kopfbereich {
75 background: #ffe574 url(farbverlauf.jpg) repeat-y top left;
76 color: black;
77 padding: 10px 20px 0 20px;
78 }
79 div#kopfbereich p span {
80 color: #d90000;
81 }
82 #navibereich {
83 padding: 5px 20px 5px 20px;
84 }
85 #textbereich {
86 padding: 20px 10px 20px 20px;
87 }
88 #textbereich a {
89 border-bottom: 1px dotted #cc0000;
90 }
91 #textbereich a:hover,
92 #textbereich a:focus {
93 border-bottom: 1px solid #d90000;
94 }
95 #fussbereich {
96 padding: 10px 20px 20px 20px;
97 border-top: 1px solid #8c8c8c;
98 margin-top: 0;
99 }
100 /* ======================================
101 4. Sonstige Styles
102 ====================================== */
103
104
105
106 /* =======================================
107 E N D E D E S S T Y L E S H E E T S
108 ======================================= */