Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

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:

Inhaltsbereich

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 ======================================= */