Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?
zurück: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell weiter: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten.     Status: Diskussion Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
17. Nov 2007, 16:29
Rufname:
Wohnort: Aachen

Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? - Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?

Nach oben
       

·Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?


Hallo zusammen,

Im vorherigen Kapitel haben wir schon die Selektoren kennen gelernt, die HTML Tags, wie p und h1, formatieren. Diese Elementselektoren orientieren sich an der Hierarchie in einem HTML Dokument. Man kann sich dies wie eine Art Stammbaum vorstellen



HEAD und BODY sind Kinder von HTML, sowie META und TITLE Kinder von HEAD sind.
Die obige Grafik zeigt (vereinfacht) die Hierarchie der einzelnen Elemente innerhalb eines HTML Dokumentes. Eine Stil-Eigenschaft des BODY Elementes wirkt sich auf die Kind-Elemente aus – sie werden vererbt. Allerdings gibt es, wie bei jeder Regel Ausnahmen. Einige Eigenschaften, z.B. margin werden nicht weitervererbt. Aufschluss über die Ausnahmen gibt eine gute Referenz;
z.B. www.css.maninweb.de.

Diese Vererbung kann, richtig eingesetzt, eine Menge Arbeit sparen. So kann im body bereits schon festgelegt werden, welche Schriftfamilie, -farbe und –größe auf das Dokument im Allgemeinen angewendet werden soll. Diese müssen also nicht für jedes Kind-Element von body erneut angegeben werden. Abweichungen werden gesondert deklariert.

Kommen wir noch mal auf die Selektoren zurück. Sie sind unser Handwerkszeug bei der Formatierung einer HTML-Seite. Bisher haben wir nur die Element-Selektoren kennen gelernt. Das sind natürlich noch nicht alle. Im Folgenden sind die wichtigsten aufgeführt:

Universal-Selektor

Der Universal-Selektor wird mit einem Sternchen dargestellt (*) und verknüpft jedes vorhanden Element mit StyleSheetangaben.

*{ font-family: Arial, sans-serif; font-size: 14px;}

In diesem Beispiel wird allen Elementen im Dokument die Schriftart Arial, oder alternativ, eine serifenlose Schriftart mit der Schriftgröße 14 Pixel zugeordnet.

Element-Selektor

Der Element-Selektor verknüpft einen bestimmten HTML-Tag mit einer StyleSheetangabe

p{ background-color: black; color: white;}
Streng dem definierten Wesen des Blindtextes
folgend, fungiere ich als solcher und gebe mich
unverbindlich inhaltsleer.
Hier wird dem Absatz-Tag die Vordergrundfarbe weiß und die Hintergrundfarbe schwarz zugewiesen. Erfolgen keine spezielleren Angaben gilt dies für alle Absätze im Dokument.

Gruppe von Element-Selektoren

Gleiche Formatierungen können auch einer Gruppe von Elementen zugeordnet werden.

h1, h2, h3{ font-weight: bold;}

Die Überschriftgrößen h1, h2, und h3 werden in der Schriftstärke fett dargestellt.

Kontextsensitive Selektoren

Diese Formatierung gilt nur für die angegebene Kombination von Tags.

p b{ color: red;}

Beispiel : Hier ist der Text, der nur das Wort Text rot färbt.

In diesem Beispiel wird ausschließlich ein, in einem Absatz fett ausgezeichneter Bereich die Textfarbe zugewiesen.



Klassen-Selektor

Mit einem Klassen-Selektor wird ein Selektor beliebigen Namens erzeugt. Man kann ihn an ein HTML-Element binden:

p.rot{ color: red;}

p.rot deklariert eine Klasse, die an HTML-Tag Absatz gebunden ist. Damit diese Klasse zum Einsatz kommt wird in HTML dem Absatz die Klasse zugeordnet:



Dieser Absatz wird mit einer roten Schrift dargestellt. Ohne die Klasse ist die Schriftfarbe in Standarteinstellung dargestellt oder folgt einer globaleren CSS Anweisung. p.rot hat ausschließlich Auswirkung auf den Absatz-Tag. In einem anders lautenden Tag, z.B. h1, würde er nicht angewendet werden.

Wird der Element-Selektor vor dem Punkt weggelassen, findet die Klasse in allen anderen Tags, in denen sie aufgerufen wird, ihre Anwendung.





In diesem Beispiel kann die Klasse .rot sowohl auf die Überschrift, als auch auf einen Absatz angewendet werden.

Es ist auch möglich einem HTML-Tag mehrere Klassen zuzuordnen, dabei werden die Klassen mit einem Leerzeichen getrennt aufgeführt:





ID-Selektor

ID-Selektoren beginnen mit dem Gatterzeichen (#) und werden wie eine Klasse erzeugt. Allerdings mit dem gravierenden Unterschied, dass ein ID-Selektor einmalig ist und nur einmal im Dokument verwendet werden darf. Er wird in der Anwendung mit dem id-Attribut aufgerufen. Manch einer kennt dieses Attribut vielleicht aus JavaSript. In der Praxis sähe das so aus:





An dieser Stelle möchte ich, weil oben eingesetzt, auf das div zu sprechen kommen. Im letzten Kapitel habe ich kurz das Inline-Element span erläutert. Es leitet einen allgemeinen Inline-Bereich ein und hat selbst keine Eigenschaften; es kann aber Text und andere Inline-Elemente enthalten. Es ist sozusagen ein kleiner Joker, der fast überall aufgeführt werden kann. Ein wenig anders verhält es sich mit dem div (div = division = Bereich). Es ist ein Block-Element, das mehrere Elemente, wie Text, Grafiken, Tabellen und weitere Block-Elemente enthalten kann. Für sich bewirkt es nichts weiter, als dass es in einer neuen Zeile des Textflusses beginnt. Es ist dazu gedacht mit CSS formatiert zu werden. Es ist unser großer Joker, der uns später im Boxmodell häufiger begegnen wird.

Pseudoformate

Pseudoformate umfassen Pseudoklassen und Pseudoelemente. Pseudoklassen verknüpfen Anweisungen mit einem Element in einem bestimmten Zustand. Das bekannteste Element dürfte der Hyperlink sein. Er kennt folgende Pseudoklassen:

:linkEin nicht besuchter Hyperlink
:visitedEin besuchter Hyperlink
:focusfür Links oder Formularelemente, die den Fokus erhalten, z.B. mit der Tabulator-Taste
:hoverMouseover-Effekt; wenn die Maus über den Link bewegt wird
:activeAktiver Zustand des Hyperlink; wenn der User mit der Maus auf den Link klickt

Wichtig bei der Deklaration der Hyperlink Pseudoklasse ist die Reihenfolge: :link und :visited müssen stets als erstes aufgeführt werden. Würden :hover und :active davor deklariert werden, würden sie ignoriert. Ebenso wird :focus in einigen Browsern nicht ausgeführt, wenn er nicht vor dem :hover aufgeführt ist. Die Pseudoklassen :focus, :hover und :active können auch auf andere Elemente angewendet werden, funktionieren aber in verschiedenen Browsern unterschiedlich.



In diesem Beispiel ist der nicht besuchte Link orange, fährt man mit der Maus drüber wird der Text unterstrichen. Der besuchte Link ist dunkelgrau, der aktive hellgrau. Damit der Text nur beim Mouseover unterstrichen wird, muss die Eigenschaft text-decoration in den anderen Klassen zurückgesetzt werden – nur als kleiner Tipp nebenbei.

Pseudoklassen lassen sich nur zentral deklarieren und sind für das gesamte Dokument gültig. Es ist prinzipiell auch sinnvoll alle Hyperlinks gleich zu formatieren. Jedoch kann eine andere Formatierung für bestimmte Hyperlinks erforderlich sein, z.B. in einer Seitenleiste. Dann kann die Pseudoklasse mit dem Klassen-Selektor kombiniert werden.





Neben den bereits deklarierten Hyperlinks ist in dem obigen Beispiel die Klasse .seite erstellt und an das Element a verknüpft worden. Die Klasse braucht dann nur aufgerufen werden, um eine andere Formatierung der Hyperlinks zu erreichen.

Zu den Pseudoformaten gehören, wie schon oben erwähnt, auch die Pseudoelemente. Diesbezüglich möchte ich nur ein paar aufführen, da die meisten vom Internet Explorer verschiedenster Versionen nur unzureichend oder gar interpretiert werden. Diese Pseudoelemente sind mehr dekorativ und ihr Ursprung liegt im Druckbereich.

:first-linedie erste Textzeile des Elements erhält die CSS-Eigenschaften
:first-letterdas erste Zeichen des Textes erhält die CSS-Eigenschaften





Neben den oben aufgeführten Selektoren gibt es noch Möglichkeiten Selektoren miteinander zu verschachteln, aber diese müssen uns erstmal nicht interessieren – das sind schon etwas höhere Sphären. Im Allgemeinen sind wir den oben genannten schon ganz gut bedient.

Jetzt solltet ihr reif für eine etwas freiere Aufgabe sein. Mit Hilfe einer Referenz und den eben kennen gelernten Selektoren seid ihr sicher in Lage die heutige Übung zu bewältigen. Ich habe für euch eine HTML-Datei vorbereitet; ihr werdet die Stylesheets erstellen, so dass es der beigefügten Grafik entspricht. Achtet darauf, dass eure .css Datei den gleichen Namen hat, wie im HTML-Dokument angegeben, bzw. ändert es dort entsprechend ab. Die richtigen Farben zu treffen, ist bei dieser Übung nicht so wichtig.

Der heutige Gruß geht also wieder an die Tüftler.


Downloads...

Die Übungsdatei könnt ihr hier herunterladen, (~30 Kb)

Gruß

V 1.00 - (C) by Maninweb.de - All rights reserved··

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
maninweb
Microsoft Excel MVP 2014


Verfasst am:
21. Dez 2007, 17:01
Rufname: maninweb
Wohnort: Aachen


AW: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? - AW: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?

Nach oben
       

Dieser Beitrag dient nur zur Sortierung
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 01 - Zielgruppendefinition 1 womaninweb 7448 21. Dez 2007, 17:06
maninweb Kapitel 01 - Zielgruppendefinition
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 2 - Es lebt! 1 womaninweb 6526 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 2 - Es lebt!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML 1 womaninweb 5131 21. Dez 2007, 17:04
maninweb Kapitel 02 - Teil 4 - Der Konformist – XHTML
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 1 - Farbenrausch 2 womaninweb 6249 21. Dez 2007, 17:04
maninweb Kapitel 03 - Teil 1 - Farbenrausch
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 1 womaninweb 5415 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 3 - Stein auf Stein ... 1 womaninweb 5232 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 3 - Stein auf Stein ...
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt 1 womaninweb 4736 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell 1 womaninweb 4910 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 2 womaninweb 4348 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 3 - Feingeschliffen 1 womaninweb 4240 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 3 - Feingeschliffen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell 5 maninweb 4593 16. Sep 2008, 18:19
womaninweb Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 19 maninweb 6755 13. Sep 2008, 20:55
womaninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Microsoft-Excel Diagramme