Kapitel 17: CSS

Transcription

Kapitel 17: CSS

17. CSS - Cascading Style Sheets
17-1
17-2
Inhalt
'
$
1. Einführung CSS
&
%
2. Farben, Hintergründe, Zeichensätze
3. Gruppierungen
Kapitel 17: CSS
4. Box-Modell
5. Validierung
Die Beispiele sind dem Tutorial:
http://de.html.net/tutorials/css/ entnommen.
A. Herrmann: Datenbanken und WWW
Universität Halle, 2013
17-3
17-4
Was kann CSS? (1)
• CSS steht für Cascading Style Sheets. Es ist ist eine
Stilsprache, die das Aussehen von HTML-Dokumenten
definiert. CSS kann man z.B. zum Festlegen von
Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittenere Positionierung und vieles anderes benutzen.
• Zum Verständnis von CSS sind Grundkenntnisse
Was kann CSS? (2)
• Mit CSS kann Inhalt und Layout einer HTML-Seite
voneinander getrennt werden.
• CSS bietet mehr Möglichkeiten und ist zudem viel
genauer und ausgereifter als die Formate von HTML.
• CSS wird von allen neueren Browsern unterstützt.
von HTML nötig.
17-5
17-6
Vorteile von CSS
Werkzeuge für CSS
• Zum Erstellen von Style Sheets sollte nur ein einfacher Texteditor, der keine Formatinformationen mit
• Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus
speichert, verwendet werden (z. B. Notepad oder
• präzisere Kontrolle über das Layout
Wordpad - Speicherung als text - in Windows).
• verschiedene Layouts für verschiedene Medientypen
• Es gibt auch spezielle CSS-Editoren (z.B. Topstyle)
• Zum Testen benutzt man einen möglichst aktuellen
Browser.
(Bildschirmanzeige, Druck etc.)
• eine Vielzahl von fortgeschrittenen und anspruchsvollen Techniken
17-7
17-8
Wo wird der CSS-Code angegeben? (1)
3 Möglichkeiten:
Syntax von CSS
1. In-line mit dem Attribut style:
Selector {Eigenschaft : Wert; ...}
Beispiel:
• Selector: Welchem HTML-Tag wird diese Eigenschaft zugeordnet (z. B."body")
<html>
<head>
• Eigenschaft: Die Eigenschaft kann z. B. die Hintergrundfarbe sein ("background-color")
• Wert: Der Wert der Eigenschaft background-color
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>Das ist eine rote Seite.</p>
kann z. B. rot sein ("#FF0000")
</body>
</html>
17-9
17-10
2. In-document (im Header) mit dem Tag <style>:
3. Verweis auf ein externes Style-Sheet:
Beispiel:
Dieser Verweis muss im Header des HTML-Dokumentes
<html>
<head>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Das ist eine rote Seite.
</p>
</body>
</html>
eingetragen werden
Beispiel:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="css/name.css" />
</head>
<body>
...
17-11
3. ... noch Verweis auf ein externes Style-Sheet:
• Das Style-Sheet Format(e) befindet sich in einer
externen Datei mit Namen ”name.css”
• Diese Datei im Unterverzeichnis ”css”und hat
den folgenden Inhalt (Beispiel):
17-12
• Alle Formatierungsangaben werden durch den Namen bestimmten Gruppierungstags zugewiesen.
• Beispiel:
P {font-style: italic; font-weight: bold; font-size:
15px; font-family: arial, sans-serif; color:maroon;
text-align:center;}
• body { background-color: #FF0000; }
Diese Eigenschaften werden den Blöcken, die in
<P>...</P> eingeschlossen sind, zugewiesen.
Diese Form hat den Vorteil, dass das gleiche StyleSheet für mehrere HTML-Dateien verwendet werden
kann.
• mit * können Eigenschaften allen zugewiesen werden.
17-13
17-14
Farben und Hintergründe - Vordergrundfarbe
Inhalt
• Die Eigenschaft color beschreibt die Vordergrundfarbe (Textfarbe).
1. Einführung CSS
'
• Beispiel: alle Überschriften sollen rot dargestellt wer-
$
&
den. Falls sie mit dem <h1>-Tag markiert werden,
%
kann man folgenden Code anwenden:
3. Gruppierungen
h1 { color: #ff0000; }
4. Box-Modell
• Farben können als Hexadezimalwerte, wie im obi-
5. Validierung
gen Beispiel (#ff0000), mit dem jeweiligen englischen Farbnamen (red) oder als RGB-Werte
(rgb(255,0,0)) angegeben werden.
17-15
17-16
Hintergrundfarbe
• Die Eigenschaft background-color beschreibt die Hintergrundfarbe. Die allgemeine Hintergrundfarbe sollte im Element <body> festgelegt werden.
• Zum Hinterlegen einer Schrift kann diese Eigenschaft aber auch anderen Elementen zugewiesen
werden.
Hintergrundbild (1)
• Die Eigenschaft background-image beschreibt das Hintergrundbild. Sie muss im Element <body> zusammen mit dem Ort des Bildes angegeben werden.
• Beispiel:
body { background-color: #FFCC66;
• Beispiel:
background-image: url("bildname.gif");}
body { background-color: #FFCC66; }
h1 { color: #990000; background-color: #FC9804; }
Liste der hexadezimalen Farbwerte:
• Das Bild wiederholt sich standardmäßig sowohl horizontal als auch vertikal.
http://gucky.uni-muenster.de/cgi-bin/rgbtab
17-17
17-18
Hintergrundbild (3)
Hintergrundbild (2)
• Beispiel:
• Mit der Eigenschaft background-repeat kann die Wiederholung des Bildes beeinflußt werden.
Wert
background-repeat:
background-repeat:
background-repeat:
background-repeat:
repeat-x
repeat-y
repeat
no-repeat
• Wenn die Reihenfolge eingehalten wird:
Beschreibung
Wdh.: horizontal
Wdh.: vertikal
Wdh.: horizontal und vertikal
keine Wdh.
background-color
background-image
background-repeat
• Weitere Eigenschaften des Hintergrundbildes:
Eigenschaft
background-attachment
background-position
Wert
fixed oder scroll
z.B.bottom right
body { background-color: #FFCC66; background-image: url(”bild.jpg”);
background-repeat: no-repeat; background-attachment: fixed;
background-position: top left; }
background-attachment
Wirkung
Bild scrollt bzw.bleibt fest
Bild wird rechts unten pos.
background-position
geht es noch einfacher:
background: #FFCC66 url(”bild.jpg”) no-repeat fixed top left;
17-19
17-20
Zeichensätze (Fonts)(2)
Zeichensätze (Fonts)(1)
• Alle Font-Eigenschaften werden in den Elementen
• CSS - Eigenschaften:
font-style: "normal" (kein Stil), "italic" (kursiv) oder "oblique" (schräg)
font-variant: "normal" oder "small-caps"(Großbuchst.
font-weight: "normal" oder "bold"
font-size: Schriftgröße (Pixel oder Prozent)
font-family: da man nicht weiss, welche Fonts
auf dem Zielcomputer implementiert sind, werden möglichst mehrere angegeben, oder eine
zur Markierung von Texten angegeben z. B.:
p, t1...t6, td, Beispiel:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
oder in Kurzform unter Beachtung der obigen
"font-family". Ein Font davon wird dann aus-
Reihefolge:
gewählt.
p { font: italic bold 30px arial, sans-serif; }
17-21
17-22
Absatzformatierungen
Inhalt
• Die Absatzformatierungen werden an den gleichen
Stellen angegeben wie die Fonts und zwar:
text-indent: Einrückung am Anfang eines Absatzes (in Pixel)
text-align: Ausrichtung "left", "right", "center",
1. Einführung CSS
'
$
3. Gruppierungen
"justify" (Blocksatz)
&
text-decoration: "underline", "overline",
%
4. Box-Modell
"line-through"
letter-spacing: Buchst.abst in Pixel (z.B. 3px)
5. Validierung
text-transform: "uppercase" Großbuchst.,
"capitalize" Anfbuchst. groß
17-23
17-24
Links - Beispiele
Pseudoklassen
• Mit Pseudoklassen werden unterschiedliche Zustände
(Ereignisse) bei Links beschrieben. Man verwendet
das <a>-Tag.
• a:link { color: blue; }
a:visited { color: red; }
a:active { background-color: #FFFF00; }
a:hover { color: orange; font-style: italic; }
• Zustände:
• Effekt von hover - Die Schrift wird orange und kur-
a: link: nicht besuchter Link
siv beim Überfahren mit der Maus.
a: visited: besuchter Link
• Andere Effekte kann man erhalten, wenn man z.B.
a: active: aktiver Link
a: hover: vom Mauszeiger berührter Link
• Diesen Pseudoklassen können nun unterschiedliche
Eigenschaften, z.B. Farben zugewiesen werden.
in a:hover letter-spacing:10px oder
text-transform:uppercase benutzt.
• mit text-decoration:none wird die Unterstreichung
von Links unterdrückt.
17-25
Beispiel für class
class
• Mit class wird es möglich, ausgewählten Elementen
spezielle Eigenschaften zuzuweisen. Damit müssen
nun nicht alle Links gleich aussehen.
• Im folgenden Beispiel sehen die Links für Weißwein
gelb, die für Rotwein rot und die restlichen blau
aus.
• Wie man im folgenden Beispiel sieht, kann man Eigenschaften von Elementen einer bestimmten Klasse mit Hilfe von .classname im Stylesheet des Webdokumentes festlegen.
17-27
<p> Trauben für Weißwein</p>
<ul>
<li><a href="ri.htm" class="ww">Riesling</a></li>
<li><a href="ch.htm" class="ww">Chardonnay</a></li>
</ul>
<p> Trauben für Rotwein</p>
<ul>
<li><a href="me.htm" class="rw">Merlot</a></li>
<li><a href="pn.htm" class="rw">Pinot Noir</a></li>
</ul>
a { color: blue; }
a.ww { color: #FFBB00; }
a.rw { color: #800000; }
id
17-28
Beispiel für id
• Mit id kann einzelnen Elementen ein spezielles Format gegeben werden.
• <h1 id="k1">Kapitel 1</h1>
...
• Das besondere an dem Attribut id ist, dass es kein
<h2 id="k1-1">Kapitel 1.1</h2>
weiteres Element im selben Dokument geben kann,
...
welches dieselbe id trägt. Jede id muss einzigartig
<h1 id="k2">Kapitel 2</h1>
sein.
...
• Im folgenden Beispiel werden den Kapitel-Überschriften eines Dokumentes unterschiedliche id’s gege-
<h2 id="k2-1">Kapitel 2.1</h2>
...
• CSS dazu:
ben.
• Die Überschrift des Kapitels 1.1 soll rot sein.
17-26
#k1-1 { color: red; }
17-29
Gruppierung mit span und div
17-30
Beispiel für span
• span und div dienen zur Gruppiereung und damit
zur Strukturierung eines Dokumentes und sind von
zentraler Bedeutung für die Anwendung von css.
• span allein ist neutral und bewirkt nichts, doch mit
CSS zusammen können visuelle Besonderheiten erzeugt werden. Es wird innerhalb eines Blockes verwendet.
• In Goethes Ausspruch sollen die Tugenden rot geschrieben werden:
<p><span class="tugend">Edel</span> sei der Mensch,
<span class="tugend">hilfreich</span> und
<span class="tugend">gut</span>.</p>
• Das zugehörige CSS:
span.tugend { color:red; }
• div dagegen gruppiert Blöcke.
• Beim div-Beispiel werden die Ergebnisse rot bzw.
• Das Ergebnis:
Edel sei der Mensch, hilfreich und gut.
schwarz hinterlegt. Die Schriftfarbe ist weiß.
17-31
Beispiel für div
17-32
Verschachtelungen
Deutsche Bundeskanzler:
<div id="spd"><ul>
<li>Gerhard Schröder</li>
<li>Helmut Schmidt</li>
</ul></div>
<div id="cducsu"><ul>
<li>Angela Merkel</li>
<li>Helmut Kohl</li>
</ul> </div>
CSS:
#spd{ background red; color white;}
#cducsu{ background black; color white;}
1. Nachfahren-Selektor: 2 Selektoren Trennung - blank
Beispiel: div i {color:red} in div geschachtelte iElemente werden immer rot angezeigt.
2. Kind-Selektor: 2 Selektoren Trennung >
Beispiel: div > p {color:blue} in div geschachtelte p-Elemente werden blau angezeigt, wenn die pElemente genau eine Ebene unter div stehen.
3. Nachbar-Selektor: 2 Selektoren Trennung +
Beispiel: div + p {margin-top:100px;} Wenn div und
p unmittelbar aufeinander folgen, dann 100px Abstand.
17-33
Inhalt
Box-Modell (1)
1. Einführung CSS
• Das Box-Modell in CSS beschreibt die Boxen (oder
Kästen), die für HTML-Elemente generiert werden.
• Einstellungen:
3. Gruppierungen
'
Außenabstand - margin
$
4. Box-Modell
&
17-34
Rand - border
%
5. Validierung
Innenabstand - padding
im Inhalt - height und with
17-35
17-36
Randabstände (1)
Box-Modell (2)
• Die Randeinstellungen gelten
für die gesamte Seite:
Beispiel:
body { margin-top: 100px; margin-right: 40px;
margin-bottom: 10px; margin-left: 70px; }
oder
für einen Block:
p { margin: 5px 50px 5px 50px;}
ausschlaggebend ist das Gruppierungselement
• analog kann padding für die Innenabstände verwendet werden.
17-37
17-38
Umrandung
Randabstände(2)
• Die Elemente zum Einstellen der Boxen werden
in den Gruppierungselementen z. B. div, span, p,
h1...h6, ul, ol angegeben.
• Beispiel: <div class="beisp">Dies ist ein Block, der
gelb unterlegt ist und vorgegebene Randabstände
hat. </div>
• Die Boxen können umrandet werden. Die Umrandung kann
farbig border-color
in unterschiedlicher Dicke border-with z.B.thin,
medium, thick oder Pixel
in unterschiedlicher Strichart border-style z.B.
solid, dotted, double, ...
CSS:
div.beisp { background: yellow; padding: 20px 20px
20px 80px; }
• Dabei kan jeder Rand einzeln formatiert werden
z.B.border-top-with
17-39
Umfließender Text
17-40
absolute Positionierung
• Mit der Eigenschaft float kann ein Element (z.B.
ein Bild) von einem anderen (z.B. Text) umflossen
werden.
• Beispiel:
<div id="pic"> <img src="bild.jpg" alt="Bild"> </div>
Dieser Text fließt um das Bild herum</p>
CSS:
#pic { float:left; width: 100px;}
• Dieser Text steht unter dem Bild
<p id="unten">Unterer Text</p>
CSS:
#unten {clear:left}
ausgeführt werden.
• Es können auch Boxen fest positioniert werden.
Das Browserfenster wird dabei als koordinatensystem verwendet. Die Positionierung wird in Pixel
angegeben.
• Beispiel:
<div id="box1"> Box 1 </div>
CSS: #box1{position:absolute;top:50px;left:50px;}
• Wichtig ist die Angabe position: absolute;
• Die Abstände werden von oben top und rechts oder
links right/left bzw. von unten bottom und rechts
oder links in Pixeln angegeben.
17-41
17-42
Validierung
Inhalt
• Zweck: Erfolgreich validierte Seiten genügen dem
1. Einführung CSS
W3C-Standard.
unterschiedlichen Browsern gleich dargestellt.
3. Gruppierungen
• HTML- und CSS-Validator:
4. Box-Modell
'
$
5. Validierung
&
• Sie werden deshalb mit hoher Wahrscheinlichkeit in
http://validator.w3.org/
http://www.validome.org/
%
• CSS-Validator:
http://jigsaw.w3.org/css-validator/

Kapitel 17: CSS

Transcription

Documents pareils

Partner-Bereich - ELSA

Cascading Stylesheets (CSS)

TYPO3-Entwickler(m/w) gesucht

Praktikum im Bereich Web-Programmierung (Musterbau)

Browser Grafiktreiber Direct3D (Windows) Grafiktreiber OpenGL ES

Nachbericht im STYLE UP YOUR LIFE!

Anlässe wechseln . . . Stimmungen wechseln . . . . . . mein Friseur

center for security studies

Anlässe wechseln . . . Stimmungen wechseln . . . . . . mein Friseur

Events