CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes

Größe: px

Ab Seite anzeigen:

Download "CSS - Formatierung. CSS Formatdefinition außerhalb des style-attributes"

Rosa Gehrig
vor 8 Jahren
Abrufe

1 CSS - Formatierung CSS Formatdefinition außerhalb des style-attributes Definition von Formatierungen im Dokumenten-Kopf oder externer Datei Festlegung von CSS-Eigenschaften für HTML-Elemente Syntax: Selektor { CSS-Eigenschaft:Wert; Selektoren: HTML-Element-Name Klassen-Name ID-Name

..... oder externer Datei Festlegung von CSS-Eigenschaften für

2 Wozu Selektoren? Formatierung über das style-attribut ist eindeutig HTML-Element, in dem das style-attribut verwendet wird Definition in HTML-Kopf oder externer Datei Ohne Selektoren keine Zuordnung zu Elementen möglich Diese wird durch Selektoren hergestellt Selektor gibt an, welche Elemente von der Formatierung betroffen sind

style-attribut verwendet wird Definition in HTML-Kopf oder externer Datei Ohne

3 Element-Namen als Selektor Formatierungen für Elemente Trennung von Elementen durch Komma Vererbungsprinzip: Formatierungen ergänzen sich body, h1, h2, h3, h4, div, p, blockquote, th, td, li { font-family:arial,sans-serif; color:black; background-color:white; h1, h2, h3, h4 { color:rgb(195,35,35); h1, h2 { letter-spacing:1px; h1 { font-size:20px; font-weight:normal; margin-top:0px; margin-bottom:30px; padding-bottom:10px; border-bottom:rgb(195,35,35) 4px double

color:black; background-color:white; h1, h2, h3, h4 { color:rgb(195,35,35); h1, h2 { letter-spacing:1px; h1 {

4 Element-Namen als Selektor Formatierungen für verschachtelte Elemente Trennung von Elementen durch Leerzeichen Schema Element_1 Element_2 { Formatdefinitionen Dabei: Element_1 ist Eltern-Element Für Element_2 gelten die Formatdefinitionen

$Leerzeichen Schema Element_1 Element_2 { Formatdefinitionen$

5 Element-Namen als Selektor Formatierungen für verschachtelte Elemente Trennung von Elementen durch Leerzeichen Formatierung betrifft nur Elemente, die Kind-Elemente sind Bsp.: code ist Kind Element von h1, nicht von p <html> <head> <style type="text/css"> h1 { color:rgb(195,35,35); font-family:arial,sans-serif; h1 code { color:rgb(35,35,195); font-family:arial,sans-serif; </style> <title>formatdefinitionen</title> </head> <body> <h1>die CSS-Eigenschaft <code>font-family</code></h1> <p>die Eigenschaft <code>font-family</code> dient zur Bestimmung der Schriftart.</p> </body> </html>

: code ist Kind Element von h1, nicht von p <html> <head> <style type="text/css"> h1 { color:rgb(195,35,35); font-family:arial,sans-serif; h1 code

6 Element-Namen als Selektor Formatierungen für verschachtelte Elemente Trennung von Elementen durch Leerzeichen Formatierung betrifft nur Elemente, die Kind-Elemente sind Bsp.: code ist Kind Element von h1, nicht von p

Leerzeichen Formatierung betrifft nur Elemente, die

7 Element-Namen als Selektor Formatierungen für verschachtelte Elemente Trennung von Elementen durch Leerzeichen Schema Element_1 Element_2 { Formatdefinitionen Dabei: Element_1 ist Eltern-Element Für Element_2 gelten die Formatdefinitionen Was bedeuten folgende Verschachtelungen? h1, h2 code h1 code,pre h1, h2 code,pre

Dabei: Element_1 ist Eltern-Element Für Element_2 gelten die Formatdefinitionen

8 Erweiterungen in CSS2 für verschachtelte Elemente Element_1 Element_2 { Formatdefinitionen Gilt für Kind in beliebiger Tiefe Element_1 > Element_2 { Formatdefinitionen Gilt für direktes Kind Element_1 * Element_2 { Formatdefinitionen Gilt für Kinder, mit mindestens einer Ebene Abstand Element_1 + Element_2 { Formatdefinitionen Gilt für Elemente, die direkt auf Element_1 folgen Keine Verschachtelung

$* Element_2 { Formatdefinitionen Gilt für Kinder, mit mindestens einer Ebene Abstand Element_1 +$

9 Element-Klassen Zuordnung zu einer Klasse von Elementen class-attribut z.b. Klasse navigation, footer CSS-Referenzierung mittels. (Punkt) Element-IDs Festlegung einer dokumentweit eindeutigen ID id-attribut z.b. news_link, sports_link,... CSS-Referenzierung mittels # (Gatterzeichen) Namen für Klassen und IDs sind Case-Sensitive

(Punkt) Element-IDs Festlegung einer dokumentweit eindeutigen ID id-attribu

10 Attribute Zuordnung zu Element-Attributen z.b. Attribut lang CSS-Referenzierung mittels [attribute_name=attribute_value] Pseudo-Elemente Übung

Ähnliche Dokumente

Webseiten erstellen für Einsteiger

Daniel Mies Webseiten erstellen für Einsteiger Schritt für Schritt zur eigenen Website Galileo Press Vorbemerkungen 15 1 Vordem Start 21 1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? 21