homeUnix & Internet Unix & Shell-Programmierung: Cascading Style Sheets Prof. Dr. Uwe Schmidt FH Wedel

Cascading Style Sheets

weiter

weiter

CSS Konzept

Literatur
HTML 4 von Tolksdorf
WI Seminar WS98: HTML 4 und CSS von Markus Heins
weiter
Motivation
Trennung der Strukturinformation und des Inhalts von Formatangaben
 
Wiederherstellung der ursprünglichen HTML-Idee:
ein Dokument enthält nur Struktur und Inhalt, keine Layout-Anweisungen
weiter
gut
kein Missbrauch von HTML-Elementen für das Layout
1 pixel transparentes GIF
Layout mit Tabellen
<font face="...">
<font color="...">
<font size"...">
<div align="...">
<img border="..." align="...">
<table width="...">
physikalische Schriftstile
<b> <i> <tt>
...
weiter
Idee
Layout-Information auslagern in ein extra Dokument
weiter
gut
Dokumentenstruktur wird wieder sichtbar
gemeinsame Nutzung von Layout-Information in vielen Dokumenten
Wartbarkeit
weiter
Lösungsansatz
.1
CSS: Sprache zum Beschreiben von Layout-Information
<style type="text/css"> CSS-Code </style>
 
in dem <head>...</head> Abschnitt
weiter
.2
Binden von Layout-Information an Elemente
<name class="layoutName">
class Attribute für (fast) alle Elemente zulässig
weiter
1. Beispiel
die Quelle
<html>
<head>
<title>CSS:
1. Beispiel</title>
<style type="text/css">
p.bunt {
color: yellow;
background: blue;
font-family: serif;
font-weight: bold;
font-size: large;
text-transform: uppercase
}
</style>
</head>
<body>
<p>Ein normaler
Absatz</p>
<p class="bunt">Ein
auffälliger<br>
Absatz</p>
<p>Hier geht's
wieder normal
weiter</p>
<p class="bunt">Jetzt
wird's wieder<br>
bunt<p>
</body>
</html>
weiter
weiter

weiter

Einbinden von Style Sheets in HTML

link Element
einbinden von ausgelagerten style sheets
 
<link rel="stylesheet"
type="text/css"
href="URL.css"
media="Ausgabe Medium"
title="style sheet title">
Beispiel
weiter
die Quelle
<html>
<head>
<title>CSS:
2. Beispiel</title>
<link rel="stylesheet"
type="text/css"
href="bunt.css"
media="screen"
title="Bunte Absätze">
</head>
<body>
<p>Ein normaler
Absatz</p>
<p class="bunt">Ein
auffälliger<br>
Absatz</p>
<p>Hier geht's
wieder normal
weiter</p>
<p class="bunt">Jetzt
wird's wieder<br>
bunt<p>
</body>
</html>
weiter
die Formatvorlage
p.bunt {
color: yellow;
background: blue;
font-family: serif;
font-weight: bold;
font-size: large;
text-transform: uppercase
}
weiter
weiter

weiter

CSS-Syntax

Syntax
Element {
Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
}
weiter
Element
HTML Elementname(n)
Eigenschaft
Darstellungsattributname
Wert
Darstellungsattributwert
weiter
Beispiele
gültig im gesamten Dokument
 
h1 {
color : yellow;
}
h1, h2, h3 {
background-color : blue;
}
weiter
Beispiele
gültig in einem speziellen Kontext
 
h1 strong {
color : red;
}
weiter
Darstellungsklassen
Syntax
Element.Klassenname {
Eigenschaft : Wert;
...
}
weiter
Beispiele
für Darstellungsklassen
 
tt.code {
background-color : yellow;
}
tt.input {
color : red;
}
weiter
Verwendung
mit dem class-Attribut
 
<tt class="code">{a := b+c}</tt>
...
<tt class="input">wichtig</tt>
weiter
Darstellungsklassen
für alle Elemente
Syntax
.Klassenname {
Eigenschaft: Wert;
}
weiter
Beispiele
 
.code {
background-color : yellow;
}
.input {
color : red;
}
weiter
Verwendung
 
<h1 class="code">{a := b+c}</h1>
...
<p class="input">wichtig</p>
weiter
Freie Klassenverwendung
mit dem <div> und <span> Element
<div>
kennzeichnet einen Textblock, gilt für ganze Zeilen
<span>
bezieht sich nur auf eine Folge von Zeichen
weiter
eine Seite mit den oben verwendeten Elementen
weiter
die Quelle
<html>
<head>
<title>CSS:
3. Beispiel</title>
<link rel="stylesheet"
type="text/css"
href="example.css"
media="screen"
title="Beispiel Klassen">
</head>
<body>
<h1>eine
<strong>wichtige</strong>
Überschrift</h1>
<h2>eine Unterschrift</h2>
<p class="gelbblau">Ein schwedischer
Absatz</p>
<p>Ein normaler Absatz, in dem
<tt class="code">hier</tt>
ein tt.code Element benutzt wird<br>
<tt class="input">hier</tt>
ein tt.input Element<br>
und <tt class="code">hier
<tt class="input">code</tt>
und
<tt class="input">input</tt>
Elemente</tt>
geschachtelt sind
</p>
<p>
<div class="gelbblau">Hier sind
zwei Zeilen<br>
gelb und blau</div>
und hier
<span class="gelbblau">steht
der gelbblaue Text
mitten</span> in dem Rest
</p>
</body>
</html>
weiter
die Formatvorlage
tt.code {
background-color: yellow
}
tt.input {
color: red
}
.gelbblau {
color: yellow;
background-color: blue
}
h1, h2, h3 {
color: blue
}
h1 strong {
color: red
}
weiter
weiter

Letzte Änderung: 14.02.2012
© Prof. Dr. Uwe Schmidt
Prof. Dr. Uwe Schmidt FH Wedel