Wie CSS funktioniert

Zurück zur vorherigen Seite:
Warum CSS?Dieser dritte Abschnitt des CSS Getting Started Tutorials erklärt wie CSS funktioniert, was im Browser damit passiert und welchen Zweck das Document Object Model (DOM) hat. Sie werden auch lernen Ihr Beispieldokument zu analysieren.

Wie CSS funktioniert

Wenn ein Browser ein Dokument darstellt, muss er den Inhalt des Dokuments mit den Stilinformationen kombinieren. Er bearbeitet das Dokument in zwei Schritten:

Der Browser kombiniert die Auszeichnungssprache (HTML) und das CSS in das DOM (Document Object Model). Das DOM wird aus diesen beiden als Gesamtdokument im Computerspeicher abgelegt. Es kombiniert also Inhalt und Stil.
Der Browser stellt den Inhalt des DOM dar.

Eine Auszeichnungssprache verwendet Elemente um die Dokumentenstruktur darzustellen. Sie markieren Elemente mithilfe von Tags. Das sind Schlüsselworte zwischen zwei '<' spitzen Klammern '>'. Die meisten Elemente haben paarweise Tags - einen Start-Tag <schluesselwort> und einen End-Tag </schluesselwort>, wobei das selbe Schlüsselwort verwendet wird, und das Endtag mit einem zusätzlichen '/' vor dem Schlüsselwort gekennzeichnet ist.

Abhängig von der Auszeichnungssprache haben manche Elemente NUR ein Start-Tag. Solche Tags haben ein '/' nach dem Schlüsselwort. <schluesselwort/>.

Ein Element kann auch andere Elemente innerhalb seines Start- und End-Tags enthalten. Man spricht dann auch von einem Container. Vergessen Sie niemals Tags innerhalb eines Containers auch wieder zu schließen!

Ein DOM hat eine Baumstruktur. Jedes Element, Attribut und Textelement innerhalb der Auszeichnungssprache ist ein Knoten (node) innerhalb der Baumstruktur. Knoten sind durch Ihre Beziehung zu anderen DOM-Knoten charakterisiert. Manche Elemente sind Eltern von Kind-Knoten und Kind-Knoten haben Geschwister.

Sie müssen das DOM verstehen, damit Sie Ihr CSS erstellen, debuggen und warten können, denn im COM kommen CSS und Dokumenteninhalt zusammen.

Beispiel

In Ihrem Beispieldokument erzeugen der <p>-Tag und sein End-Tag </p> einen Container:

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

Live Beispiel

https://jsfiddle.net/djaniketster/6jbpS/

Im DOM, ist der entsprechende P-Knoten ein Eltern-Element. Seine Kinder sind die STRONG- und die nachfolgenden Knoten. Der STRONG Knoten sind ihrerseits wieder Eltern mit dem Text als ihre Kinder:

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

Action: Ein DOM analysieren

Den DOM Inspector verwenden

Um ein DOM zu analysieren, benötigen Sie eine spezielle Software. Dafür können Sie beispielsweise Mozilla's DOM Inspector (DOMi) Add-on verwenden. Sie brauchen sich nur das Add-on zu installieren (siehe unten).

Verwenden Sie den Mozilla Browser um Ihr HTML-Beispieldokument zu öffnen .
Wählen Sie Tools > DOM Inspector aus der Menüleiste oder Tools > Web Development > DOM Inspector.

Weitere Details

Wenn Ihr Mozilla Browser kein DOMi hat, können Sie ihn auf der Add-ons Seite installieren und den Browser neu starten. Setzen Sie dann mit dem Tutorial fort.

Wenn Sie DOMi nicht installieren wollen (oder Sie einen anderen Browser verwenden), dann können Sie Web X-Ray Goggles verwenden, wie wir Ihnen weiter unten erklären werden. Oder Sie können diesen Abschnitt auch überspringen.
In DOMi, expandieren Sie die Knoten in Ihrem Dokument indem Sie auf ihre Pfeile klicken.
Anmerkung: Leerzeichen in Ihrer HTML datei können in DOMi leere Text-Knoten hervorrufen. Diese können Sie einfach ignorieren.

Je nachdem welche Knoten Sie expandiert haben könnte ein Teil des Ergebnisses so aussehen:
```
│ ▼╴P
│ │ │ ▼╴STRONG
│ │ └#text
│ ├╴#text
│ ►╴STRONG
│ │
```
Wenn Sie einen Knoten auswählen, können Sie im Panel auf der rechten Seite von DOMi Details dazu sehen. So sehen Sie dort etwa den Text eines Text-Knotens.

Wenn Sie ein Element auswählen, analysiert DOMi dieses Element und zeigt Ihnen zahlreiche Informationen dazu im rechten Panel. Style Informationen sind ein Teil davon.

Challenge

Klicken Sie in DOMi auf einen STRONG Knoten.

Benutzen Sie das rechte Panel von DOMi um herauszufinden wo die Farbe dieses Knotes auf rot gesetzt wird und wo die Schrift auf fett gesetzt wird.

Possible solution

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

Hide solution

Lösung.

Web X-Ray Goggles

Web X-Ray Goggles zeigt weniger Information an als DOM Inspektor. Dafür ist es einfacher zu installieren und auch zu verwenden.

Gehen Sie auf die Seite Web X-Ray Goggles.
Ziehen Sie den Link für das Bookmarklet auf dieser Seite auf den Toolbar Ihres Browsers.
Öffnen Sie Ihr HTML Dokument.
Aktivieren Sie Web X-Ray Goggles indem Sie das Bookmarklet im Toolbar anklicken.
Bewegen Sie Ihren Mauszeiger in Ihrem Dokument um seine Elemente zu sehen.

Was nun?

Go to Next Section:
Cascading & InheritanceIf you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The next page explains more about these interactions.

Wie CSS funktioniert