CSS-Gestaltung durch
Farbe & Schrifttypen,
Hintergrund u.ä.
Selektieren nach Ids
#roter-absatz {color: red; }
<p id="roter-absatz">Dieser Absatz ist rot </p>
CSS: Ids → #....
Html: id=“...“
Selektieren nach Klassen
.
roter-absatz {color: red; } <p class="roter-absatz">Dieser Absatz ist rot
</p>
CSS: Klasse → . xxx beginnt mit einem Punkt
Html: <p class=“roter-absatz“> ROT </p>
Background
Eigenschaften:
● background-color → Hintergrundfarbe
● background-image → Bild
● background-repeat → Repeat (default); no repeat; repeat-x (horizontal); repeat-y (vertikal)
● background-attachment → bewegt sich das Bild mit dem Scrollen
● background-position → wo fängt das Bild an.
Beispiel
body {
background-image: url("../images/kuh2.jpg");
background-repeat: no-repeat;
---> es wird nur einmal angezeigt background-position: right top;
background-attachment: fixed;
--->Was passiert beim scrollen des Bildes }
Vertikale Navigation
können mit Aufzählungslisten gestaltet werden:
ul {
list-style-type: none; ----> hier keine 'Bullets' margin: 0; ---> Abstand oberhalb der Leiste padding: 0; ----> Abstand von links
overflow: hidden; ----> nach der Leiste erfolgt ein Zeilenumbruch } li { float: left; } ----> Ausrichtung der Leiste (nicht Text!!!)
a { display: block; ---> Punkte werden als Block und nicht nur als einzelner Text dargestellt
text-align: center;
width: 60px; height: 50px; ---> Weite/Höhe des Blocks background-color: #dddddd;} ----> alternativ Bild möglich
Navigation - Html
<ul>
<li><a href=" <link> ">Home</a></li>
<li><a href="<link> ">... </a></li>
</ul>
----> CSS sorgt dafür, dass die Punkte vertikal angeordnet werden.
http://www.w3schools.com/css/css_navbar.asp
Bild- Gallerie - CSS
div.img {---> allgemeine Beschreibung margin: 5px; ---> Abstand der Box
padding: 5px; ----> Größe des Randes
border: 3px solid #0000ff; ----> Umrandung d. Bildes height: 350; width: 350; ---> Höhe/Weite inkl. Box float: left; text-align: center; }
div.desc {---> Informationen zum Bild
text-align: center; font-weight: normal;
width: 120px; margin: 5px;}
Boxen und Klassen
div{ background-color: lightgrey; width: 300px; padding: 25px;
margin: 25px;} ----> Es wird ein Bereich definiert.
div.grueneBox {
border: 25px solid green;} ----> innerhalb dieses Bereichs wird eine Klasse definiert. Sie erbt alle Eigenschaften von DIV.
div.blaueBox {
border: 25px solid navy;}
http://www.w3schools.com/css/css_boxmodel.asp
<h2>Boxen & Klassen</h2> Html
<div class=blaueBox> Die blaue Box erbt die Eigenschaften des Bereichs. </div>
<div class=grueneBox> Hier ist es genauso, nur grün!!!!
</div>
Bild-Gallerie - Html
<div class="img"> ----> Klasse = img
<a ><img src="../images/kuh4.jpg" alt="Kuh Nr. 4“
width="110" height="90"></a>
<div class="desc">----> Klasse innerhalb des Bereichs Text/Informationen zum Bild</div></div> … weitere Bilder
<div class="img"> <a ><img src="../images/kuh3.jpg"
alt="Kuh Nr. 3“ width="110" height="90"></a>
<div class="desc">Beschreibung Kuh 4</div></div>
http://www.w3schools.com/css/css_image_gallery.asp
http://www.w3schools.com/cssref/default.asp
