CSS

Zusammenfassung des Online-Tutorials CSS

Die HTML-Anweisungen der Beispiele wurden mit einem Leerzeichen ungültig gemacht, damit sie nicht ausgeführt werden. Für korrekte HTML-Anweisungen ersetze die Zeichenfolge '< ' durch '<'.

Während HTML dazu dient den Inhalt der Webseite zu strukturieren, und das Layout dem Browser überläßt, kann man mit CSS das Layout selbst einfach gestalten.

Inhalt:
1. Definition
2. color, background-...
3. font-...
4. text-...
5. link
6. class, id
7. div, span
8. margin, padding
9. border
10. width, height
11. float
12. position<
13. Layer
14: Validation

Cascading Style Sheets

Beispiel bestehend aus Selektor ( Eigenschaft : Wert ):
body {background-color: #FF0000;}
Die Angaben werden üblicherweise in einer eigene Datei mit Endung .css gespeichert, Im HTML-Dokument wird auf die .css-Datei verwiesen.
< html>
  < head>
    < title>Mein Dokument< /title>
    < link rel="stylesheet" type="text/css" href="style/style.css" />
  
  < body>
Die Datei style.css enthält die Definition:
body {
  background-color: #FF0000;
}

Farben und Hintergründe

h1 { color : green }

h2 {
  color: #990000;
  background-color: #FC9804;
}


body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
}

background-repeat: repeat-x Das Bild wird horizontal wiederholt
background-repeat: repeat-y Das Bild wird vertikal wiederholt
background-repeat: repeat Das Bild wird sowohl horizontal als auch vertikal wiederholt
background-repeat: no-repeat Das Bild wird nicht wiederholt

background-attachment: scroll Das Bild scrollt mit der Seite - nicht fixiert Beispiel anzeigen
background-attachment: fixed Das Bild ist fixiert

background-position: 2cm 2cm Das Bild befindet sich 2 cm vom linken und 2 cm vom oberen Rand der Seite entfernt
background-position: 50% 25% Das Bild ist zentriert und ein Viertel vom oberen Rand entfernt
background-position: top right Das ist ist in der oberen rechten Ecke der Seite positioniert

Kürzer als
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

geht es auch:

background: #FFCC66 url("butterfly.gif") no-repeat;

Reihenfolge: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Fonts

h1 {
  font-family: arial, verdana, sans-serif;
}
h2 {
  font-family: "Times New Roman", serif;
}
font-style: italic;
font-style: normal;
font-style: oblique;

font-variant: small-caps;
font-variant: normal;

font-weight: bold;
font-weight: normal;

font-size: 30px;
font-size: 120%;
font-size: 15em;
font-size: 30pt;

Kürzer als:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
ist:

p {
font: italic bold 30px arial, sans-serif;
}

Reihenfolge: [font-style] | [font-variant] | [font-weight] | [font-size] | [font-family]

Text

p {
  text-indent: 30px;
}
text-align: right;
text-align: left;
text-align: center;
text-align: justify;

text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

Laufweite: letter-spacing: 6px;

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: none;

Links

Pseudoklassen für Links sind visited, hover und active.
Hier sollte man nur vorsichtig ändern, um den Benutzer nicht zu verwirren.
a:link {
  color: blue;
}

a:visited {
  color: red;
}
Beispiel:

a:hover {
  text-transform: uppercase;
  font-weight:bold;
  color:blue;
  background-color:yellow;
}

im HTML:

Identifikation und Gruppierung von Elementen (class und id)

< p>Grapes for white wine:

< ul> < li>< a href="ri.htm" class="weisswein">Riesling< /a>< /li> < li>< a href="ch.htm" class="weisswein">Chardonnay< /a>< /li> < li>< a href="pb.htm" class="weisswein">Pinot Blanc< /a>< /li> < /ul> < p>Grapes for red wine:

< ul> < li>< a href="cs.htm" class="rotwein">Cabernet Sauvignon< /a>< /li> < li>< a href="me.htm" class="rotwein">Merlot< /a>< /li> < li>< a href="pn.htm" class="rotwein">Pinot Noir< /a>< /li> < /ul> im .css: a { color: blue; } a.weisswein { color: #FFBB00; } a.rotwein { color: #800000; } im HTML: < h1 id="k1">Kapitel 1 ... < h2 id="k1-1">Kapitel 1.1< /h2> ... < h2 id="k1-2">Kapitel 1.2< /h2> ... < h1 id="k2">Kapitel 2< /h1> ... < h2 id="k2-1">Kapitel 2.1< /h2> ... < h3 id="k2-1-2">Kapitel 2.1.2< /h3> ... im .CSS: #k1-2 { color: red; }

Gruppierung von Elementen (span und div)


im HTML:

< p>< span class="tugend">Edel< /span> sei der Mensch,
   < span class="tugend">hilfreich< /span> und < span class="tugend">gut< /span>.< /p>

im .css:

span.tugend {
  color:red;
}

im HTML:
< div id="spd">
  < ul>
    < li>Gerhard Schröder< /li>
    < li>Helmut Schmidt< /li>
    < li>Willy Brandt< /li>
  < /ul>
< /div>

< div id="cducsu">
  < ul>
    < li>Angela Merkel< /li>
    < li>Helmut Kohl< /li>
    < li>Kurt Georg Kiesinger< /li>
  < /ul>
< /div>

im .css:

#spd {
  background:red;
  color:white;
}

#cducsu {
  background:black;
  color:white;
}


Boxen: Außen- und Innenabstand (margin und padding)


body {
  margin-top: 100px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 70px;
}

kürzer:

body {
  margin: 100px 40px 10px 70px;
}

Innenabstand:

h1 {
  background: yellow;
  padding: 20px 20px 20px 80px;
}

h2 {
  background: orange;
  padding-left:120px;
}


Umrandung

h1 {
  border-width: thick;
  border-style: dotted;
  border-color: gold;
}

h2 {
  border-width: 20px;
  border-style: outset;
  border-color: red;
}

p {
  border-width: 1px;
  border-style: dashed;
  border-color: blue;
}

ul {
  border-width: thin;
  border-style: solid;
  border-color: orange;
}


h1 {
  border-top-width: thick;
  border-top-style: solid;
  border-top-color: red;

  border-bottom-width: thick;
  border-bottom-style: solid;
  border-bottom-color: blue;

  border-right-width: thick;
  border-right-style: solid;
  border-right-color: green;

  border-left-width: thick;
  border-left-style: solid;
  border-left-color: orange;
}


p {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
}

kürzer als:

p {
  border: 1px solid blue;
}


Breite und Höhe


div.box {
  width: 200px;
  border: 1px solid black;
  background: orange;
}

div.box {
  height: 500px;
  width: 200px;
  border: 1px solid black;
  background: orange;
}

Schwimmende Positionierung von Elementen (float)

im HTML:

< div id="picture">
  < img src="bill.jpg" alt="Bill Gates">
< /div>

< p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...< /p>

im .css:

#picture {
  float:left;
  width: 100px;
}

Spalten:

im HTML:
< div id="column1">
  < p>Haec disserens qua de re agatur
  et in quo causa consistat non videt...< /p>
< /div>

< div id="column2">
  < p>causas naturales et antecedentes,
  idciro etiam nostrarum voluntatum...< /p>
< /div>

< div id="column3">
  < p>nam nihil esset in nostra
  potestate si res ita se haberet...< /p>
< /div>


im .Css:


#column1 {
  float:left;
  width: 33%;
}

#column2 {
  float:left;
  width: 33%;
}

#column3 {
  float:left;
  width: 33%;
}


Positionierung

absolute Positionierung:

#box1 {
  position:absolute;
  top: 50px;
  left: 50px;
}

#box2 {
  position:absolute;
  top: 50px;
  right: 50px;
}

#box3 {
  position:absolute;
  bottom: 50px;
  right: 50px;
}

#box4 {
  position:absolute;
  bottom: 50px;
  left: 50px;
}


relative Positionierung:
#hund1 {
  position:relative;
  left: 350px;
  bottom: 150px;
}
#hund2 {
  position:relative;
  left: 150px;
  bottom: 500px;
}

#hund3 {
  position:relative;
  left: 50px;
  bottom: 700px;
}

Ebene auf Ebene mit z-Index ( Layer )

Bsp: übereinanderliegende Karten:


#karo_zehn {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}

#karo_bube {
  position: absolute;
  left: 115px;
  top: 115px;
  z-index: 2;
}

#karo_dame {
  position: absolute;
  left: 130px;
  top: 130px;
  z-index: 3;
}

#karo_koenig {
  position: absolute;
  left: 145px;
  top: 145px;
  z-index: 4;
}

#karo_ass {
  position: absolute;
  left: 160px;
  top: 160px;
  z-index: 5;
}

CSS überprüfen

über die Website: http://jigsaw.w3.org/css-validator/