Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
zurück: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! weiter: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? 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:
24. Nov 2007, 13:27
Rufname:
Wohnort: Aachen

Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell - Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell

Nach oben
       

·Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten und das Boxmodell


Hallo zusammen,

Dies wird nun das abschließende Kapitel in der CSS-Theorie. Danach werden wir uns wieder der praktischen Umsetzung unserer Beispielseite zuwenden - die "Handwerker" unter euch dürfen also aufatmen. Diesmal beschäftigen wir uns mit der Kaskadierung, dem Boxmodell und einigen Tipps zur Vererbung in CSS.

Kaskadierung

Was passiert eigentlich, wenn ein oder mehrere Elemente unterschiedliche Werte durch unterschiedliche Stylesheets zugewiesen bekommen? Welche Formatierung wird ausgeführt? "Was für ein Depp, wenn der nicht aufpasst!", wird sich jetzt vielleicht manch Einer denken. Dieses Szenario kann durchaus auch dem Geübtesten passieren, nicht nur durch Unachtsamkeit, sondern auch weil die Gegebenheiten gelegentlich so sind.

Ein HTML-Dokument ohne Styleangaben und ohne Referenz auf eine CSS Datei wird im Browser trotzdem in einer bestimmten Form dargestellt. Das liegt daran, dass jeder Browser ein Basis-Stylesheet besitzt, das er in diesem Fall ausführt. Auch der Benutzer kann durch ein so genanntes Benutzer-Stylesheet im Browser das Erscheinungsbild des Dokuments verändern, z.B. durch eigene Schriftgröße und Farbkontrast. Wenn wir nun in unserem HTML-Dokument Stylesheets einbinden, ergänzen oder überschreiben wir die browserseitigen Angaben. Die so definierten Formatierungen nennt man Autoren-Stylesheets. In einem Autoren-Stylesheet können sich, bei aller Sorgfalt, auch mal widersprüchliche Angaben einschleichen.

Ursprung und Priorität

Wie geht nun der Browser damit um? Zunächst ermittelt der Browser von oben nach unten, ob ein Element eine CSS-Formatierung besitzt. Dies führt er für das Browser-, Benutzer- und Autoren-Stylesheet durch. Findet er eine zugeordnete Formatierung, wendet er sie an. Danach wird das nächstfolgende Element auf eine Formatierung überprüft. Findet er in unterschiedlichen Stylesheets verschieden lautende Angaben, wird anschließend deren Ursprung und Priorität ermittelt. Dabei sortiert der Browser die Angaben in folgender Reihenfolge mit absteigender Wichtigkeit:

- Benutzer-Stylesheet mit !important
- Autoren-Stylesheet mit !important
- Autoren-Stylesheet
- Benutzer-Stylesheet
- Browser-Stylesheet

Die !important Regel

Die Auszeichnung einer CSS Anweisung mit !important überschreibt gleiche Auszeichnungen für ein Element. !important wird mit einem Leerzeichen hinter dem Wert notiert.

h1{ font-size: 16px;}
h1{ font-size: 1.4em !important;}


In diesem Beispiel wird die Schriftgröße von 16 Pixel für h1 mit 1,4 em überschrieben. Der Einsatz von !important ist sowohl im Autoren- als auch im Benutzer-Stysheet möglich. Mit CSS 2 ist die Wichtigkeit der Benutzer-Stylesheets an erster Stelle gesetzt worden (In CSS 1 hatte das Autoren-Stylesheet die höchste Wichtigkeit). Ich nehme mal an, dass der Barrierefreiheit eine größere Priorität gegeben werden sollte.

Spezifität

Werden darüber hinaus in einem Stylesheet gleicher Wichtigkeit mehrere gleich lautende Angaben für ein Element gefunden, sortiert der Browser ihre Spezifität. Alle Selektoren werden in ihre Bestandteile zerlegt und in Kategorien unterteilt:

Aenthält den Wert 1, wenn dem Element direkt per style-Attribut CSS Eigenschaften
zugewiesen wurden - style="…" in HTML
Bentspricht der Anzahl der ID-Attribute - #id
Centspricht der Anzahl der selektierten anderen Attribute (z.B. Klassen) und
Pseudoklassen - .klasse, :pseudoklasse
Dentspricht der Anzahl der selektierten Elementnamen und
Pseudoelemente - :pseudoelement

SelektorABCDSpezifität
style="…"10001000
#bereich01000100
p.red00110011
p:first-child00020002
p00010001
*00000000

Wie ihr an der Tabelle sehen könnt, findet der Universal-Selektor * keine Berücksichtigung, ebenso wie HTML Formatierungen. Diese Spezifizierung ist zugegebener Maßen ein wenig kompliziert, und wer mag, kann sie erstmal rein informativ hinnehmen.

Sollte es nun immer noch zu ungeklärten gleich lautenden Angaben kommen, wird’s wieder einfach: Die letzte Angabe hat Vorrang zu den vorhergehenden. Dies gilt auch für externe CSS Anweisungen. Angaben im head Bereich des Dokuments überschreiben verlinkte, bzw. importierte CSS Anweisungen; Ein Element mit direkter style Angabe überschreibt die Anweisung aus dem head.

Das Boxmodell

Das hört sich jetzt komplizierter an, als es ist. Im Grunde heißt es nur, dass alle Elemente in CSS als Rechtecke behandelt werden. Entweder durch sich selbst definiert oder mit Angaben zur Höhe (height) und Breite (width). Die folgende Grafik veranschaulicht das Prinzip:



CSS unterscheidet grob zwei Arten von Elementen: Blockelemente (block-level elements) und eingebundene Elemente (inline elements). Blockelemente beginnen stets in einer neuen Zeile, ihnen nachfolgende Elemente ebenfalls. Sie erzeugen einen Absatz. Dazu gehören der Absatz Tag p, die Überschriften Tags h1 bis h6, Listen wie ul und ol und das Bereichs-Tag div.

Eingebundene Elemente stehen im normalen Textfluss. Zu ihnen gehören der Anker a, Textauszeichnungen wie b, u und i, Bilder img und das Inline-Element span. Eine Besonderheit ist das Listenelement li, das zwar auch einen Kasten definiert, aber dessen Aufzählungszeichen außerhalb davon liegen können.

Die tatsächliche Breite und Höhe setzt sich nach CSS Regel wie folgt zusammen:Linker Außenabstand + linke Rahmenbreite + linker Innenabstand + Breite des Inhalts + rechter Innenabstand + rechte Rahmenbreite + rechter Außenabstand. Für die Höhe errechnet sich das entsprechend der Höhen der Abstände, Inhalt und Rahmen. Beispiel...

#div01{
width: 200px;
height: 300px;
margin-top: 10px;
padding-left: 15px;
border: 2px solid #000;
}


Diese Box hat eine Gesamtbreite von 219 Pixel - width:200px + padding-left:15px + border:2px + 2px = 219px - und eine Gesamthöhe von 314 Pixel - height:300px + margin-top:10px + border:2px + 2px = 314px. Solche Berechnungen sind natürlich nur möglich, wenn absolute Werte gesetzt werden. Bei relativen Werten wie Prozent wird es natürlich weniger präzise.

Jetzt gibt es, wie immer, keine Regel ohne Ausnahme. In diesem Fall ist es (wieder mal) der IE in der Version 5 und 6 und natürlich der Netscape 4, aber der ist so alt, dass es vernachlässigbar ist. Bei fehlerhaften oder fehlenden Angaben im !DOCTYPE schalten diese in den Quirks-Mode, der das Verhalten einer älteren Version annimmt. Der IE 5 und 6 verrechnet dann eventuelle padding- und border Angaben im Inhalt: Gesamtbreite im IE = linker Außenabstand + Breite des Inhalts + rechter Außenabstand.In der Praxis macht sich das im Textfluss bemerkbar. Durch gesetzte Innenabstände und Rahmenbreite wirkt sich diese auf die Breite der dargestellten Inhalte aus. Textblöcke, bspw. fallen schmaler aus als in Mozilla Browsern.



Tipps beim Einsatz von CSS

Im Kapitel letzte Woche haben wir bereits die Eltern-Kind Hierarchie kennen gelernt. Dies gilt auch für CSS Elemente. Insofern kann man sich die Vererbung zu Nutze machen. Schlauerweise hat sich das W3C Gedanken darüber gemacht, welches Attribut vererbbar ist und welches nicht. Schriftarten, -farben und –größen weiterzuvererben ist sinnvoll. Rahmen oder Hintergrundfarben zu vererben ist weniger sinnvoll, weil in diesen Fällen, abweichend vom Elternelement, häufiger Eigenschaften neu definiert werden müssten. Beispiel...

body{
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
color: red;
}
#sub{
color: blue;
}




Die Schriftfamilie, -größe und –farbe sind im Elternelement body definiert worden. Diese Eigenschaften vererben sich auf die Kindelemente div, h1 und p weiter. Der Box "sub" ist eine andere Schriftfarbe zugewiesen worden. Diese wird an alle folgenden Kindelemente des Kastens weitervererbt. Deshalb ist es sinnvoll globale Formatierungen an der oberster Elternebene vorzunehmen, und sie nicht jedes Mal für ein weiteres Element neu zu definieren. Abweichungen von der Regel werden entsprechend notiert. Dies verschlankt den Code auch deutlich.

Jetzt kann es natürlich sein, dass eine nicht vererbbare Eigenschaft für ein Kindelement ausdrücklich erwünscht ist. Nehmen wir als Beispiel den Außenabstand. Er wird nicht weitervererbt. Möchte ich aber, dass der Außenabstand an das Kindelement vererbt wird, so wird in der Deklaration des Kindelements die Eigenschaft mit dem Wert inherit versehen. Dies bewirkt, dass für dieses Element eine an sich nicht vererbbare Eigenschaft übernommen wird. Sie wird aber nicht an ein Kindelement des Kindelements weitergegeben. Beispiel...

#div01{
margin: 20px;
background-color: #b8d062;
width: 250px;
height: 300px;
}
#sub{
margin: inherit;
background-color: #d9dc8c;
width: 200px;
height: 160px;
}






Ein Stolperstein lauert noch bei der Vererbung von Schriftgrößen, bzw. wenn die absoluten und relativen Werte bei den Größenangaben vermischt werden. Relative Werte orientieren sich an dem Wert des Elternelements, so dass bei einer Änderung in einem Kindelement unerwünschte Größen entstehen. Beispiel...

h2{ font-size: 1.2em;}
p{ font-size: 0.8em;}
#sub{ font-size: 12px;}




In diesem Beispiel sind der Überschrift zweiten Grades h2 und dem Absatz p global mit CSS ein Wert für die Schriftgröße zugeordnet worden. Der id-Selektor #sub erhält auch eine Schriftgröße. Nun wird aber in dem Bereich #sub nicht eine 12 Pixel große Schrift angezeigt werden. Die Schriftgröße für h2 errechnet sich 12px x 1,2 = 14,4 Pixel. Ebenso sieht es für den Absatz aus: 12px x 0,8 = 9,6 Pixel. Der Browser wird sich die Schriftgröße raussuchen, die den Werten am nächsten liegt. Der oben angeführte HTML Code sähe dann so aus:



Wie ihr seht, ist das Ergebnis am Rande der Sichtbarkeit und sicher so nicht erwünscht. Noch kritischer wird es, wenn zwei relative Angaben berechnet werden, vor allem wenn sie unter 100% liegen. Also die Werte immer schön im Auge behalten und testen, testen, testen.

Ich glaube, das war jetzt ziemlich viel geballte Theorie in einem Kapitel. Ihr könnt euch gerne erstmal einen Kaffee holen und entspannen – und es vielleicht in Ruhe ein zweites Mal durchlesen, bevor ihr zu der Übung übergeht. Ich habe euch wieder eine HTML-Datei vorbereitet, die ihr mittels externer CSS Anweisungen formatieren sollt. Dem .zip liegt noch eine Grafik bei, wie es aussehen soll. Es ist jetzt schon ein wenig schwieriger, als im letzten Kapitel. Na dann, bis nächste Woche.

Downloads...

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

Gruß

V 1.00 - (C) by Maninweb.de - All rights reserved··
maninweb
Microsoft Excel MVP 2014


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


AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode - AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode

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 02 - Teil 3 - Es lebt immer noch! 1 womaninweb 5455 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 3 - Es lebt immer noch!
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 4 - Pimp my Site 1 womaninweb 5383 21. Dez 2007, 17:02
maninweb Kapitel 03 - Teil 4 - Pimp my Site
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 2 - Hat es deine Augen oder meine? 1 womaninweb 4360 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?
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 2 - Butter bei die Fische 1 womaninweb 4459 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 2 - Butter bei die Fische
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 03 - Teil 2 - Schaffe, schaffe, Seite bastle 19 maninweb 6755 13. Sep 2008, 20:55
womaninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
Keine neuen Beiträge Workshop: Excel Projekte: Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen 0 Lukas Mosimann 30275 26. Apr 2008, 08:59
Lukas Mosimann Pivot-Tabelle - Teil 1 - Erstellung von Pivot-Tabellen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 5 maninweb 3753 03. Apr 2008, 12:05
voler Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! 50 maninweb 11853 11. Feb 2008, 22:54
Nicki007 Kapitel 02 - Teil 3 - Es lebt immer noch!
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: HTML Editor Forum