CSS EINFÜHRUNG - luis.uni- · PDF fileSeite 6 November 2010 Vorteile CSS trennt Struktur...

Seite 1

CSS EINFÜHRUNG

Cascading StyleSheets

November 2010

Seite 2

Themen

Einführung

Syntax

Stylesheets einbinden

Alternative Stylesheets

Texteigenschaften

Positionieren

Farben

Hintergrund

Pseudoklassen

Selektoren (Vererbung)

P. Rücker November 2010

Seite 3

Literatur

CSS Cascading Style Sheet; Level 2

http://de.selfhtml.org

Kursmaterial CSS

November 2010

http://de.selfhtml.org/

Seite 4

Einführung

CSS ist eine Formatierungssprache, die es Autoren und

Benutzern gestattet, Formatierungen (zum Beispiel Schriften,

Abstände, Rahmen, Hintergrundfarben, Positionierung) von

strukturierten Dokumenten (z.B. HTML-Dokumenten)

durchzuführen. Mit der Trennung der Präsentation eines

Dokuments vom Inhalt des Dokuments vereinfacht CSS die

Erfassung von Web-Dokumenten und die Verwaltung von

Sites. CSS ist wie HTML selbst ein softwareunabhängiger

Textcode und wird vom W3C normiert.

W3C (World Wide Web Consortium) ist das Gremium zur Standisierung der Vereinbarungen für Web-Seiten

(Technische Spezifikationen und Richtlinien)

November 2010

Seite 5

Cascading Style Sheets

Formatierung und Positionierung von HTML und XHTML-

Elementen.

Durch die Kombination von HTML und Cascading Style

Sheets (CSS / Stilvorlagen) werden die Möglichkeiten der

Seitengestaltung im Internet deutlich erweitert.

XHTML Extensible HyperText Markup Language – erweiterbare HTML (ist genauer, z.B.

Elementnamen nur klein, mit Start- u. End-Tag, Attributwert in Anführungszeichen)

November 2010

Seite 6

November 2010

Vorteile

CSS trennt Struktur von Gestaltung

CSS bringt übersichtlichen HTML-Code

CSS bietet Gestaltung nicht nur für den Bildschirm (sondern

auch zum Drucken)

CSS bietet mehr gestalterische Möglichkeiten

CSS ermöglicht schnelle Designänderungen

CSS ermöglicht barrierefreiere Seiten

CSS verringert die Hosting- und Traffic-Kosten CSS

verringert die Wartungskosten

Seite 7

Nachteile

Stylesheets werden nur von neueren Browsern unterstützt

CSS-Seiten werden manchmal von den Browsern

unterschiedlich dargestellt, wie z.B. Positionierung der

Abschnitte oder Hintergrundgrafiken

November 2010

Seite 8

Version

Version 2 (CSS2) seit 1998

wird vom Internet Explorer 6.x eingebunden,

liefert aber teilweise andere Ergebnisse

Internet Exporer 7.x bindet CSS2 vollständig ein

Firefox 3.x ebenfalls vollständig

Version 3 (CSS3) seit 2001

Umsetzung ist noch nicht vollständig erfolgt

November 2010

Seite 9

Elemente verschachteln

Elemente sind hierarchisch strukturiert. Untergeordnete

Elemente müssen vor dem übergeordneten Elementen

geschlossen werden. Die Elemente dürfen sich nicht

überlappen.

<p><bold>Die Kurse></bold></p> richtig

<p><bold>Die Kurse></p></bold> falsch

November 2010

Seite 10

Elemente schließen

Elemente haben ein End-Tag

<p><strong>Die Kurse</strong></p>

In XHTML müssen End-Tags gesetzt sein

November 2010

Seite 12

CSS im Head-Bereich definiert

<html>

<head>

<title>Titel der Datei</title>

<style type = "text/css">



</style>

</head>

<body>

</body>

</html>

November 2010

Seite 13

Beispiel 1

<html>

<head>



<!–-

h1 { font-family: Verdana, Arial, sans-serif;

font-size: 24pt;

color: green;

background-color: #DDDD00;

text-indent: 1em; }

.

.

.

p { font-family: "Times New Roman";

font-size:12pt;

}

-->

</style>

</head>

<body>

<h1>Stylesheets</h1>

<p>Hier folgt der Text mit der

Absatzformatierung.</p>

</body>

</html>

November 2010

Seite 15

Stylesheets einbinden

Auf fünf verschiedene Arten können Stylesheets eingebunden

werden:

Unterschied: Die Stylesheets, die über <link> übernommen werden, sind optional und können vom Benutzer

überschrieben werden. Die importierten werden grundsätzlich implementiert.

November 2010

Als Definition im Kopf eines HTML-

Dokuments

<style type="text/css">

in einer separaten Datei <link rel="">

als importierte Definition @import "dateiname.css"

als Definition für ein bestimmtes

Element

style=""

als Definition für einen Abschnitt <span style="">

Seite 16

Stylesheets in HTML einbetten

<head>


h1 { font family: Arial, sans-serif;

font-size: 20 px;

color: red;

}

p { font family: Times New Roman, ;

font-size: 18px;

color: #000000;

text-indent: 1em

}

</style>

</head>

November 2010

Seite 17

Stylesheet lokal einbinden

<h2 style="font-family: Arial, Trebuchet, sans-serif;

font-size: 20px;

color: red;">

Der Panther

</h2>

Definition der Formatierungen sind direkt beim Element

November 2010

Seite 18

Formate zentral in separater CSS-Datei definieren

<html>

<head>


<link rel="stylesheet" type="text/css" href="formate.css">




</style>

</head>

<body>

</body>

</html>

November 2010

Seite 19

Verweis auf die externe Datei

<head>

<link type="text/css" rel="stylesheet„ href="styledatei.css">

</head>

link im Kopfbereich einer HTML-Datei weißt auf eine externe Datei hin.

type spezifiziert den Inhalt der Datei als Stylesheet

rel stellt den Bezug zu den Stylesheets her

href Pfad zur Datei

Das Stylesheet kann mit jeder beliebigen Seite verlinkt werden

Zenrale Verwaltung der Formatdefinitionen

keine HTML-Tags

November 2010

Seite 20

Stylesheet-Datei

h1 { font-family: Times, 'Times New Roman', serif;

font-size: 28pt;

color: black;

}

p { font-family: Arial, Trebuchet, sans-serif;

font-size: 14pt;

color: FF0000;

text-indent: 1em

}

Die Textdateien erhalten die Endung ".css"

November 2010

Seite 21

Aufgabe 3

Erstellen Sie eine externe CSS-Datei mit der Endung .css. Folgende Formatanweisungen sollen hier

definiert werden. In der HTML-Datei vorlage-2.html wird dann diese Datei aufgerufen und die

Formatierungen werden entsprechend der CSS-Datei ausgeführt.

Hierzu haben Sie eine Datei mit einer Überschrift h1, h2 und einer Hintergrundfarbe definiert.

body { background-color: gray;/* Hintergrundfarbe: grau */

font-size: 26px;/* Schriftgröße */

}

h1 { font-style: italic;

font-size: 28px;

font-family: Arial, Trebuchet, sans-serif;

color: red;

}


font-size: 1.5em;

}

November 2010

Seite 22

Block-Element <div>

Mehrere Elemente wie Text, Grafiken, Tabellen usw. können in

einem gemeinsamen Bereich, Block-Element, eingeschlossen

werden

mit div (= division = Bereich) wird ein Bereich eingeleitet

November 2010

Seite 23

Beispiel

body { background-color: #EFEFEF;/* Hintergrundfarbe: hellgrau */

font-size: 26px;/* Schriftgröße */

color: blue;/* Schriftfarbe */

font-family: Arial, Trebuchet, sans-serif;/* Schriftart */

}

h1 { font-style: italic;/* Kursivschrift */

font-size: .8em;

}


font-size: .6em;

}

div { color: black;

font-size: .4em;

}

November 2010

div

Seite 24

Alternative Stylesheets

Alternative Stylesheets anbieten. Im Browser unter Ansicht die Stile

ansehen.

<link rel="alternate stylesheet"

type="text/css" href="datei1.css"

title="Auswahl1">

November 2010

Seite 25

Alternativen

<link rel="stylesheet" type="text/css" href="style_A.css"

title="Standard">

<link rel="alternate stylesheet" type="text/css"

href="style_B.css" title="Serifenschrift">

<link rel="alternate stylesheet" type="text/css"

href="style_C.css" title="Serifenlose Schrift">

November 2010

Seite 26

Selektoren

Die nachfolgende Regel setzt sich aus dem Selektor, der

die gewünschten Elemente selektiert (auswählt) und einer

Eigenschaft sowie dem ihr zugewiesenen Wert

zusammen:

Selektor { Eigenschaft: Wert; }

Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; }

November 2010

Seite 27

Eigenschaften zur Schrift

Bezeichnung Befehl Beispiel

Schriftart Schriftart { font-family: Georgia,

Times, serif; }

Schriftgröße font-size { font-size: 12pt }

Schriftstil Neigung { font-style: italic }

Schriftstärke Dünn bis fett { font-weight: bold }

Kapitälchen Kleine

Großbuchstaben { font-variant: small-caps; }

Angabe in

Kurzform

font { font: 12pt Verdana, sans-

serif; }

November 2010

Seite 28

Schriftart

{ font-family: Times, 'Times New Roman', serif }

serif = eine Schriftart mit Serifen

sans-serif = eine Schriftart ohne Serifen

monospace = eine Schriftart mit gleicher Buchstabenbreite

u.a.

November 2010

Seite 29

Schriftgröße

In HTML waren nur sieben verschiedene Schriftgrößen erlaubt. In CSS geht es

pixelgenau

{ font-size: Wert Maßeinheit }

Absolute Maßeinheiten : px, mm, cm, in, pt, pc

Relative Maßeinheiten: em, ex, %

November 2010

Seite 30

Schriftstil

Zur Schriftneigung zählen:

italic = Schriftstil kursiv

oblique = Schriftstil kursiv

normal = normaler Schriftstil

November 2010

Seite 31

Schriftstärke

HTML-Tags <b> oder <strong> zum hervorheben des Textes, mit CSS sind

mehrere Abstufungen möglich:

normal = normal

bold = fett

100 -900 in 100er Schritten (von dünn bis fett)

bolder

lighter

November 2010

Seite 32

Inline-Element <span>

kann Text und andere Inline-Elemente enthalten aber besitzt

selbst keine Eigenschaften.

November 2010

<h1 style="font-size:200%">

<span style="color:gray">A</span>

<span style="color:yellow">B</span>

<span style="color:lime">C</span>

</h1>

Seite 33

Abschnitte formatieren

<span style="Deklarationen"> … </span>

Nur für diesen Abschnitt gilt diese Deklaration

Beispiel

<body>

<p>Abschnitt mit Formatierungen

<span style="font-size:30pt ; color:blue;">und jetzt

geht’s mit blau weiter </span> und dann wieder wie

gehabt.

</p>

</body>

November 2010

Seite 35

Absolute Werte

Absoluter Wert Einheit Umrechnung

Zoll o. inch in 25,4 mm

Zentimeter cm

Millimeter mm

Punkt pt 1/72 Zoll = 0,353 mm

Pixel px

Pica pc 12 pt = 1/6 Zoll 0 4,23

November 2010

Seite 36

Relative Werte

Relativer Wert Nutzung

em Für x-fache Größe des übergeordneten Elements (1 em =

100%

ex Schriftgrößen in Abhängigkeit der x-Höhe

% Breite eines Elements bestimmen. Proportionalen

Zeilenabstand anpassen

November 2010

Seite 37

Texteigenschaften

Bezeichnung Befehl Wert

Ausrichtung, horizontal align left, right, center, justify

" , vertikal vertical-align top, bottom, text-top, text-bottom,

baseline, middle, sub, super, Prozent-

o. Zahlenangabe

Groß- u. Kleinschreibung text-transform uppercase, lowercase, capitalize, none

Text hervorheben text-decoration underline, overline, line-through,

blink, none

Zeilenabstand line-height normal, Maßeinheit in px, prozentuale

Angabe

Wortzwischenraum word-spacing normal, Maßeinheit in px, keine

prozentuale Angabe

Zeichenabstand letter-spacing normal, Zahlenangaben, …

keine prozentualen Angaben

Text einrücken text-indent Zahlen- u. Prozentangaben

November 2010

Seite 38

Textabstände

Zeichenabstand: letter-spacing: 50px

Wortzwischenraum: word-spacing: 20px

h1 { letter-spacing: 50px; }

p { text-transform: uppercase; word-spacing: 20px;}

November 2010

Seite 39

Block-Element <div>

Mehrere Elemente wie Text, Grafiken, Tabellen usw.

können in einem gemeinsamen Bereich, Block-Element,

eingeschlossen werden

mit div (= division = Bereich) wird ein Bereich

eingeleitet

November 2010

Seite 40

Block-Element

November 2010

<div align="center">

<h1>Block zentriert</h1>

<ul>

<li>alles zentriert</li>

<li>Eintrag A</li>

<li>Eintrag B</li>

</ul>

</div>

<div align="right">

<h1>Textblock rechts</h1>

<ul>

<li>alles rechts am Rand

</li>

<li>Eintrag 1</li>

<li>Eintrag 2</li>

</ul>

</div>

Seite 41

Box-Model

November 2010

Außenabstand

Rahmen

Innenabstand

padding

border

margin

width

Breite

Inhalt

Höh

e

he

igh

t

Jedes Element in einer HTML-Datei erhält eine Begrenzung,

in Form eines Rechtecks.

Das Rechteck enthält den Inhalt mit einem Innenabstand zum Rahmen.

Der Rahmen ist standardmäßig

ausgeblendet (border-style:none)

so breit wie das Browserfenster

Jedes Rechteck kann mit einem Abstand zu einem anderen Rechteck bekommen

Das Rechteck kann eine Hintergrundfarbe erhalten

Seite 42

Beispiel: Rahmen-Beispiel.html

body { font-size: 1em;

font-family: Arial,

Trebuchet, sans-serif;}

div { border: 2px solid #000;

padding: 10px;

margin: 30px; }

span { font-size: 3em;

text-indent:0em;

border: 2px solid green;

padding: 10px;

margin: 30px; }

p { font-size: 1.5em;

border: 2px solid green;

padding: 10px;

margin: .75em 30px; }

</style>

</head>

<body>

<div><img src="Herbstlaub.jpg"

alt="Blätter">

</div>

<div>Im Herbst</div>

<div><p>Der schöne Sommer ging von

hinnen,<br>

Der Herbst, der reiche, zog ins

Land.<br>

Nun weben all die guten Spinnen<br>

So manches feine

Festgewand..</p></div>

November 2010

Seite 44

Positionieren

November 2010




</style>

</head>

<body>

<h2>Positionieren relativ und absolut</h2>

<p>Positioniert mit Wert:static:

<span style="position: static; top:100px;left:200px;">postition:static; oben:100 Pixel; links: 200 Pixel</span>

</p>

<p>Position mit relativem Wert:

<span style="position: relative; top:100px;left:200px;">postition:relativ; oben:100 Pixel; links: 200 Pixel</span>

</p>

<p>Position mit absolutem Wert:

<span style="position: absolute; top:100px;left:200px;">postition:absolut; oben:100 Pixel; links: 200 Pixel</span>

</p>

<p>Positioniert mit Wert:fixed:

<span style="position: fixed; bottom:100px;left:100px;">postition:absolut; unten:100 Pixel; links: 50 Pixel</span>

</p

Seite 45

Absolute und relative Positionierung

November 2010

Seite 46

Positionieren

position: static keine spezielle Positionierung, normaler Elementfluss

(Normaleinstellung)

position: absolute Abstände werden vom Webseitenrand definiert

position: relative relative Position zum eigentlichen Text

position: fixed Startposition bezieht sich auf den Browserrand,

bleibt beim Scrollen stehen

November 2010

Seite 48

Positionierung von Text und Grafiken

November 2010

<p>Garten und Kräuter</p>

<span style="position: relative; left:20px;">

<p style="border-color:blue; border-width:2px;

border-style: solid;

padding:4px; width:70px;">Steingarten</p>

<img src="steingarten.jpg" width="50%"

style="position: relative; top:30px; left:180px;">

</span>

Seite 49

Textumfluss

November 2010


div {

float:left;

margin-right:20px; margin-bottom:5px;

border:solid 1px gray;}

</style>

<div><img src="steingarten.jpg" width="20%"></div>

<p style="font-size:80%">

Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden.

An Steinstufen sind blaue Blumen gepflanzt, ....





</p>

<p style="clear:left">hier ist der Textumfluss ausgeschaltet</p>

Seite 50

Text umfließen mit float

<body>

<div style="float:left; margin-right:20px; margin-bottom:20px;

border:solid 1px red; text-align:center">

Kapitel<br>

<span style="font-family:Algerian,serif; font-size:96px;

color:blue">

1 </span></div>

<p style="font-size:120%">Hier beginnt das erste Kapitel ...</p>

<p style="clear:left">Nun gehts los ......</p>

</body>

November 2010

Seite 51

Text umfließen ohne float

November 2010

<h1><img src="steingarten.jpg" width="50%" align="left" vspace="10"

hspace="20" alt="Pflanzen">Steingärten</h1>

<p>Auf diesem Bild sollte ein Ausschnitt eines Steingartens gezeigt werden.





An Steinstufen sind blaue Blumen gepflanzt, .....<br clear="all"></p>

richtige Darstellung

im Internet Explorer

wie auch im Firefox

Seite 52

Farben

16 Standardfarben

November 2010

Seite 53

Farben

Hexadezimalsystem

0 1 2 3 4 5 6 7 8 9 A B C D E F

16 verschiedene Zustände (0 – 15)

für einen Farbwert stehen jeweils 2 Stellen zur

Verfügung, d.h. 16 x 16 ergibt 256 Möglichkeiten

#

November 2010

A0 C0 3F

Seite 54

Farbwerte durch Angabe von Hexadezimalwerten

Hex RGB

color: #000000 steht für schwarz 0,0,0

color: #FFFFFF steht für weiß 255,255,255

color: #FF0000 steht für rot 255,0,0

color: #00509B LUH-Blau des Logos 0,80,155

November 2010

Seite 55

RGB-Farbmodell

RGB-Farbraum ist ein Maßraum in dem eine Untermenge aller

wahrnehmbaren Farben durch drei Koordinaten definiert werden.

Additives Farbmodell (Lichtmischung)

Monitore

Schwarz: 0,0,0

Weiß: 255,255,255

Rot: 255,0,0

November 2010

Quelle: Wikipedia

Seite 56

Farben

Dezimalwerte

Werte zwischen 0 und 255

rgb( , , )

entspricht dieser Textfarbe

November 2010

255 128 0

Seite 57

Hintergründe entwerfen

Beispiel-hintergrund_in_Richtungen.html

unterschiedliche Aufteilungen des Hintergrunds

hierzu jeweils nur eine Einstellung entkommentieren

November 2010

Seite 58

Tabelle mit Hintergrund

November 2010

table

{

background-image:url("hintergruende/img_1.gif");

background-repeat:repeat;

border:4px black solid;

}

tr,td {border:1px gray solid;}

Seite 59

Pseudoklassen

Pseudoklassen beschreiben einen Zustand oder eine Eigenschaft

eines Elements

sie werden an den Elementnamen bzw. die vorhergende

Klassifizierung angehängt

z.B. Element <a> für Links

Trennzeichen zwischen der Bezeichnung der Pseudoklasse und

dem Elementnamen ist der Doppelpunkt :

z. B. a:hover {

color: black;

text-decoration: underline;

}

November 2010

Seite 60

Reihenfolge der Pseudoklassen

:link Unbesuchte Hyperlinks

:visited Für Verweise zu bereits besuchten Seiten

:hover Für Verweise, die aktivert werden während

die Maus drüber fährt

:active Aktive, gerade angeklickte Links

:focus Wird mit der Tabulator-Taste angesprochen.

November 2010

Seite 62

Beispiel Buttons

Datei buttons.html

ruft buttons.css auf

November 2010

Seite 65

Selektoren

Beispiel: Container

body Vorfahre von h1 und p

h1 und p sind Kinder von body

h1, p, u, b, i sind Nachkommen

von body

p ist Nachbar von h1

u und b sind Nachfahren von p

u ist direktes Kind von p

b ist Kind von u

November 2010

Seite 66

Selektoren

Die nachfolgende Regel setzt sich aus dem Selektor, der die

gewünschten Elemente selektiert (auswählt) und einer Eigenschaft

sowie dem ihr zugewiesenen Wert zusammen:

Selektor { Eigenschaft: Wert; }

Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; }

November 2010

Seite 67

Klassenselektoren

Der am häufigsten eingesetzte Selektor. Über einen Klassennamen

können Formatierungen einem einzelnen Element zugewiesen

werden. Die Definition beginnt mit einem . (Punkt)

.class

.Klassenname { Eigenschaft: Wert }

.rot { color: red }

Der Klassenselektor kann auch an einen bestimmten Tag gebunden

werden

Tag.Klassenname { Eigenschaft: Wert }

p.rot { color: red }

November 2010

Seite 68

Beispiel

<p class="back1" style="font-size:30pt; font-weight:

bold;">Hintergrundbilder</p>

Auszug aus der css-Datei:

.back1 { background-image:url(hintergruende/img_1.gif) }



November 2010

Seite 69

Beispiel: Klassen.html



</style>

</head>

<body>

<h1>Klassen in Stylesheets</h1>

<p class="hintergrund">Absatz mit Hintergrund durch Klasse</p>

<p class="blau">blaue Schriftfarbe durch Klassendefinition</p>

<p class="kursiv">kursive Schrift im Absatz</p>

<h1 class="kursiv">kursive Schrift in der Überschrift</h1>

November 2010

Seite 70

Selektoren gruppieren

h2, h3 { font-family:"Times New Roman";

font-size:28px;

color:blue;

}

p { color: black }

h2 { color: black }

h1 { color: black } p,h2,h3,h1 { color: black }

h3 { color: black }

November 2010

Seite 71

Universalselektor

November 2010

Selektor Bedeutung Beispiel

. Eine Klasse .myclass {color:blue;}

# ID-Individuelle Definition #myid

{background-color:gray}

* Universalselektor *{ color:black;}

>

Kind-Selektor

Mit dem Zeichen > wird in diesem Selektor

fefstgelegt, dass p-Elemente, sofern sie innerhalb

eines div-Bereichs vorkommen, nur dann die

Textfarbe blau (color:blue) erhalten, wenn das p-

Element in dieser Form vorkommt:

<div><p></p></div>, also eine Ebene unterhalb des div-Elements

div > p { color:blue; }

+

Benachbarte Elemente

Mit diesem Zeichen wird in diesem Selektor

festgelegt, dass p-Elemente, die unmittelbar auf

ein div-Element hin folgen, einen Abstand von

100 Pixeln nach oben hin erhalten (margin-top:100px;).

div + p { margin-top:100px; }

Seite 72

Vererbung

Die Formatierungseigenschaften eines bestimmten HTML-

Elements werden auf die Unterelemente weitergegeben, vererbt. <body>

<h1>(schwarz)</h1>

<p> (schwarz)

<b>(schwarz)</b>

</p>

<ol>(blau)

<li>(blau)>/li>

<li>(blau)>/li>

</ol>

<p>(schwarz)</p>

</body>

November 2010

Seite 75

Nachfahre-Selektor

Ein Nachfahre-Selektor kann angewendet werden, wenn mehrere

Selektoren zur selben Zeit auftreten.

Selektor1 Selektor2 … { Eigenschaft: Wert }

November 2010

Seite 76

Nachfahre

<style type ="text/css">



</style>

</head>

<body>

<h1>Die Nachfahren</h1>

<p>Dies ist ein Text, der die Formatierungen verdeutlichen

soll.</p>

<p><u><b> Dieser fett formatierte Text wird rot eingefärbt</b></u>

<i>und dieser kursive Text wird automatisch grün dargestellt</i>.

Dieser Text ist wieder schwarz.</p>

November 2010

wenn p und b gleichzeitig auftreten

Seite 77

Kind-Selektor

Ähnlich wie beim Nachfahre-Selektor.

Unterschied: die entsprechenden Tags müssen direkte Nachfolger

des vorherigen Tags sein.

Selektor1>Selektor2 … { Eigenschaft: Wert }

November 2010

Seite 78

Beispiel: Kind-Beispiel.html



</style>

</head>

<body>

<h1>Der Kind-Selektor in Stylesheets</h1>

<p>Der Text beginnt in diesem Absatz mit der body-Einstellung,

Farbe: grau.

dann <b>folgt durch b wird der Text fett und da direkt nach p

erhält der Text die Farbe blau </b>

<p><u><b>hier wird nur unterstrichen durch u, es erfolgt aber keine

Einfärbung mehr da b nicht direkt auf p folgt.</b></u></p>

November 2010

Seite 80

Selektoren für benachbarte Elemente

Ein Selektor folgt direkt, unmittelbar einem Selektor (Nachbar)

Selektor1+Selektor2 … { Eigenschaft: Wert }

h1+p { background-color: gray; }

Der Absatz bekommt einen grauen Hintergrund wenn er direkt nach der

Überschrift h1 folgt

November 2010

Seite 81

ID-Selektor

Unterschied zu den Klassenselektoren: kommt nur einmal pro Webseite vor

#ID { Eigenschaft: Wert }

Tag#ID { Eigenschaft: Wert }

<div id="Titeldaten">

<p>

Autor: Rilke

<img src="panther.jpg" alt="Panther-Rilke">

</p>

</div>

<div id="Gedicht">

</div>

November 2010

Seite 82

Beispiel ID


p { font-family: Arial, Trebuchet, sans-serif;

font-size: 16px;

color: #000000;

}

.classTitle { font-weight: bold;}

p#idAbsatz { color: #FF0000;}

</style>

</head>

<body>

<h1>Arbeitsweise von <i>Klassen</i></h1>

<h2 class="classTitle">Diese Überschrift nutzt eine Klasse</h2>

<p id="idAbsatz">Dieser Satz nutzt zum Formatieren IDs.</p>

November 2010

CSS EINFÜHRUNG - luis.uni- · PDF fileSeite 6 November 2010 Vorteile CSS trennt Struktur...

Documents

Transcript of CSS EINFÜHRUNG - luis.uni- · PDF fileSeite 6 November 2010 Vorteile CSS trennt Struktur...