CSS-Element "html", wo erklärt?

[Otto Wyss]

Ich habe in einer CSS-Datei die folgende Vereinbarung gefunden

body,html {
  ...
  }

Ich nehme an alle Angaben dazwischen definieren das Aussehen sowohl von "body" als auch "html". Jetzt wollte ich in SelfHtml nachschauen, was passiert wenn ich z.B. "body" oder "html" weglasse, resp. was die Unterschiede von "body und "html" sind. Leider scheint im CSS das "html" nirgendwo beschrieben zu sein, ich konnte es jedenfalls nirgendwo finden.

[Jens Holzkämper]

Tach,

body,html {
  ...
  }
Ich nehme an alle Angaben dazwischen definieren das Aussehen sowohl von "body" als auch "html".

ja das selektiert beide Elemente.

Jetzt wollte ich in SelfHtml nachschauen, was passiert wenn ich z.B. "body" oder "html" weglasse, resp. was die Unterschiede von "body und "html" sind.

Die definierten Eigenschaften wirken dann nur noch auf eines der beiden Elemente, das andere wird dann wieder den Browservorgaben folgen, das kann, muß aber nicht, sichtbare Auswirkungen haben.

Leider scheint im CSS das "html" nirgendwo beschrieben zu sein, ich konnte es jedenfalls nirgendwo finden.

CSS unterscheidet verschiedene Elemente überhaupt nicht, für CSS hat das html-Element exakt die selbe Bedeutung wie ein Absatz, ein Link oder ein Bild (die Browserrealität weicht davon leider häufiger ab).

mfg
Woodfighter

[Otto Wyss]

Leider scheint im CSS das "html" nirgendwo beschrieben zu sein, ich konnte es jedenfalls nirgendwo finden.

CSS unterscheidet verschiedene Elemente überhaupt nicht, für CSS hat das html-Element exakt die selbe Bedeutung wie ein Absatz, ein Link oder ein Bild (die Browserrealität weicht davon leider häufiger ab).

Heisst das, wenn für "html" z.B. eine Schriftart definiert ist, dass dies auch für "body", "div", "li", etc definiert ist? Ist "html" quasi ein "alle Tags"-Element?

Was ist wenn das "html" vor oder nach "body" steht, ist da die Reihenfolge wichtig oder hat eines Vorrang?

[suit]

Heisst das, wenn für "html" z.B. eine Schriftart definiert ist, dass dies auch für "body", "div", "li", etc definiert ist? Ist "html" quasi ein "alle Tags"-Element?

jein - wenn du für ein element etwas definierst, interessiert das andere elemente erstmal garnicht (auch nicht wenn sie nachfahren davon sind) - je nach css-eigenschaft gibt es aber voreinstellungen, so sollte font-family auf z.B. auf inherit[1] gesetzt sein und das von dir beschriebene verhalten produzieren

html ist kein alle-tags-element und auch kein alle-elemente-element - unterscheide dazwischen bitte - css sieht für diesen fall etwas anderes vor[1]

Was ist wenn das "html" vor oder nach "body" steht, ist da die Reihenfolge wichtig oder hat eines Vorrang?

was spricht gegen einen blick in die dokumentation?

[1] es ist ein unterschied, ob du etwas durch den *-selektor ansprichst und allen elementen die selbe eigenschaft gibst oder durch die inherit-eigenschaft - aus w3c-beispiel ist imho schlecht gewählt, da hier der *-selektor zur demonstration von inherit verwendet wird

[Otto Wyss]

was spricht gegen einen blick in die dokumentation?

Nichts, darum habe ich ja in SelfHtml danach gesucht, aber nichts gefunden. Die W3C-Dokumentation ist leider überhaupt nicht einfach zu lesen und zu verstehen.

[suit]

Nichts, darum habe ich ja in SelfHtml danach gesucht, aber nichts gefunden.

<http://de.selfhtml.org/css/formate/zentrale.htm@title=das hier> könnte das gesuchte sein

Die W3C-Dokumentation ist leider überhaupt nicht einfach zu lesen und zu verstehen.

eigentlich schon, sie ist aber etwas gewöhnungsbedürftig, da gebe ich dir recht :)

im übrigen finde ich die w3c-dokumentation hier um einiges besser als die selfhtml-seite die keine ordentliche übersicht über die selektoren bietet und alles irgendwie "durcheinander" abhandelt

[Otto Wyss]

<http://de.selfhtml.org/css/formate/zentrale.htm@title=das hier> könnte das gesuchte sein

Es geht mir nicht um Selektoren, sondern nur um des "html"-Element im CSS.

im übrigen finde ich die w3c-dokumentation hier um einiges besser als die selfhtml-seite die keine ordentliche übersicht über die selektoren bietet und alles irgendwie "durcheinander" abhandelt

Zugegeben, Selektoren könnten auch in SelfHtml etwas besser beschrieben sein.

[Struppi]

<http://de.selfhtml.org/css/formate/zentrale.htm@title=das hier> könnte das gesuchte sein

Es geht mir nicht um Selektoren, sondern nur um des "html"-Element im CSS.

Natürlich geht es dir um den Selektor für das html Element. Du kannst alle html Elemente mit einem CSS Selektor ansprechen.

Struppi.

[suit]

Es geht mir nicht um Selektoren, sondern nur um des "html"-Element im CSS.

css kennt keine elemente, nur element-selektoren die sich namentlich mit elementen decken, die im dokument vorkommen - ob das element ein html-element, DAS <html />-element oder ein nicht existentes elemen, ist für css unerheblich

[Gunnar Bittersmann]

@@Otto Wyss:

Nichts, darum habe ich ja in SelfHtml danach gesucht, aber nichts gefunden. Die W3C-Dokumentation ist leider überhaupt nicht einfach zu lesen und zu verstehen.

Vielleicht hilft die deutsche Übersetzung. Aber Vorsicht, die ist von CSS 2.0, nicht 2.1. Immer auch einen Blick in 2.1 werfen, ob sich an der betreffenden Stelle etwas geändert hat.

Live long and prosper,
Gunnar

[Cheatah]

Hi,

Nichts, darum habe ich ja in SelfHtml danach gesucht, aber nichts gefunden.

Du suchst nach etwas, das es nicht gibt. Genauso gut könntest Du nach einer Anleitung für Krawattenknoten suchen und nichts finden, weil keine Anleitung etwas über grüne Krawatten sagt und Deine Krawatte nun mal grün ist. Der CSS-Selektor "html" ist absolut stinknormal, ohne jedwede Besonderheit. Er gilt in einem HTML-Dokument für den äußersten Container, und beispielsweise in folgendem XML-Dokument selektiert er einfach alle <html>-Elemente:

<?xml version="1.0"?>
<root>
    <foo>
        <html />
    </foo>
    <bar>
        <html>Blablub</html>
    </bar>
    <html />
</root>

Es existiert für CSS nichts Außergewöhnliches an dem Umstand, dass ein Element den Namen "html" trägt. Es ist einfach nur ein Element, nicht anders als ein <p>, <li>, <title>, <foo> oder <bar>.

Cheatah

[Cheatah]

Hi,

Heisst das, wenn für "html" z.B. eine Schriftart definiert ist, dass dies auch für "body", "div", "li", etc definiert ist?

der CSS-Selektor "html" selektiert jedes <html>-Element. Er unterscheidet sich vom Selektor (z.B.) "p" ausschließlich dadurch, dass dieser jedes <p>-Element selektiert - ansonsten existiert kein Unterschied. Keine der CSS-Regularien wird dadurch beeinflusst, wie ein selektiertes Element heißt, auch die Vererbung von Werten funktioniert exakt gleich.

Unterschiede können sich nur durch Dinge ergeben, auf die CSS keinen Einfluss hat. Wenn <html> beispielsweise vom Browser als Viewport angesehen wird, wird ein margin wie ein padding gewertet werden. Das liegt aber nicht am Namen des Elements, sondern daran, dass für den Viewport besondere Regeln gelten. Der Browser kann ebenso gut <body> als Viewport ansehen.

Ist "html" quasi ein "alle Tags"-Element?

Der Universal-Selektor lautet "*".

Was ist wenn das "html" vor oder nach "body" steht, ist da die Reihenfolge wichtig oder hat eines Vorrang?

Beide sind exakt gleichwertig. "body, html" unterscheidet sich in nichts von "html, body".

Cheatah

[Otto Wyss]

der CSS-Selektor "html" selektiert jedes <html>-Element.

Die Frage ist nun, was genau ist ein <html>-Element? Ist das jetzt ein <p> oder ein <a> oder beides? Und gibt es da Vorrang oder zählt nur die Reihenfolge?

Was gilt z.B. bei

p {
    font irgendwas ...
  }

html {
    font anders ...
  }

Hat jetzt ein <p> den Font "irgendwas" oder den Font "anders"? Ich nehme an bei vertauschter Reihenfolge wäre es klar der Font "irgendwas".

[suit]

Die Frage ist nun, was genau ist ein <html>-Element? Ist das jetzt ein <p> oder ein <a> oder beides? Und gibt es da Vorrang oder zählt nur die Reihenfolge?

unterscheide zwischen EINEM html-element (das ist <p />, <div />, <html /> oder sonstwas) und DEM <html />-element (also genau das element <html></html> mit dem restlichen zeug dazwischen

Hat jetzt ein <p> den Font "irgendwas" oder den Font "anders"? Ich nehme an bei vertauschter Reihenfolge wäre es klar der Font "irgendwas".

nein, html hat font anders, p hat fotn irgendwas

lediglich bei

  
p {  
  font-family: Arial;  
}  
  
p {  
  font-family: Verdana;  
}

was von wem überschrieben wird, regelt zb die <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=spezifität eines selektors>

[ChrisB]

Hi,

Die Frage ist nun, was genau ist ein <html>-Element? Ist das jetzt ein <p> oder ein <a> oder beides?

Weder noch. Wie kommst du ueberhaupt auf diese Frage?
Ist dir nicht klar, was *das* html-Element ist?
html ist das Wurzelelement eines HTML-Dokumentes. Das sollte doch wohl klar sein ...?

Was gilt z.B. bei

p {
    font irgendwas ...
  }

html {
    font anders ...
  }

Hat jetzt ein <p> den Font "irgendwas" oder den Font "anders"? Ich nehme an bei vertauschter Reihenfolge wäre es klar der Font "irgendwas".

Nein.

p wird immer ein Nachfahre von html sein. Also ist der Elementselektor, der p selektiert, hier von hoeherer Spezifitaet, als der, der html selektiert.

Die Schriftartangabe "anders" wird von html aus herunter vererbt.
Dann kommt ein p-Element, und das hat seine eigene Schriftartangabe, "irgendwas". Also wirkt die natuerlich fuer den Textinhalt von p und alle seiner Nachfahrenelemente - sofern fuer die nicht wieder eigene Definitionen greifen.

MfG ChrisB

[Sven Rautenberg]

Moin!

Was gilt z.B. bei

p {
    font irgendwas ...
  }

html {
    font anders ...
  }

Hat jetzt ein <p> den Font "irgendwas" oder den Font "anders"? Ich nehme an bei vertauschter Reihenfolge wäre es klar der Font "irgendwas".

Nein.

p wird immer ein Nachfahre von html sein. Also ist der Elementselektor, der p selektiert, hier von hoeherer Spezifitaet, als der, der html selektiert.

Der Begriff "Spezifität" hat für CSS eine besondere, definierte Bedeutung - und diese Bedeutung trifft hier nicht zu.

Die Font-Angabe für <html> wird natürlich weitervererbt an die Kindelemente. Da aber für <p> explizit eine andere Font-Angabe existiert, wird die Vererbung hier unterbrochen, es gilt also nicht die indirekte Font-Angabe aus der html-Regel, sondern die explizite aus der p-Regel des CSS.

Das hat nichts mit Spezifität der CSS-Selektoren zu tun, denn diese ist hier bei beiden identisch: 0-0-0-1. Siehe auch http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet

- Sven Rautenberg

[ChrisB]

Hi,

Der Begriff "Spezifität" hat für CSS eine besondere, definierte Bedeutung - und diese Bedeutung trifft hier nicht zu.

Stimmt auffallend, Danke.

MfG ChrisB

[Cheatah]

Hi,

Die Frage ist nun, was genau ist ein <html>-Element? Ist das jetzt ein <p> oder ein <a> oder beides?

ein <html>-Element ist ein <html>-Element ist ein <html>-Element. Wenn Du in der Lage bist, ein - sagen wir - <div>-Element zu identifizieren, dann findest Du auch ein <html>-Element. Es zeichnet sich dadurch aus, dass es nach der öffnenden spitzen Klammer die Buchstabenfolge "html" besitzt.

Und gibt es da Vorrang oder zählt nur die Reihenfolge?

Es gibt keinerlei Vorrang, der irgend etwas mit dem Namen eines Elements zu tun hat.

Was gilt z.B. bei
  p {
    font irgendwas ...
  }
  html {
    font anders ...
  }

Hat jetzt ein <p> den Font "irgendwas" oder den Font "anders"?

"irgendwas", weil die Vererbung von "anders" aus dem <html>-Element heraus in der Kaskade unterbrochen wird. Noch einmal: Das <html>-Element ist für CSS nichts besonderes. *Alle* Fragen, die Du hier stellst, hätten die exakt selbe Antwort, wenn Du sie statt mit "html" mit "body" oder auch z.B. "div" formulieren würdest.

Cheatah

[Gunnar Bittersmann]

@@Cheatah:

[…] dann findest Du auch ein <html>-Element. Es zeichnet sich dadurch aus, dass es nach der öffnenden spitzen Klammer die Buchstabenfolge "html" besitzt.

Oder auch nicht:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<title>Lorem ipsum</title>  
<p>Lorem ipsum dolor sit amet.

ist ein valides Dokument. Start- und End-Tag des 'html'-Elements sind in HTML 4.01 optional.

Live long and prosper,
Gunnar