1. Cascading Stylesheets (CSS) zur Festlegung von Stil
Werbung
1. Cascading Stylesheets (CSS) zur Festlegung von Stil-Formatvorgaben (Layout)
1.1.
Einleitung
Es gibt mehrere Sprachen zum Definieren von Stylesheets. CSS ist nur eine davon und ist
speziell als Ergänzung für HTML geschaffen und optimiert worden. CSS benutzen zur
Darstellung von HTML-Seiten frei definierbare Formatvorlagen.
Leider führen die Schriftgrößenangaben in CSS am Bildschirm nicht zu einheitlichen
Ergebnissen. Während im Print-Bereich eine 10-Punkt-Schrift immer gleich groß ist, weil so
definiert ist, wie groß ein Punkt ist, werden solche Angaben am Bildschirm in Pixel
umgerechnet. Dabei ist aber wiederum nicht festgelegt, wie groß ein Pixel ist. Und nicht mal
die Umrechnungsfaktoren sind die gleichen. So rechnet etwa Windows Schriftgrößenangaben
anders in Pixel um als etwa grafische Oberflächen unter Linux oder als das MacintoshBetriebssystem.
CSS-Eigenschaften (Level 2.1)
Mit den folgenden CSS-Eigenschaften können Sie die HTML-Elemente nach Wunsch
formatieren:
• Schriftformatierung (Schriftarten, Schriftgrößen, Schriftfarben, Schriftgewicht (Stärke),
•
•
•
•
•
•
•
•
•
•
•
•
•
Zeichen- und Wortabständen)
Schriftformatierung mit Schriftartendatei (freie Definition der Schriftart)
Ausrichtung und Absatzkontrolle
Außenrand (Abstand zwischen Rand und Element) u. Abstand (Abstand zwischen Elemente)
Innenabstand (Rand zwischen Text des Elementes und Rand des Elementes)
Rahmen
Hintergrundfarben und –bilder
Listenformatierung
Tabellenformatierung
Positionierung und Anzeige von Elementen
Layouts für Printmedien (Definition von Drucklayouts)
Sound-Kontrolle für Sprachausgabe
Anzeigefenster (Aussehen Mauszeiger, Scroll-Leistenaussehen)
Filter (nur Microsoft, Grafik-Effekte wie Schatten, Transparenz, Foto-Negativ-Effekt)
Vorteile der Stylesheets (Stil-Formatvorlagen)
• Bessere Kontrolle über Layouts, Schriftarten, Farben, Hintergrundfarben.
• Eine zentrale Formatvorlage für mehrere Web-Seiten
• Erscheinungsbild der Web-Seiten ist gleich bleibend
• Formatierung benötigt weniger Speicherplatz, damit Web-Seite schneller aufrufbar.
• Trennung von Layout und Inhalt
• Separate Formatvorlage für Bildschirm- und Druckausgabe
Möglichkeiten der Einbindung von CSS Stylesheets in HTML
• CSS-Formate innerhalb eines HTML-Elements definieren (style =“...“)
• CSS-Formate im Kopf des HTML-Dokuments definieren (style type=“text/css“)
• CSS-Formate in einer separaten Datei definieren (<link ... />)
• CSS-Formate aus einer Datei importieren (@import ...)
• CSS-Formate für einen bestimmten Abschnitt (<span style =“...“)
1.2.
Stylesheets im Dokumentkopf festlegen
Übung zunächst ohne Stylesheets
Erstellen Sie das folgende HTML-Dokument mit dem Editor. Löschen Sie die Meta-Zeilen
und speichern Sie das Dokument unter Ohne_Stylesheet.HTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>Ohne Stylesheet</title>
</head>
<body>
<h1>Stylesheets: Fast alles ist möglich</h1>
<p>Erfreuen Sie sich an den Möglichkeiten.</p>
</body>
</html>
Übung mit Stylesheets
⇒ Speichern Sie das vorherige HTML-Dokument erneut unter Stylesheet_Head.
Grundgerüst zum Definieren von Stylesheets einfügen:
⇒ Fügen Sie eine Leerzeile nach Titelzeile im Head-Bereich ein.
⇒ Wählen Sie im Menü Format / Style Sheets (CSS) / Style Definition
Befehl für Stylesheets
<style type="text/css">
<!--
Festlegung der Definitionssprache CSS
-->
</style>
Kommentarzeilen sind notwendig wegen
älteren Browsern, die CSS nicht verstehen.
Style-Element h1 im Dokumentkopf definieren und einfügen
⇒ Leerzeile zwischen den Kommentarzeilen anklicken.
⇒ Wählen Sie Format / Style Sheets (CSS) / Style Element definieren
⇒ Stylename h1 / Schriftart Courier / Schriftgröße beliebig wählen / Schriftfarbe Farbe
grün / Einfügen
⇒ Schriftgröße im Quellcode gemäß Lösung auf 20pt ändern.
⇒ Vorschau mit F9
h1 { font-family: Courier;
font-size: 20pt;
color: #00FF00;}
Style-Element p im Dokumentkopf definieren und einfügen
⇒ Eine Leerzeile nach der geschweiften Klammer } einfügen, die zum Style-Element h1
gehört.
⇒ Wählen Sie Format / Style Sheets (CSS) / Style Element definieren
⇒
⇒
⇒
⇒
Stylename p / Schriftart Comic Sans MS / Schriftfarbe Hintergrund gelb / Einfügen
Attribut text-indent:1cm vor der geschweiften Klammer } eingeben
Speichern Sie die Datei erneut
Vorschau mit F9
p { font-family: Comic Sans MS;
background-color: #FFFF00;
text-indent:1cm;}
Erläuterung:
Mit dem Attribut text-indent können Sie eine Einrückung (hier 1 cm nach rechts) für die erste
Zeile im Absatz bestimmen . Attribut background-color erzeugt nur für die Zeilen im Absatz
p die Hintergrundfarbe (hier:gelb).
Lösung:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>Stylesheets im Dokumentenkopf</title>
<style type="text/css">
<!-h1 { font-family: Courier;
font-size: 20pt;
color: #00FF00;}
p { font-family: Comic Sans MS;
background-color: #FFFF00;
text-indent:1cm;}
-->
</style>
</head>
<body >
<h1>Stylesheets: Fast alles ist möglich</h1>
<p>Erfreuen Sie sich an den Möglichkeiten.</p>
</body>
</html>
Allgemeiner Aufbau einer Stylesheet-Definition im HEAD-Bereich
Selektor { Attribut1: Wert;
Attribut2: Wert;
Attribut3:Wert;...}
Achtung:
Die im Dokumentenkopf definierten Stylesheets im obigen Beispiel gelten für alle
HTML-Elemente p und h1 und zwar nur für diese eine HTML-Datei!
1.3.
Stylesheet aus einer externen CSS-Datei laden
CSS-Datei mit Formatdefinitionen erstellen
Die CSS-Datei ist eine reine Textdatei, die mit jedem Texteditor erstellt und bearbeitet werden
kann. Sie darf keine HTML-Befehle enthalten und ist unter der Dateiendung .txt oder .css zu
speichern.. Am bequemsten geht die Erstellung dieser Datei mit dem HTML-Editor, weil dort
die CSS-Style-Elemente definiert und eingefügt werden können.
Übung: Erstellen einer CSS-Datei
⇒ Wählen Sie Datei / Alle Dateien schließen.
⇒ Wählen Sie Datei / Neues HTML Dokument
⇒ Löschen Sie alle Zeilen.
⇒ Wählen Sie im Menü Format / CSS /Style Elemente definieren zuerst für h1, danach für p.
⇒ Passen Sie die Ihre Formatdefinitionen an.
h1 { font-family:Verdana;
font-size:20pt;
color:red;}
p { font-family:Arial,Verdana;
color:white;
background-color:gray; }
⇒ Speichern Sie unter dem Namen layout.css (Dateityp css wählen!)
⇒ Schließen Sie die Datei
CSS-Datei in das HTML-Dokument im Dokumentkopf einbinden
⇒ Öffnen Sie im HTML-Editor das HTML-Dokument Stylesheet_Head.HTML
⇒ Ändern Sie den Titel auf “Externe Stylesheets laden“
⇒ Löschen Sie alle Zeilen mit den Befehlen für Stylesheetdefinitionen im Head-Bereich.
⇒ Geben Sie folgende Zeile im Head-Bereich ein:
<link type=“text/css“ rel=“stylesheet“ href=“layout.css” />
Beachte: Nach XHTML-Standard muss der Endtag einen Schrägstrich haben!
Link verweist auf eine externe Datei, type gibt an, dass es sich um Stylesheets handelt.
stellt den Bezug zu einer Datei mit Style-Definitionen dar. Das Attribut href dient zur
Bestimmung der Datei, die eingebunden werden soll.
⇒ Speichern Sie das Dokument unter Stylesheet_Extern.HTML (als Dateityp .HTML !!) im
gleichen Verzeichnis wie die Datei layout.css und testen Sie.
rel
Lösung:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>Externe Stylesheets laden</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<h1>Stylesheets: Fast alles ist möglich</h1>
<p>Erfreuen Sie sich an den Möglichkeiten.</p>
</body>
</html>
Vorteil der externen CSS-Datei: Die erstellte Formatdatei layout.css können Sie auch in
anderen HTML-Dateien einbinden.
1.4.
Stylesheet-Datei layout.css importieren über die CSS-Syntax
Die Funktion @import url(CSS-Dateiname) lädt die CSS-Datei zur Formatierung der
Web-Seite.
Übung:
⇒ Öffnen Sie im HTML-Editor das HTML-Dokument Stylesheet_Head.HTML
⇒ Löschen Sie die Stylesheet-Elemente h1 und p
⇒ Fügen Sie die unten angegebene Funktion ein.
⇒ Speichern Sie unter Stylesheet_Import und testen Sie die Ausgabe.
<style type="text/css">
<!-@import url(layout.css);
-->
</style>
1.5.
Achtung: Wegen älteren Browsern und aus
Kompatibilitätsgründen ist der Befehl <link ...>
vorzuziehen.
Strichpunkt ist notwendig!
Stylesheet-Definitionen für HTML-Elemente im Body-Bereich
(Nicht zu empfehlen, da Inhalt und Layout nicht getrennt werden!)
Formatierungsbeispiel mit Stylesheet formuliert für den Absatz
Eingabehilfsmittel: Format / CSS / Style Element definieren / Stylename=p / Größe und
Farben wählen /Einfügen / danach Sheet der folgenden Schreibweise anpassen.
Im HTML-Editor Phase 5 gibt es leider keine benutzerfreundliche Bedienung. Deshalb
ist es sinnvoller, Stylesheets nur im Head-Bereich oder in externer CSS-Datei zu
definieren.
<p style=”font-family:Courier;Verdana,Arial; color:blue; font-size:12pt”> Text </p>
Nachteil:
Jedes einzelne Element einer Web-Seite muss mit Stylesheet formatiert werden, wenn dies
gewünscht wird, sonst werden die Elemente mit Standardattributen des Browsers dargestellt.
Lösungsbeispiel zum Testen:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>Stylesheets für Elemente h1 und p festlegen</title>
</head>
<body>
<h1 style="font-family: Courier; font-size: 20pt; color: #00FF00">
Stylesheets: Fast alles ist möglich </h1>
<p style="font-family: Comic Sans MS; background: #FFFF00; text-indent:1cm">
Erfreuen Sie sich an den Möglichkeiten.</p>
</body>
</html>
Übung: Befehl <pre> ... </pre>, Linie und Rahmen
⇒ Kopieren Sie die Datei “Der Zauberlehrling.doc“ vom Tauschordner in Ihren
Arbeitsordner und öffnen Sie diese Datei.
⇒ Erstellen Sie in Ihrem HTML-Editor ein neues HTML-Dokument
⇒ Markieren Sie in Word den Quellcode. Kopieren Sie den Quellcode und fügen Sie ihn
vollständig in den Body-Bereich Ihres HTML-Dokumentes ein.
⇒ Markieren Sie in HTML-Editor den kopierten Quellcode und wählen Sie pre. Um Absätze
und Zeilenumbrüche genau wie im Word-Dokument im Browser darzustellen, verwendet
man den folgenden HTML-Befehl für Textabschnitt mit präformatiertem
(vorformatiertem) Text:
<pre> Hier steht der Text </pre>
Alles, was dazwischen steht, wird so angezeigt, wie es dazwischen eingegeben wurde, und
zwar in dicktengleicher Schrift. Bei einer dicktengleichen Schrift wie der Courier haben alle Buchstaben
die gleiche Breite, das schmale i nimmt also genau so viel Platz ein, wie das breite m. Die
Zeichenzwischenräume wirken deshalb unruhig.
Präformatierten Text formatieren mit Stylesheet
Ergänzen Sie das einleitende <pre> wie folgt:.
<pre style="background-color:#000099; color:#FFFF00; font-family:Fixedsys,
Courier; padding:10px;"> Hier steht das Gedicht "Der Zauberlehrling" </pre>
Padding bestimmt einen einheitlichen Innenabstand zwischen Elementinhalt und den vier
Elementgrenzen oben, links, unten und rechts.
Am Ende des Textes ist eine Trennlinie mit Steylesheet zu erstellen. Das Einfügen
„Horizontale Leiste“ über den Phase 5 -Editor erzeugt leider eine nicht mehr zeitgemäße
Schreibweise für den HTML-Tag <hr>. Die Attribute in dieser Schreibweise sollen künftig
aus dem HTML-Standard entfallen. Empfohlen wird die Gestaltung von Trennlinien nur noch
mit CSS.
Trennlinie als Rahmen mit Stylesheet-Beispiel
<hr style="width:175%; color:red; height:5px; text-align:left; border:1px solid blue;" />
Das hr-Element erhält im Beispiel eine Breite von 175%, eine Höhe von 5 Pixeln, wird linksbündig
ausgerichtet, wird in roter Farbe dargestellt und erhält noch einen dünnen blauen Rahmen mit 1 Pixel.
Beachte: Wegen dem XHMTL-Standard ist beim Endtag ein Schrägstrich einzufügen!
1.6.
Stylesheet für einzelne Wörter und Teile innerhalb eines Elementes
<span> style=“Angabe der CSS-Attribute
“
Wort oder Textteil
</span>
Übung:
Geben Sie ganz unten nach der Trennlinie in einem neuen Absatz das Copyright-Zeichen ,
Ihren Namen und das Datum ein, wie z.B. © Otto Müller, 02. Oktober 2009.
⇒ Wählen Sie Einfügen / Sonderzeichen ©
⇒ Markieren Sie die ganze Zeile und wählen Sie Format / Absatz
⇒ Markieren Sie die das Copyright-Zeichen und wählen Sie Format / Span und geben Sie
dann für Schriftart:Arial und Schriftgröße:20 wie in der folgenden Zeile ein.
<p><span style="font-family:arial;font-size:20">&copy</span> Otto Müller, 02. Oktober 2009</p>
1.7.
Rahmen mit Stylesheet
Übung:
Erstellen Sie die 5 Rahmen mit Stylesheet mit Ihrem Editor gemäß folgender Ausgabe im
Browser. Auf der nächsten Seite sind die Rahmenattribute beschrieben.
STYLESHEET-ATTRIBUTE für RAHMEN
Eigenschaft
Beispiel + zulässige Werte
Bedeutung
Abstand
margin-top:2cm
margin-right:20%
margin-bottom:3em
margin-left:20px
Abstand von oben: 2 cm
Abstand des rechten Randes 20 % vom Element
Abstand vom unteren Rand 3-mal Zeichen m
Abstand vom linken Rand: 20 Pixel
Rahmenabstand
padding-top:7px
Abstand 7 Pixel vom oberen Rand (z.B.
Textrahmen)
Abstand 2 em vom rechten Rand (z.B.
Textrahmen)
Abstand 10 % vom unteren Rand (z.B.
Textrahmen)
Abstand 3 Pixel vom linken Rand (z.B.
Textrahmen)
padding-right:2em
padding-bottom:10%
padding-left:3px
border-top-width:thin
Linienstärke des oberen Randes: dünn
border-top-width:medium
border-top-width:thick
border-top-width:20px
border-top-width:none
Linienstärke des oberen Randes: mittel
Linienstärke des oberen Randes: dick
Linienstärke des oberen Randes: 20 Pixel
keine Linien
border-right-width: siehe oben
border-bottom-width: siehe oben
border-left-width: siehe oben
Linienstärke des rechten Randes
Linienstärke des unteren Randes
Linienstärke des linken Randes
border-width:thin
Linienstärke aller Ränder: dünn
Linienfarbe
border-color:black
border-color:#000000
schwarze Rahmenfarbe
schwarze Rahmenfarbe
Rahmenstil
border-style:none
border-style:dotted
border-style:dashed
border-style:solid
border-style:double
border-style:groove
border-style:ridge
border-style:inset
border-style:outset
kein Rahmen
Gepunktet
Gestrichelt
Durchgezogen
doppelte Linie
3D-Rahmen mit Farbe des color-Wertes
3D-Rahmen mit Farbe des color-Wertes
3D-Innenrahmen mit Farbe des color-Wertes
3D-Außenrahmen mit Farbe des color-Wertes
Textfluss
clear:none
clear:left
clear:right
clear:both
Text umfließt alle Seiten des Elementes.
kein Text an der linken Seite des Elementes
kein Text an der rechten Seite des Elementes
kein Text an der unteren Seite des Elementes
Kurzform von
Rahmen
border: 2px solid blue
Reihenfolge der Angabe: Rahmenbreite,
Rahmenstil, Rahmenfarbe
Liniendicke des
Rahmens
Lösung Übung Rahmen: CSS definiert im Bodybereich
Diese Lösung ist zu vermeiden, da Layout und Inhalt nicht getrennt werden.
Datei: RahmenCSSbody.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>Übung Rahmen</title>
</head>
<body >
<p style="border-color:#FFFF00; border-width:2px; border-style:dashed;
padding:4px">
Ich bin ein gestrichelter Rahmen mit der einheitlichen Farbe gelb und bin 2 Pixel dick. Mein Text hat
überall den gleichen Abstand 4 Pixel vom Rahmen.
</p>
<p style="border-top-color:#FF00FF; border-left-color:#00FF00; border-rightcolor:#3333FF; border-bottom-color:#FFFF00; border-width:4px; border-style:solid;
padding:12px">
Ich bin ein durchgezogener und sehr bunter Rahmen und bin 4 Pixel dick. Die obere Seite ist
lila, die linke Seite ist grün, die rechte Seite ist blau und die unter Seite ist gelb. Mein Text hat
überall den gleichen Abstand 12 Pixel vom Rahmen
</p>
<p style="border-color:cyan yellow; border-width:8px; border-style:dotted;
padding:30px">
Ich bin ein gepunkteter und bunter Rahmen und bin 8 Pixel dick. Die obere und untere Seite ist cyan,
die linke und rechte Seite ist gelb. Mein Text hat überall den gleichen Abstand 30 Pixel vom
Rahmen.
</p>
<p style="border-color: red yellow; border-width:8px; border-style: double;
padding:20px">
Ich bin ein bunter Rahmen mit doppelter Linie und bin 8 Pixel dick. Die obere und untere Seite ist
cyan, die linke und rechte Seite ist gelb. Mein Text hat überall den gleichen Abstand 20 Pixel vom
Rahmen.
</p>
<p style="border-width:12px; border-color: red; border-style: ridge;padding:5px;">
Ich bin ein 3D-Rahmen mit der Rahmendicke 12px, Farbe rot und Typ ridge.</p>
</body>
</html>
1.8.
Formate für Klassen von Stylesheets definieren
Es gibt zwei Möglichkeiten, Klassen für HTML-Elemente zu definieren: entweder für einen bestimmten HTMLElementtyp oder für keinen bestimmten. Die Klassennamen können frei vergeben werden, dürfen aber keine
Umlaute und keine Leerzeichen enthalten.
• Beispiel: Klassendefinitionen für bestimmte HTML-Elemente
Dateiname: Stylesheet_Klasse_bestimmteElemente.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>StylesheetKlassen für bestimmte Elemente</title>
<style type="text/css">
<!--
body.gruen {background: #80FF80;}
h2.blau {color: blue;}
p.rot {color: red;}
-->
</style>
</head>
<body class="gruen">Hintergrund grün
<h2 class="blau">Überschrift Schriftfarbe blau</h2>
<p class="rot">Absatz Textfarbe rot</p>
</body>
</html>
Selektor body Klasse gruen
Selektor h2 Klasse blau
Selektor p Klasse rot
Allgemeine Definition von Klassen für bestimme HTML-Elemente im Stylesheet-Grundgerüst
Selektor.Klasse {Attribut1:Wert1;
Attribut2:Wert2;
Attribut2:Wert2;
........................;}
•
Beispiel: Klassendefinitionen für unbestimmte HTML-Elemente
Dateiname: Stylesheet_Klasse_unbestimmteElemente.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>StylesheetKlassen für unbestimmte Elemente</title>
<style type="text/css">
<!-Klasse rot als Beispiel kann
.gelb {background: yellow;}
für verschiedene HTML.blau {color: blue;}
Elemente verwendet werden.
*.rot {color: red;}
.weiss{background: white;}
* vor Punkt kann, muss aber
Allgemeine
--> Definition von Klassen für unbestimmte HTML-Elemente im Stylesheetnicht angegeben werden.
Grundgerüst
</style> im Head-Bereich
</head>
<body class="gelb">
.Klasse
Attribut2:Wert2;...;}
<h1{Attribut1:Wert1;
class="rot">Überschrift1
Schriftfarbe rot</h1>
<h2 class="blau">Überschrift2 Schriftfarbe blau</h2>
<!--Absatz Hintergrund nur weiss, wenn Text vorhanden -->
Übung: <p class="rot"><span class="weiss">Textfarbe rot</span></p>
<!--Absatz Hintergrund weiss, auch wenn kein Text vorhanden-->
<!--Voraussetzung: mindestens 1 Zeichen -->
<p class="weiss"><span class="rot">R</span></p>
</body>
</html>
Übung:
Kopieren Sie vom Tauschordner die beiden Dateien stylesheet_Klasse_bestimmteElemente.html und
stylesheet_Klasse_unbestimmteElemente.html in Ihren Arbeitsordner und testen Sie, indem Sie im Head-Bereich
bei den Klassendefinitionen die Farben und Klassennamen ändern und unten im Body-Bereich anpassen und
variieren.
Übungsaufgabe Rahmen mit Klassen:
Lösen Sie Übungsaufgabe aus 15.7 indem Sie die CSS extern definieren.
Übungsaufgabe "Der Zauberlehrling" mit Klassen:
Laden Sie vom Internet "Der Zauberlehrling" in Ihren Editor, und bilden Sie extern für jede Strophe eine CSSKlasse für den Absatz p.
Übungsaufgabe Einstein mit
CSS-Klassen: Geben Sie den
Text in Ihrem Editor ein und
formatieren Sie den Text, so dass
im Browser der Text wie rechts
ausgegeben wird.
1.9.
Mehrfachdefinitionen von Stylesheets im gleichen HTML-Dokument
Wird in einem HTML-Dokument ein Attribut, z.B. die Textfarbe, mehrmals definiert, dann
gilt immer nur die letzte Formatierung. Die vorherigen Formatierungen werden einfach
überschrieben.
Beispiel für die mehrfache Formatierung der Elemente h1 und p:
Externe Definition der Formatierungen
Dateiname: layout.css
h1 { font-family:Verdana;
font-size:20pt;
color:red;}
p { font-family:Arial,Verdana;
color:white;
background-color:gray; }
1
Dateiname: MehrfachDefinitionStylesheet.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
Import
<head>
<title>MehrfachDefinitionStylesheets</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
<style type="text/css">
<!-h1 { font-family: Courier;
font-size: 20pt;
color:black;}
2
p { font-family: Comic Sans MS;
background-color: blue;
text-indent:1cm;}
-->
</style>
</head>
<body>
<h1 style=" font-family: Verdana; color: yellow; background: black;">
Stylesheets:Fast alles ist möglich</h1>
3
<p style="font-family:Verdana; font-size:medium; color:black;
background-color:red;">
Erfreuen Sie sich an den Möglichkeiten.
</p>
</body>
</html>
Attribut Color (Textfarbe) des Elementes h1 mit Mehrfachformatierungen
1. Formatierung
im Link 1
Red
Red
Red
Red
2. Formatierung im
Headbereich
2
Black
Black
Black
-
3. Formatierung im
Bodybereich
3
yellow
yellow
yellow
Gültige Formatierung
im Body-Bereich
yellow
black
red
yellow
yellow
Übung:
Kopieren Sie die beiden Dateien MehrfachDefinitionStylesheet.html und Layout.css
vom Tauschordner in Ihren Arbeitsordner und testen Sie, indem Sie z.B. das Attribut
color:yellow; in der 3. Formatierung im Body-Bereich löschen und die HTML-Seite erneut
testen.
2. CSS-Eigenschaften
2.1. CSS-Eigenschaften für die Schriftenformatierung
•
Schriftarten font-family: Schriftart1, Schriftart2, ...;
CSS-Beispiel
Standardschriften in
allen Elementen
p {font-family :Verdana, Arial, "Times New Roman" ;}
Serifenlos: Arial, Verdana
Serifenschrift:
Times New Roman
Monospaceschriftarten*):
Courier, Courier New
In die Liste können beliebig viele Schriftarten aufgenommen werden. Um
sicherzustellen, dass der Browser die Schriftart darstellen kann, ist am Ende
der Liste eine Standardschrift anzugeben.
Bisherige Schreibweise: <font face = " "> nicht mehr verwenden!
*)Alle Zeichen gleiche Breite
Übung:
Kopieren Sie die Datei font-family.html vom Tauschordner in Ihren Arbeitsordner. Öffnen und
testen Sie diese Datei in Ihrem Editor, indem Sie die Attribute ändern.
•
Textfarbe color: Wert;
CSS-Beispiele
p{ color:red ; }
p{ color:rgb(255,0,0) ; }
p{ color:#FF0000 ;}
•
Alle Elemente
Farbnamen
Farbangabe mit Rot-, Grün- und Blauanteil
Farbangabe in hexadezimaler Schreibweise: 1. und 2. Bit ist der Rotanteil, 3.u.4. Bit der Grünanteil, 5.u.6. Bit ist der Blauanteil
Schriftgröße font-size: Wert Maßeinheit;
CSS-Beispiele
p {font-size :13px ;}
h2 {font-size:20pt; }
unbegrenzte Anzahl von Schriftgrößen
p {font-size :small ;}
span {font-size:xx-large;}
Absolute Maßeinheiten
pt
Kleine Schriftgröße und riesige Schriftgröße,
weitere Bezeichnung siehe unten
pc
cm
in
Centimeter
pica=12 pt
Inch
1 pt
1
0.75
0.35
0.083
0.035
0.0139
1 px
0.75
1
0.47
0.111
0.047
0.0185
1 mm
2.834
2.127
1
0.236
0.1
0.039
1 pc
12
9
4.23
1
0.423
0.0833
1 cm
28,34
21.27
10
2.36
1
0,39
1 in
72
54
25.4
6
2.54
1
Die Größe von pt hängt von der Bildschirmgröße und der eingestellten Auflösung ab.
Punkt=1/72 Zoll
px
Alle Elemente
px für Pixel
abhängig von der Pixeldichte des Ausgabegerätes
Mm
Millimeter
Relative Maßeinheiten
Em
p { font-size :1.5em ; }
Ex
p{ font-size:1.5ex; }
%
p { font-size:130%; }
x-fache Größe des jeweiligen Elementes (1em=100%)
x-fache Größe des Buchstaben
Prozentangabe gegenüber der standardmäßigen Größe
100%
Weitere Maße
xx-small (winzig) x-small (sehr klein)
large (groß)
x-large (sehr groß)
Smaller (nächstniedrigeres Maß)
small (klein)
medium
xx-large (riesig)
larger (nächsthöheres Maß)
x-large (vorher)
smaller bewirkt neue Schriftgröße
large
x-large (vorher)
larger bewirkt
xx-large
neue Schriftgröße
(normal)
Übung:
Kopieren Sie die Datei font-size.html vom Tauschordner in Ihren Arbeitsordner. Öffnen und
testen Sie diese Datei in Ihrem Editor, indem Sie die Attribute ändern.
•
Schriftstil font-style: Wert;
CSS-Beispiele
p { font-style:italic ; }
p { font-style:oblique ; }
p { font-style:normal; }
Veränderung der Schriftlage in allen Elementen
kursiv
oblique, wenn kursiv in der Schriftart nicht möglich ist
normal
Übung:
Kopieren Sie die Datei font-style.html vom Tauschordner in Ihren Arbeitsordner. Öffnen und
testen Sie diese Datei in Ihrem Editor, indem Sie die Attribute ändern.
•
Schriftgewicht font-weight: Wert;
CSS-Beispiele
p { font-weight:bold ; }
p { font-weight:normal ; }
p { font-weight:100 ; }
p { font-weight:900 ; }
p { font-weight:bolder ; }
p { font-weight:lighter ; }
Alle Elemente
fett
wieder normal
extra dünn, 100-900 in 100er Schritten
extra fett
stufenweise Erhöhung
dünner
HTML-Element <strong> ... </strong> nicht mehr verwenden, da Inhalt und Layout zu trennen ist.
Übung:
Kopieren Sie die Datei font-weight.html vom Tauschordner in Ihren Arbeitsordner. Öffnen und
testen Sie diese Datei in Ihrem Editor, indem Sie die Attribute ändern.
•
Schriftvariante font-variant: Wert;
CSS-Beispiele
P{ font-variant:small-caps; }
p{ font-variant:normal; }
Alle Elemente
Kapitälchen
wieder normal
Die kleinen Buchstaben sehen aus wie Großbuchstaben, sind aber nicht ganz so hoch.
Übung:
Kopieren Sie die Datei font-variant.html vom Tauschordner in Ihren Arbeitsordner. Öffnen und
testen Sie diese Datei in Ihrem Editor, indem Sie Attribute ändern.
•
Textdekoration text-decoration: Wert;
Stylesheet-Beispiele
p { text-decoration:underline; }
p { text-decoration:line-through; }
p { text-decoration:overline; }
p { text-decoration:blink; }
p { text-decoration:none; }
a { text-decoration:none; }
Alle Elemente
unterstreichen
durchstreichen
Linie über dem Text
Blinken, nicht unter Internet Explorer
normale Schreibweise
Link wird nicht unterstrichen gezeigt.
Bisherige Schreibweise: <u> ... </u> nicht mehr verwenden!
Bisherige Schreibweise: <s> ... </s> nicht mehr verwenden!
•
Text-Transformation (Groß- und Kleinschreibung) text-transform: Wert;
Stylesheet-Beispiele
p { text-transform:uppercase; }
p { text-transform:lowercase; }
p { text-transform:capitalize; }
p { text-transform:none; }
Alle Elemente
Großschreibung
Kleinschreibung
Erster Buchstabe eines jeden Wortes ist groß
Normale Schreibweise
Übung:
Kopieren Sie die Datei text-transform.html vom Tauschordner in Ihren Arbeitsordner. Öffnen
und testen Sie diese Datei in Ihrem Editor, indem Sie Attribute ändern.
•
Wortzwischenraum (Abstand zwischen Wörter) word-spacing: Wert;
Stylesheet-Beispiele
p {word-spacing:15px; }
p {word-spacing:normal; }
•
Zeichenabstand (Abstand zwischen Zeichen) letter-spacing: Wert;
Stylesheet-Beispiele
p {letter-spacing:15px; }
p {letter-spacing:normal; }
2.2.
•
Alle Elemente
Standardmäßig werden Pixel verwendet.
Keine prozentuale Angaben!
Alle Elemente
Buchstabenabstand 15 Pixel
Keine prozentuale Angaben!
CSS-Eigenschaften für Ausrichtung/Absatzkontrolle
Text horizontale Ausrichtung text-align: Wert;
Stylesheet-Beispiele
p { text-align:left; }
p { text-align:right; }
p { text-align:center; }
p { text-align:justify; }
Nur Blockelemente
linksbündige Ausrichtung (Standard)
rechtsbündige Ausrichtung
zentrierte Ausrichtung
Ausrichtung als Blocksatz
Bisherige Schreibweise: align = ".... "nicht mehr verwenden!
Übung:
Kopieren Sie die Datei text-align.html vom Tauschordner in Ihren Arbeitsordner. Öffnen und
testen Sie diese Datei in Ihrem Editor, indem Sie Attribute ändern.
•
Text vertikale Ausrichtung vertical-align: Wert;
Stylesheet-Beispiele
span { vertical-align:top; }
span { vertical-align:middle; }
span { vertical-align:bottom; }
span { vertical-align:super; }
span { vertical-align:sub; }
span { vertical-align:text-top; }
span { vertical-align:text-bottom; }
span { vertical-align:baseline; }
span { verticalalign:Prozentangabe; }
Beispiele:
span { vertical-align:50%; }
span { vertical-align:-25%; }
Inline-Elemente und Tabellenzellen <td>
Ausrichtung am oberen Rand
Ausrichtung Mitte (Standard)
Ausrichtung am unteren Rand
Element hochgestellt z.B. x² (Schriftgröße bleib gleich)
Element tiefgestellt z.B. x2 (Schriftgröße bleib gleich)
Ausrichtung am oberen Rand des Textes
Ausrichtung am unteren Rand des Textes
Ausrichtung an der Basislinie
50% über der Grundlinie
25% unterhalb der Grundlinie
Übung:
Kopieren Sie die Datei vertical-align.html vom Tauschordner in Ihren Arbeitsordner. Öffnen
und testen Sie diese Datei in Ihrem Editor, indem Sie Attribute ändern.
•
Zeilenhöhe line-height: Wert;
Stylesheet-Beispiele
p {line-height:150%; }
p {line-height:15px; }
p {line-height:normal; }
•
Text einrücken text-indent: Wert;
Stylesheet-Beispiele
p {text-indent:20px; }
p {text-indent: 10%; }
p {text-indent: -20px; }
•
Alle Elemente
Zeilenabstand 150%
Zeilenabstand 15 px
Normal entspricht ca. 120% Zeilenhöhe
Nur Block-Elemente
Einrückung nach rechts (innen)
Der Einzug beträgt 10% der Fensterbreite (nicht vom Absatz)
Einrückung nach links (außen)
Zeilenumbruch white-space: Wert;
Stylesheet-Beispiele
p {white-space:normal; }
p {white-space: pre; }
p {white-space: pre-wrap; }
p {white-space: pre-line; }
p {white-space: nowrap; }
Nur Block-Elemente
Automatischer Zeilenumbruch
Umbruch, wie beim HTML-Tag <pre>
wie pre, bei Platzmangel wird ein Umbruch gesetzt
wie pre, mehrere Leerzeichen werden zusammengefasst
Zeilenumbruch unterbinden
Bisherige Schreibweise: <nobr> ... </nobr> nicht mehr verwenden!
3. Musterbeispiel mit den HTML-Elementen div, p und span mit Klassen
Erläuterung:
Allgemeine Blockelemente wie <div> können mehrere Elemente wie Text, Grafiken,
Tabellen usw., in einen gemeinsamen Bereich einschließen. Mit <div> wird ein allgemeines
Blockelement (Bereich) eingeleitet, in das mehrere andere Block-Elemente eingeschlossen
werden können (div = division = Bereich). Alles, was zwischen diesem Tag und dem
abschließenden </div> steht, wird als Teil des Bereichs interpretiert. Block-Elemente
erzeugen eine neue Zeile im Textfluss und können in der Regel normalen Text und In-LineElemente (z.B. <span> ... </span>) enthalten. Inline-Elemente erzeugen keine neue Zeile im
Textfluss. Inline-Elemente sind als untergeordnete, "innere" Elemente für Blockelemente
gedacht.
3.1.
Musterbeispiel mit CSS im Headbereich
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Bestimmte/Unbestimmte Klassen</title>
<style type="text/css">
<!-body { background-color:#FFFFFF; }
div.chap { font-family:Arial; font-size:20pt; color:blue;
border-bottom-style:solid; border-bottom-width:3px; border-color:red;
margin:0px; margin-bottom:16px; }
div.sect { font-family:Arial; font-size:16pt; color:blue;
border-bottom-style:solid; border-bottom-width:3px; border-color:red;
margin:0px; margin-top:24px; margin-bottom:16px; }
.p { font-family:Arial; font-size:11pt; color:black; margin-top:6px;margin-bottom:6px;}
.blau { color:blue; }
.red { color:red; }
.bold { font-weight:bold; }
.big { font-size:14pt; }
.small { font-size:6pt; font-family:Small Fonts,sans-serif; }
.rand {border:2px solid black; background-color:yellow;}
-->
</style>
</head>
<body>
<div class="chap rand">Eine Kapitelüberschrift</div>
<div class="p blau ">Ein blauer Textabsatz mit zwei Klassen, wobei eine Klasse genau so
heißt wie ein HTML-Element.</div>
<div class="p red">Und damit man auch alles sieht, gleich noch einer davon in Rot.</div>
<div class="sect rand">Eine Sektionsüberschrift</div>
<p class="p blau">Absatz mit <span class="red rand">rotem und <span class="bold">
fettem</span></span> Text mit schwarzen Rahmen und gelbem Hintergrund</p>
<div class="p red">Absatz mit <span class="big">großem</span> und
<span class="small">kleinem</span> Text</div>
</body>
</html>
3.2.
Musterbeispiel mit CSS extern definiert
Übung: Externe CSS-Datei layout.css erstellen
⇒ Kopieren Sie die Datei divspan.html vom Tauschordner in Ihren Arbeitsordner.
⇒ Öffnen Sie diese HTML-Datei und testen Sie ohne Änderungen in Ihrem Editor.
⇒ Erstellen Sie eine leere Seite und speichern Sie unter dem Namen layout.css (Dateityp css
ist zu wählen).
⇒ Kopieren Sie nur die CSS von der Datei dispan.html in die Datei layout.css
⇒ Passen Sie beide Dateien so an wie Sie unten angegeben sind.
⇒ Binden Sie den Link für die externe CSS-Datei so ein wie er unten angegeben ist.
⇒ Speichern Sie die HTML-Datei unter divspanextern.html
Datei divspanextern.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Bestimmte/Unbestimmte Klassen CSS extern</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<div class="chap rand">Eine Kapitelüberschrift</div>
<div class="p blau ">Ein blauer Textabsatz mit zwei Klassen,
wobei eine Klasse genau so heißt wie ein HTML-Element.</div>
<div class="p red">Und damit man auch alles sieht, gleich noch einer
davon in Rot.</div>
<div class="sect rand">Eine Sektionsüberschrift</div>
<p class="p blau">Absatz mit <span class="red rand">rotem und
<span class="bold">fettem</span></span> Text mit schwarzen
Rahmen und gelbem Hintergrund</p>
<div class="p red">Absatz mit <span class="big">großem</span>
und <span class="small">kleinem</span> Text</div>
</body>
</html>
CSS extern definiert in der Datei layout.css
body {background-color:#FFFFFF;}
div.chap {font-family:Arial;
font-size:20pt;
color:blue;
border-bottom-style:solid;
border-bottom-width:3px;
border-color:red;
margin:0px;
margin-bottom:16px; }
div.sect {font-family:Arial;
font-size:16pt;
color:blue;
border-bottom-style:solid;
border-bottom-width:3px;
border-color:red;
margin:0px;
margin-top:24px;
margin-bottom:16px; }
.p {font-family:Arial;
font-size:11pt;
color:black;
margin-top:6px;
margin-bottom:6px; }
.blau { color:blue; }
.red { color:red; }
.bold { font-weight:bold; }
.big { font-size:14pt; }
.small { font-size:6pt;
font-family:Small Fonts,sans-serif; }
.rand {border:2px solid black;
background-color:yellow;}
3.3.
Kurzer Überblick an einem Beispiel zur CSS-Einbindung im Head mit
Deklaration in externer Datei
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>CSS in externer Datei definiert</title>
<link rel=stylesheet type="text/css" href="layout.css">
</head>
<body class="farbe">
</body>
</html>
Hauptdatei
Inhalt
Externe Datei
Name layout.css
Inhalt body.farbe {color:red;
background-color:#FFFFFF;}
3.4.
Hauptdatei
Kurzer Überblick an einem Beispiel zur CSS-Einbindung im Head
und Deklaration Head
Inhalt
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title> CSS im Headbereich definiert</title>
<style type="text/css">
<!-h1 {color:black;
font-size:12pt;
font-family:arial narrow, sans serif;}
-->
</style>
</head>
<body>
<h1>Ich bin eine Überschrift </h1>
</body>
</html>
4. Grundlagen der Cascading StyleSheets (CSS)
4.1.
Objekte mit CSS
Ein Objekt ist immer eine Einheit aus Element (sowie eventuellen weiteren Klassifizierungen),
seinen definierten Eigenschaften und den dazugehörigen Werten. Elementnamen und weitere
Spezifikationen stehen dabei am Anfang, gefolgt von den Eigenschaften und Werten, welche von
geschweiften Klammern ('{' und '}') umschlossen werden müssen.
Beispiel:
p.eins { font-size: 48pt; }
h1.rot { color: red; }
h1.gruen { color: green; }
4.2.
Box-Eigenschaften in CSS
CSS definiert für jedes Element des Element-Baumes eine Box. Vereinfacht vorgestellt könnte
man sich diese Box wie ein Bild vorstellen. Das Element selbst ist das (gemalte) Bild. Um dieses
Bild/Element herum wird (meist) ein Rahmen (engl. Border) gezogen. Zwischen Bild und
Rahmen wird der Padding- oder Auffüllbereich gesetzt. Er dient z.B. dazu, dass der Rahmen nicht
direkt am Bild "hängt". Um den Rahmen wiederum wird Bereich definiert, der sich Margin- oder
Begrenzungsbereich nennt. Er dient dazu, dass andere Bilder/Elemente einen gewissen
Mindestabstand zu unserem Bild haben müssen. Die folgende Grafik soll dies nochmals
verdeutlichen:
Darstellung: Box-Modell
Unser Bild kann nun (fast) jedes beliebige Element sein z.B. Absatz ( p) oder eine Tabelle (table) oder
ein anderes Element (ausgenommen head und frameset; Einschränkungen bei frame, iframe
und body). Somit ist es möglich (fast) jedem Element einen Rahmen oder einen Mindestabstand zu
definieren.
Um den Auffüllbereich zu definieren sind in CSS Level 1 die folgenden Eigenschaften beschrieben:
•
•
•
padding-top und padding-bottom - vertikaler Auffüllbereiche
padding-left und padding-right - horizontaler Auffüllbereiche
padding - allgemeiner Auffüllbereiche
Zur Beschreibung der Außenbegrenzung sind in CSS Level 1 die folgenden Eigenschaften gegeben:
•
•
margin-top und margin-bottom - vertikale Begrenzung
margin-left und margin-right - horizontale Begrenzung
Kurzschreibweise für alle Seiten der Außenbegrenzung:
Bei vier definierten Werten ist die Reihenfolge padding-top, -right, -bottom und –
left einzuhalten. Alle Werte werden durch Leertasten getrennt. Beispiel:
p { padding: 20px 40px 13% 14%; }
div { padding: 5%; }
4.3.
Erbschaftsregeln in CSS
Wird mit CSS einem Element eine bestimmte Eigenschaft (z.B. rote Farbe) zugewiesen, so
überträgt sich dies auf sämtliche "Kinder" und eingeschlossene Elemente. Wird z.B. das BodyElement mit rotem Text definiert, so werden auch alle enthaltenen p-Elemente mit rotem Text
dargestellt. Eine Ausnahme tritt dann ein, wenn dieses Kind (p-Element) wiederum mit anderen
Eigenschaften (z.B. blauer Farbe) definiert wird.
Des weiteren können beschriebene Eigenschaften durch andere überdeckt bzw. überschrieben
werden. Das Überschreiben/Überdecken richtet sich dabei nach der Notation der Eigenschaften:
Eine bereits notierte Eigenschaft wird dann durch eine andere überdeckt, wenn diese später (im
Quelltext) erscheint.
Aufgaben:
1. Geben Sie die 2 Möglichkeiten an, um CSS zu definieren:
Definitionen von Tags und Klassen im
<head>
<style type=“text/css”>
.
.
.
</style>
</head>
Definition von Tags und Klassen in
einer separaten Datei
Dateiname: xxxxxxx.css
2. Warum sollte auf die direkte Definition im Body-Bereich möglichst verzichtet werden?
Grundgedanke von CSS ist die Trennung von Inhalt und Layout.
______________________________________________________________
3. Welchen Vorteil bietet die Definition der CSS in einer externen Datei?
Externe CSS können für verschiedene HTML-Dokumente verwendet werden.
______________________________________________________________
4. CSS können innerhalb im Head-Bereich bzw. in der externen Datei auf drei Arten definiert
werden:
CSS für einen bestimmten HTML-Befehl
h2 { font-family: Courier; font-size: 20pt; color:black;}
________________________________________________________________________
CSS für einen bestimmten HTML-Befehl aber mit mehreren Klassen
h2.black { font-family: Courier; font-size: 20pt; color:black;}
h2.red { font-family: Courier; font-size: 20pt; color:red;}
________________________________________________________________________
CSS für unbestimmten HTML-Befehle mit Klassen
Klassen können bei jedem HTML-Element verwendet werden
.black { font-family: Courier; font-size: 20pt; color:black;}
.red { font-family: Courier; font-size: 20pt; color:red;}
________________________________________________________________________
5. Erstellen Sie eine HTML-Seite mit CSS extern definiert, die wie folgt aussieht:
a) Überschrift h1:
Schrift:Größe: 24 Pixel; fett
Ausrichtung: zentriert
Hintergrund: rot
b) Absatzformat p:
Schrift: Größe:14 Pixel
Rand: links: 50 Pixel rechts: 50 Pixel
Hintergrund: gelb
Rahmen: Größe: 5 Art: solid Farbe: blau
c) Geben Sie einen beliebigen Text (Inhalt) um die Formatvorlage zu testen.
d) Speichern Sie die externe CSS-Datei unter layoutafg5.css
6. Übungsaufgabe mit CSS-Klassen
a) Speichern Sie die Datei layoutafg5.CSS unter layoutafg6.CSS
b) Legen Sie für die HTML-Elemente h1 und p jeweils 2 Farben als Klassen in der
externen Datei layoutafg6.CSS fest mit den Attributen wie in Aufgabe 5.
c) Binden Sie die externe Formatdatei layoutafg6.CSS im Head-Bereich eines neuen
HTML-Dokumentes ein.
d) Formatieren Sie im Bodybereich zwei Überschriften und zwei Absätze mit den CSSKlassen.
Universalattribute
Folgende Universalattribute sind in fast allen einleitenden HTML-Tags erlaubt sind. Die
Ausnahmen sind in SELFHTML angegeben.
Universal- Bedeutung
Attribut
Gibt an, dass das HTML-Element einer bestimmten
class=
Beispiele
style=
<h2 style="color:red;"</h2>
<p style="color:red;"</p>
title=
lang=
Stylesheet-Klasse angehört. Das Element übernimmt
Formate, die zentral für diese Klasse definiert
wurden
Erlaubt es, den Inhalt eines Elements individuell mit
CSS Stylesheets zu formatieren bzw. das
Grundgerüst für Stylesheet zu definieren.
Erlaubt es, HTML-Elemente mit kommentierendem
Text bzw. Meta-Information auszustatten. Der
kommentierende Text sollte vom Browser in einem
kleinen Fenster ("Tooltip"-Fenster) angezeigt
werden, wenn der Anwender mit der Maus über den
Anzeigebereich des HTML-Elements fährt.
<h4 class="rot"> Text </h4>
<p class="rot"> Text </p>
<p title="ironisch!">
Text</p>
<h3 title="ironisch!">
Text</h3>
Gibt die Landessprache an, die innerhalb des HTML- <p lang="en">Welcome</p>
Elements verwendet wird. Interessant bei
mehrsprachigen Dateien - aber auch für
<p lang="it">Benvenuto</p>
Suchmaschinen im Internet. Als Angabe ist ein
standardisiertes Sprachenkürzel erlaubt, z.B. de für
<h1 lang="en">Welcome</h1>
deutsch, en für englisch, fr für französisch
Lösung zur Aufgabe 5 :
Formatdatei layoutafg5.CSS
h1 {
font-size: 24pt;
font-weight:bold;
background-color: red;
text-align: center;
}
p{
font-size: 14pt;
background-color: yellow;
margin-left: 50px;
margin-right: 50px;
border:5pt solid blue;
}
Lösung zur Aufgabe 6 :
a) und b)
Formatdatei layoutafg6.CSS
h1.rot {
font-size: 24pt;
font-weight:bold;
background-color: red;
text-align: center;
}
h1.yellow {
font-size: 24pt;
font-weight:bold;
background-color: yellow;
text-align: center;
}
p.gruen {
font-size: 14pt;
background-color: green;
margin-left: 50px;
margin-right: 50px;
border:5pt solid blue;
}
p.weiss {
font-size: 14pt;
background-color: white;
margin-left: 50px;
margin-right: 50px;
border:5pt solid blue;
}
HTML-Dokument
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>L&ouml;sungAfg5</title>
<link rel="stylesheet" type="text/css" href="layoutafg5.css" />
</head>
<body>
<h1>Heading-Format h1</h1>
<p> Absatz-Format p </p>
</body>
</html>
c) und d) HTML-Dokument
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>L&ouml;sungAfg6</title>
<link rel="stylesheet" type="text/css" href="layoutafg6.css" />
</head>
<body>
<h1 class="rot" >Heading-Format I </h1>
<h1 class="yellow" >Heading-Format II</h1>
<p class="gruen" > Absatz-Format p I</p>
<p class="weiss" > Absatz-Format p II</p>
</body>
</html>
