Kaskade: Wertzuweisung

Thopeto

Erfahrenes Mitglied
Hallo,

unsere Dozentin möchte die spezifizierten, berechneten und Tatsächlichen Werte von Attributen der CSS Selektoren bekommen. Aber wir haben da keine ahnung, wie genau das aussieht.

Hier die aufgabe:
HTML:
body {
font-size:10px;
width: 600px;
}

h1 {
width: 300px;
background-color:blue;
}

div {
text-indent: 10%;
background-color:#464646;
width: 400px;
font-size; 120%;
}

<body>
<div>
<h1>huhuhu</h1>
huhu
</div>
nun hat sie uns eine tabelle gegen, wo man nun die spezifizierten, berechneten und die tatsächlichen werte von, z.b., width im div oder h1 eintragen sollen. doch was genau ist mit berechnet und tatsächlichen wert gemeint. bzw was ist der unterschied. aus dem w3c werden wir nicht schlau. bitte um hilfe!

Gruß
Thorsten
 
Hi,
doch was genau ist mit berechnet und tatsächlichen wert gemeint. bzw was ist der unterschied.

ist die einleitende Definition des w3c nicht selbsterklärend?

Nachdem ein Benutzerprogramm ein Dokument geparst und einen Dokumentbaum aufgebaut hat, muss es für jedes Element in dem Baum jeder Eigenschaft einen Wert zuweisen, die sich auf den Ziel-Medientyp bezieht.

Der endgültige Wert einer Eigenschaft ist das Ergebnis einer dreistufigen Berechnung: Der Wert wird über die Spezifizierung ermittelt (der „spezifizierte Wert“), dann gegebenenfalls in einen absoluten Wert aufgelöst (den „berechneten Wert“) und schließlich entsprechend der Einschränkungen der lokalen Umgebung umgewandelt (der „tatsächliche Wert“).

mfg Maik
 
hi Maik,

wenn das selbsterklärend wäre, würde ich nicht extra einen thread aufmachen. da du es anscheinend verstanden hast, wäre es nett, wenn du ein beispiel erstellen würdest. das würde mir schon ausreichen.

Zum beispiel an Width im Selektor h1

width:
spezifiziert: 300px
berechnet: ?
tatsächlich: ?

gruß
Thorsten
 
  1. Spezifizierter Wert: 300px
  2. Berechneter Wert: 300px
  3. Tatsächlicher Wert: 300px
Erläuterung:

  1. Der Ausgangswert ist in der Eigenschaftsdefinition festgelegt.
  2. Für absolute Werte ist keine Verarbeitung erforderlich, um den berechneten Wert zu ermitteln.
  3. Der tatsächliche Wert ist der berechnete Wert, nachdem die Annäherung darauf angewendet wurde.
Und achte doch bitte in deinen Beiträgen auf die Netiquette bzgl. der Groß- und Kleinschreibung, vielen Dank! :)

mfg Maik
 
okay, vielleicht noch ein etwas schwierigeres Beispiel, sodass ichs ganz versteh :)

HTML:
body{
  width:600px;
}
div{
  width:400px;
}
p{
  padding-right:25px;
  border-left: 5px dotted green;
  margin: 0 40 px;
  font-size: 1.5 em;
  text-indent: 2 em;
}
<body>
 <div>
    <p> huhuhuhu </p>
 </div>
</body>
wäre nett wenn du das gleiche nochmal für "width" von p machen könntest.
also width in p
spezifiziert:
berechnet:
tatsächlich:

vielen Dank ))
 
Moin,
  1. Spezifizierter Wert: 400px
  2. Berechneter Wert: 400px
  3. Tatsächlicher Wert: 400px
Und die Erläuterung dazu:

  1. Der Ausgangswert wird vom Elternelement div geeerbt.
  2. Für absolute Werte ist keine Verarbeitung erforderlich, um den berechneten Wert zu ermitteln.
  3. Der tatsächliche Wert ist der berechnete Wert, nachdem die Annäherung darauf angewendet wurde.

mfg Maik
 
Irgendwie verwirrt mich das etwas... erst hast du für den tatsächlichen Wert 320 px hingeschrieben, was einleuchtend war, da der außenabstand links und rechts abgezogen wurde.
Wie kommt die Sinneswandlung?

Könntest du mal ein Beispiel machen wo die drei Werte nicht identisch sind?

Wäre super!

Danke
 
Hab mich da für einen kurzen Moment in die Irre leiten lassen, denn nach meinem Verständnis ergibt sich ein "abweichender" tatsächlicher Wert, wenn es sich beim spezifizierten Wert um eine relative Angabe handelt, die zunächst in eine Absolute umgewandelt / umgerechnet werden muß.

mfg Maik
 
Zurück