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

7.9 Das Stylesheet im Überblick

Am Ende dieses Kapitels wird das Stylesheet langsam, aber sicher etwas unübersichtlich. Hier der aktuelle Stand der Dinge:

01 /* Stylesheet für Übungsseiten "Little Boxes, Teil 1" */
02 * { padding: 0; margin: 0; }
03 html { height: 100%; margin-bottom: 1px; }
04 body {
05   background-color: #8c8c8c;
06   color: white;
07   font-family: Verdana, Arial, Helvetica, sans-serif;
08   font-size: small;
09 }
10 div#wrapper {
11   background-color: white;
12   color: black;
13   width: 720px; /* feste Breite */
14   margin-top: 10px;
15   margin-right: auto; /* Abstand rechts */
16   margin-bottom: 10px;
17   margin-left: auto; /* Abstand links */
18 }
19 div#kopfbereich {
20   background: #ffe574 url(farbverlauf.jpg) repeat-y top left;
21   color: black;
22   padding-top: 10px;
23   padding-right: 20px;
24   padding-bottom: 0;
25   padding-left: 20px;
26 }
27 div#navibereich {
28   padding-top: 5px ;
29   padding-right: 20px;
30   padding-bottom: 5px;
31   padding-left: 20px;
32 }
33 div#textbereich {
34   padding-top: 20px ;
35   padding-right: 10px;
36   padding-bottom: 20px;
37   padding-left: 20px;
38 }
39 div#fussbereich {
40   padding-top: 10px;
41   padding-right: 20px;
42   padding-bottom: 20px;
43   padding-left: 20px;
44   border-top: 1px solid #8c8c8c;
45   margin-top: 0;
46 }
47 img#logo {
48   background-color: white;
49   color: black;
50   padding: 10px;
51   border: 10px solid #d9d9d9;
52 }
53
54 h1 { font-size: 150%; }
55 h2 { font-size: 130%; }
56 address {
57   text-align: center;
58   font-size: 80%;
59   font-style: normal;
60   letter-spacing: 2px;
61   line-height: 1.5;
62 }
63 a {
64   text-decoration: none;
65   /* outline: none; */
66 }
67 a:link { color: #d90000; }
68 a:visited { color: #cc6666; }
69 a:hover, a:focus {
70   border-bottom: 1px solid #d90000;
71 }
72 a:active {
73   background-color: #d90000;
74   color: white;
75 }
76 #textbereich a {
77   border-bottom: 1px dotted #cc0000;
78 }
79 #textbereich a:hover,
80 #textbereich a:focus {
81   border-bottom: 1px solid #d90000;
82 }
83
84 /* Abstand nach unten */
85 h2, p, ul, ol { margin-bottom: 1em ; }
86
87 /* Verschachtelte Listen ohne Abstand */
88 ul ul { margin-bottom: 0; }
89
90 /* Abstand von links */
91 li { margin-left: 1em; }