Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Hinweis

Diese Website ist von 2009 und inhaltlich zum Teil nicht mehr aktuell.

Aktuell (2020)

Einstieg in HTML und CSS (Cover)

WordPress

Einstieg in WordPress (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; }