border-width

Introduction to
Technologies
Stylesheets mit CSS
HTML-CSS
enthält den Inhalt
HTMLDatei
CSSDatei
*.html
*.css
Darstellung des
Seiteninhaltes
im erstellten Layout
Browser
enthält die Layoutangaben
ist austauschbar
Was CSS kann
Farben, Effekte, Schriften, Positionen
u.v.m. festlegen
‡ HTML-Elemente und selbst definierte
Elemente beschreiben
‡ HTML-Seiten für verschiedene Ausgabeund Anzeigegeräte optimieren
‡ Layoutinformationen zur Verfügung
stellen, ohne in HTML-Datei eingreifen zu
müssen
‡
Was CSS nicht kann
dynamische Webseiten erzeugen – wenn
Seite im Browser angezeigt wird, braucht
man ein Programm, um diese Darstellung
zu ändern
‡ automatische Auswahl des passenden
Stylesheets für Benutzergruppen
‡ es gibt alte Browser, die CSS nicht
darstellen können (IE 2, Netscape 3 ...)‫‏‬
‡
CSS - Regeln
‡
Regel: Selektor Eigenschaft Wert
h1 {
color:
red;
font-size:
large;
}
‡
Selektor gibt HTML-Elemente an, auf die sich die
Regel bezieht
Deklarationen beschreiben die Darstellung aller
Elemente, auf die sich der Selektor bezieht
‡
Deklaration
‡
‡
besteht aus zwei Teilen
Eigenschaft, die verändert werden soll
und Wert, den die Eigenschaft annehmen
soll
color: red;
‡
Eigenschaft color (Farbe) wird geändert,
neuer Wert ist red (rot)‫‏‬
CSS Beispiel
h1 {
color:
font-size:
}
‡
‡
red;
large;
h1 ist die Bezeichnung für eine Überschrift erster
Ordnung
Regel wird also auf alle derartigen Überschriften
angewendet
Hierarchie von HTML-Dokumenten
Vererbung: übergeordnete Elemente
können Eigenschaften an untergeordnete
Elemente weitergeben
‡ Wenn für untergeordnete Elemente
Eigenschaften nicht definiert wurden,
werden die Einstellungen der
übergeordneten Elemente verwendet
‡ manche Eigenschaften werden nicht
vererbt (z.B. width als Breitenangabe eines
Elementes)‫‏‬
‡
Verknüpfung von CSS und HTML
‡
‡
‡
CSS-Anweisungen im Kopf der HTML-Datei
<style type="text/css">
<!–
/* ... Hier werden die Formate definiert ... */
-->
CSS-Anweisungen innerhalb eines HTMLElementes
<h1 style="[element-spezifische Formate]">Das
style-Attribut</h1>
CSS-Anweisungen in einer separaten Datei
<link rel="stylesheet" type="text/css"
href="formate.css">
Beispiel HTML-Element formatieren
‡
<p style="background-color:#808040;
color:#D8FD02; font-family:'Century
Schoolbook',serif; font-size:2em;
letter-spacing:3px; padding:40px;
border:double #D8FD02 4px;"
title="Zitat von Francis Picabia">
Unser Kopf ist rund, damit das
Denken die Richtung wechseln kann!
</p>
Stylesheets für verschiedene Ausgabemedien
<link rel="stylesheet" media="screen"
href="website.css">
<link rel="stylesheet" media="print,
embossed" href="druck.css">
<link rel="stylesheet" media="aural"
href="speaker.css">
CSS anwenden
‡
Folgende Beispiele sind für CSS in separater
Datei
Rangfolge der Stylesheets:
‡
Benutzer-Stylesheet mit !important
Autoren-Stylesheet mit !important
Autoren-Stylesheet
Benutzer-Stylesheet
Browser-Stylesheet
Weiterhin wird nach Spezifität sortiert:
‡
direkt zugewiesene CSS-Deklarationen
ID-Attribute
Klassen
Elementtyp-Selektor
‡
ein oder mehrere HTML-Tags als
Selektoren
h1, h2, h3{
font-size : 18px;
text-transform : capitalize;
}
Universeller Selektor - CSS
‡
kein bestimmter Selektor angegeben,
Eigenschaft bezieht sich auf alle Elemente
der Seite
* {
color : red;
}
Klassen-Selektor
‡
‡
Stil für mehrere HTML-Elemente auf einmal
Name für Klasse beliebig wählen und Punkt davor
schreiben (ohne Leerzeichen)
.spezial {
font-family: Verdana, Arial,
Helvetica, sans-serif;
}
‡
Jedes HTML-Element kann dieser Regel
zugeordnet werden
Klassen-Selektor
‡
Einbindung in HTML
<p class= “spezial“> Ein Absatz mit Inhalt.</p>
<li class= “spezial“> Listenpunkt</li>
‡
stellt den Text „Ein Absatz mit Inhalt“ und
„Listenpunkt“ in einer serifenlosen Schrift
dar (wie im CSS beschrieben)
Klassen-Selektor
‡
Klasse für bestimmten Elementtyp
p.spezial{
font-family: Verdana, Arial,
Helvetica,
sans-serif;
}
‡
‡
HTML-Tag, dann Punkt, dann Name (ohne
Leerzeichen)‫‏‬
In HTML muss diesem Elementtyp dann extra die
Klasse spezial zugewiesen werden
ID-Selektor
‡
‡
‡
Stilregeln für ein einzelnes HTML-Element auf der
Seite festlegen
diese Regel überschreibt sämtliche andere
zentralen Regeln, die sonst gelten könnten
Schreibweise: Namen ausdenken und hinter #
schreiben
#einzigartig {
font-size : 10px;
}
ID-Selektor
‡
muss im HTML mit dem Namen
gekennzeichnet sein
<p id=“einzigartig”> Absatz mit kleiner
Schrift</p>
‡
ID-Regeln haben grundsätzlich Vorrang
gegenüber Klassenregeln
ID-Selektor
‡
HTML-Elemente können eine ID und eine
Klasse zugewiesen bekommen
<div id=“suchbox“ class=“seitenleiste“>
‡
alle Formatierungen der ID-Regel haben
Vorrang gegenüber den Angaben der
Klassenregel
Pseudo-Klassen in CSS2
:hover, Element, das gerade mit der Maus
überfahren wird
‡ :active, gerade angeklicktes Element
‡ :focus, Element, das den Fokus hat
‡ :link, Verweis zu noch nicht besuchter
Seite
‡ :visited, Verweis zu bereits besuchter
Seite
‡
Selektor für Nachfahren
außer HTML sind alle Elemente Nachfahren
von mindestens einem anderen Element
‡ Stilregeln sind möglich, die nur für
untergeordnete Elemente eines
bestimmten Elementes gelten
‡ z.B. Formatierungsanweisungen nur für
<li>-Elemente, die sich in der
Navigationsliste befinden
‡
Selektoren für Nachfahren
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
Selektoren
‡
Selektoren für direkt über- und untergeordnete
Elemente
div > p{
font-weight: bild;
}
‡
Selektoren für benachbarte Elemente
h1 + h2 {
margin-top: 11px;
}
Absolute Maßangaben
Inch in (2,54 cm)
‡ Zentimeter cm
‡ Millimeter mm
‡ Punkt pt (3,53 mm)
‡ Pica pc (12 Punkte, 42,33 mm)
‡ Pixel px (ein Punkt auf dem Bildschirm)
‡
Relative Maßangaben
‡
‡
‡
‡
‡
‡
Größenangabe bezüglich eines Ausgangswertes
Prozentuale Angaben
Verhältnis zur Höhe der Versalie M em
Verhältnis zur Höhe des Kleinbuchstaben x ex
Pixel-Angaben erzeugen ein stabiles
Größenverhältnis zwischen Text und Bildern,
auch bei unterschiedlicher Bildschirm-Auflösung
bei Schriftgröße sollte man möglichst auf genaue
Vorgaben verzichten
Box-Modell
Grundlage für Seitenaufbau
‡ Breite und Höhe von Elementen
‡ Innenabstände in alle vier Richtungen
(entspricht „Auffüllen“ im Dreamweaver)
‡
Box-Modell
‡
Außenabstände für alle vier
Richtungen
(entspricht „Rand“ im Dreamweaver)
Layout mit Stylesheets
‡
‡
‡
‡
‡
enthalten alle Layout-Informationen
mit Inhalts-Entwickler müssen alle Bestandteile
der Seiten abgesprochen sein
Namen für alle Teile vergeben
beim Entwickeln des Inhalts: alle Bestandteile
korrekt benennen
beim Entwickeln des Layouts: für alle
abgesprochenen Bestandteile das Layout
beschreiben
Vorüberlegungen
1.
2.
3.
Welchen Inhalt soll die Seite haben?
Wie soll die Struktur der Seite aufgebaut
sein?
Welche Layoutobjekte brauche ich dafür?
Schritt 1: Inhalt
Beispiel: Vortrag über Digitalkameras
‡ inhaltliche Schwerpunkte überlegen
‡ grobe Gliederung aufstellen
‡ Recherche
‡
Schritt 2: Struktur
Layout-Skizze oftmals als Ausgangspunkt
geeignet
‡ Bestandteile der Seite auflisten, wie Kopfoder Fußzeile, Navigationsbereich,
Textbereich, Spalten usw.
‡ inhaltliche Gliederung auf Seiten aufteilen
‡ Bezeichner für Navigationsleiste wählen,
evtl. Unterpunkte
‡
Schritt 3: Layoutobjekte
alles, was einzeln beschrieben werden soll,
muss ansprechbar sein – muss also einen
Namen haben
‡ Festlegen, was Layoutobjekte sein müssen
‡ Namen dafür überlegen
‡
Vorgehensweise
1.
2.
3.
4.
5.
6.
neue leere HTML-Datei erzeugen
erforderliche Layout-Objekte in die HTML-Datei
einfügen, dabei auf korrekte Bezeichnung
achten
Inhalte der ersten Seite einfügen
neue leere CSS-Datei erzeugen
für jedes Layout-Objekt ein Stylesheet in die
CSS-Datei einfügen und beschreiben
CSS-Datei in die HTML-Datei einbinden
Gestaltungsbeispiel
Wie ist die Seite aufgebaut?
‡ Aus welchen Elementen besteht sie?
‡ Wie erfolgt die Navigation?
‡ Wie wird der Inhalt dargestellt?
‡ Wie ist die Trennung zwischen Inhalt und
Form realisiert?
‡
Wie ist die Seite aufgebaut?
Navigationsbereich
Seiteninhalt
gestalterische Elemente
Aus welchen Elementen besteht sie?
div-Bereich id=navigation
div-Bereiche
id=navi
div-Bereich
id=lineo
div-Bereich
id=text
div-Bereich
id=pic
div-Bereich
id=lineu
Aus welchen Elementen besteht sie?
Navigationsbereich, der Bildbereiche
enthält
‡ sowohl Navigationsbereich insgesamt als
auch jeder Bildbereich kann angesprochen
werden
‡ Inhaltsbereiche unabhängig voneinander,
können nicht als Ganzes beschrieben
werden (wäre das nötig?)
‡
Wie erfolgt die Navigation?
Navigationsbereich eher untypisch für
Hypertextanwendung
‡ sequentielles Anzeigen der Seiten
‡ Benutzer kann nicht direkt eine bestimmte
Seite anschauen
‡ Ausnahme: Home-Link, der zur Startseite
verweist
‡
Wie wird der Inhalt dargestellt?
‡
‡
‡
‡
Verwendung von Bildern auch für Inhalt (Text)
problematisch, da dieser Text nicht gestaltet und
auch nicht automatisch ausgewertet werden kann
Bilder können für Neugestaltung nur
ausgetauscht oder neu positioniert werden
Inhalte müssen dem Gestalter bekannt und
zugänglich sein
bei Text-Darstellung kann unformatierter Text
erzeugt werden, der dann mit CSS gestaltet wird
Trennung Inhalt - Form
prinzipiell gegeben (siehe Problem der
Bilder)
‡ Änderung des Inhaltes erfordert keine
Änderung des Designs und umgekehrt
‡ Änderung der Form bzw. Beschreibung der
Form möglich ohne detaillierte Kenntnis
des Inhaltes
‡
Verknüpfung Inhalt-Form
Darstellung am Beispiel
‡ Darstellung ohne Stylesheet –
Standardannahmen werden verwendet
‡ für <div>-Bereiche: nur Beginn neuer
Zeile für neuen Bereich
‡ schrittweises Hinzufügen von DesignVorgaben
‡
Darstellung ohne CSS
CSS für Gestaltungsbeispiel
#navigation: Positionierung des
Navigationsbereiches auf der Seite
‡ Box-Modell: relative Positionierung,
Abstand von oben, von linkem Rand,
Breite und Höhe angeben
‡
#navigation {
position: relative;
left: 360px;
top: 30px;
width: 250px;
height: 160px;
}
mit Positionierung der Navigation
CSS für Gestaltungsbeispiel
‡
Darstellung der einzelnen
Navigationselemente nebeneinander
.navi {
display:inline;
}
Darstellung nebeneinander
CSS für Gestaltungsbeispiel
‡
Positionieren der div-Bereiche für die Linien
#lineu {
position: absolute;
left: 50px;
top: 550px;
}
#lineo {
position: absolute;
left: 50px;
top: 115px;
}
Linien positionieren
CSS für Gestaltungsbeispiel
‡
Text formatieren mit Schriftart, -farbe,
position
#text {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
font-variant: normal;
position: absolute;
left: 130px;
top: 150px;
}
Text formatiert
CSS für Gestaltungsbeispiel
‡
Bildbereich positionieren
#pic {
position: absolute;
left: 50px;
top: 200px;
}
Bild positioniert
Vorteil von CSS
alle Designinformationen in einer CSSDatei
‡ einfach austauschbar
‡ z.B. Darstellung der Navigation am
unteren statt am oberen Rand
‡
#navigation {
position: relative;
left: 360px;
top: 550px;
width: 250px;
height: 160px;
}
Beispiel: geänderte CSS-Datei
Schriftgebung
‡
‡
‡
‡
‡
‡
‡
‡
‡
‡
font: Zusammenfassung aller font-bezogenen Tags
(shorthand)
font-family: Bestimmt die Schriftart
font-size: Bestimmt die Schriftgröße
font-style: Bestimmt den Schriftstil (kursiv...)
font-weight: Bestimmt die Schriftdicke
letter-spacing: Verändert den Abstand der Buchstaben
zueinander
line-height: Bestimmt die Höhe der Zeile
text-align: Bestimmmt die Ausrichtung des Textes
text-decoration: Unterstreicht den Text
text-indent: Rückt die erste Zeile eines Abschnitts ein
Farben/Hintergrund
‡
‡
‡
‡
‡
‡
‡
color: Bestimmt die Vordergrundfarbe
background: Fasst alle Hintergrund-Deklarationen
zusammen (shorthand)
background-color: Weist dem Hintergrund eine Farbe zu
background-image: Weist dem Hintergrund ein Bild zu
background-attachment: Legt fest ob das
Hintergrundbild mitscrollt oder nicht
background-repeat: Legt fest ob und wie das
Hintergrundbild wiederholt wird
background-position: Positioniert das Hintergrundbild
Ausrichtung/Layout/Darstellung
‡
‡
‡
‡
‡
‡
‡
‡
clear: verhindert float
display: Verändert die Darstellungsart eines Elements
(nicht anzeigen, inline oder block...)
float: Lässt Elemente aneinander vorbeifließen
height: Definiert die Höhe eines Elements
width: Definiert die Breite eines Elements
margin: Verändert den Abstand des Elements zur
Umgebung (shorthand)
margin-bottom: Verändert den Abstand des Elements
nach unten
margin-left: Verändert den Abstand des Elements nach
links
Ausrichtung/Layout/Darstellung
‡
‡
‡
‡
‡
‡
‡
margin-right: Verändert den Abstand des Elements nach
rechts
margin-top: Veränderte den Abstand des Elements nach
oben
padding: Abstand des Inhalts zum Rand (shorthand)
padding-bottom: Abstand des Inhalts zum unteren Rand
padding-right: Abstand des Inhalts zum rechten Rand
padding-top: Abstand des Inhalts zum oberen Rand
padding-left: Abstand des Inhalts zum linken Rand
Links/Auflistungen
‡
‡
‡
‡
‡
‡
a:link: Bestimmt die Formatierung eines normalen Links
a:visited: Bestimmt die Formatierung eines besuchten
Links
a:active: Bestimmt die Formatierung eines aktiven Links
a:hover: Bestimmt die Formatierung eines gehoverten
Links (Maus ist grade drüber)
list-style-image: Weist den Listenpunkten ein Bild zu
list-style-type: Bestimmt das Aussehen der Listenpunkte
Rahmen
‡
‡
‡
‡
‡
‡
border: Fasst alle Rahmen-Tags zusammen (shorthand)
border-bottom: Bestimmt Aussehen, Dicke und Farbe
des unteren Rands
border-bottom-width: Bestimmt die Breite des unteren
Rands
border-color: Farbe des Rahmens
border-left: Bestimmt Aussehen, Dicke und Farbe des
linken Rands
border-left-width: Bestimmt die Breite des linken Rands
Rahmen
‡
‡
‡
‡
‡
‡
border-right: Bestimmt Aussehen, Dicke und Farbe des
rechten Rands
border-right-width: Bestimmt die Breite des rechten
Rands
border-style: Bestimmt die Darstellungsweise des
Rahmens
border-top: Bestimmt Aussehen, Dicke und Farbe des
oberen Rands
border-top-width: Bestimmt die Breite des oberen
Rands
border-width: Bestimmt die Rahmenbreite für alle
Rahmen