Direktnavigation

Bookmark and Share

Weitere Infos (Randbereich)

Sie lesen gerade:

Little Boxes 1

Little Boxes Teil 1 - Webseiten gestalten mit HTML und CSS (Grundlagen)

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; }