HTML/CSS
Ralf Herbst
CSS - Cascading Style Sheet
ist eine textbasierte Gestaltungssprache für die Formatierung strukturierter Dokument. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit HTML eingesetzt werden.
CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, dann werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separarten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (zB. Layout, Farben und Typografie). Mit CSS-Anweisungen können für jedes Element konkrete Werte für bestimmte Darstellungsattribute festgelegt werden. Mit CSS kann man für verschiedene Ausgabemedien (Bildschirm, Papier usw.) verschiedene Darstellungen vorgeben. CSS gilt als Standard-Stylesheetsprache für Websites. Früher übliche HTLM-Elemente wie front oder center gelten als veraltet. So werden Font-Tags bereits nicht mehr zu HTML 5 gehören.
CSS Einbindung
Indirektes <--> externes CSS
im HTML-Editor unter Ordner sites:
11.css_intern_grundlagen.html
/*Ich bin ein CSS Kommentar*/
<style>
<style type="text/css">
body { (Klammer: Alt Gr +Zahl 7) = ein Selektor und steuert den HTML-Body an
/*Attribut/Eigenschaft: Wert*/
font-family: Arial, Helvetia; = Schriftart
font-size: 20pt; = Schriftgröße
color: red; = Schriftfarbe
background-color: #FEECC4; = Hintergrundfarbe
}
h1 {
border: solid 3px #F00; (solid = durchgängig, dottet = gepunktet)
oder border-bottom: solid 3px #F00 = Rahmen/Linie nur unten
width: 424px; = Höhe des Rahmens
line-height: 22pt; = Höhe des Abstandes
}
= dies kann ich durch alle Überschriften einzeln festlegen
p {
= Wichtig für Gestaltung CSS, padding schafft Raum um das Element und VERGRÖSSERT ihn!
padding: 30px; = ein Wert bedeutet alle Seiten gleich
padding: 30px 50px; = zwei Werte bedeuten 30 px oben, unten und 50px rechts, links gleich
padding 20px, 30px, 40px, 50px; = Wert der Reihenfolgen: oben - rechts - unten - links (vergleichbar Ziffernblatt)
margin: 25px 30px; = Außenabstand von einem Element, Wert der Reihenfolge wie bei padding!
}
ul { = Listen versetzen
margin-left: 60px; auch möglich -60px;
-Bereich, dh. von rechts nach links
+Bereich, dh. von rechts nach links
font-Style: italic; = kursive Schrift
line-height: 25pt; = Zeilenabstand
list-style-type: decimal-leading-zero; = Listentyp
}
a { = Link setzen:
<a href="http://www.css4you.de/" target="_blank">CSS for you</a>
font-weight: bold; = Wichtung der Schrift, normal oder bold (fett)
padding-bottom: 100px;
text-decoration: none; = entfernt die Unterstreichung des Links
}
a:hover { = Mauszustand, drüberfahren mit Maus übern Link
text-decoration: underline; = fügt die Unterstreichung beim Link hinzu
}
12.css_extern.html anlegen
Vorlage abspeichern und Link einfügen (von linker Spalte anklicken und reinziehen)
<link rel="stylesheet" href="../css/style.css" type="text/css">
link rel= Linkart, href = Linkpfad, type = Medientyp
13.css_inline.html anlegen (gleiche Datei wie 12.css_extern.html)
<h2 style="color:red;"> = nur diese Überschrift in rot
<p style="font-style:italic"> = dieser Absatz kursiv setzen
dh. inline = CSS am Element direkt Befehle mit style eingeben!
Externes CSS
( = sozusagen die Fernsteuerung/Fernbedienung für die Seiten)
im Ordner CSS:
neue Datei mit Dateiname: style anlegen, Erweiterungen: .css,
Ordner: CSS übernehmen, speichern
style.css
h1, h2, h3, h4 { } = mehrere Selektoren, die die gleichen Attribute ausführen sollen, zB. Überschriften, Komma bedeutet gleich Plus (+)
Trick bei Link:
a { outline: transparent; } = macht gepunkteten Rahmen weg
CSS für Dich (Link setzen)
Add-Ons Measureit herunterladen
Add-Ons ColorZilla herunterladen
EMPFEHLUNGEN:
Adobe Dreamweaver
Keine Kommentare:
Kommentar veröffentlichen