Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

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