Probleme beim Formatieren mit

danihue · 29.01.2006, 18:07

Hallo,

ich befasse mcih gerade mit den Einbindungsmöglichkeiten von CSS DAteien in HTML Dokumente.

In meinen Unterlagen steht drin, daß Definitionen die innerhalb eines Tags vorgenommen werden sich auf alle Elemente beziehen, die dieses Tag umschließt.

Ich habe ein HTML Dokument erstellt

Code:

<html>


<head>


<title>Möglichkeiten der Textformatierung mit Stylesheets</title>


<link type="text/css" rel="stylesheet" href="layout.css">


</head>


<body>


<h1>&Uuml;berschrift formatiert &uuml;ber das externe Stylesheet </h1>

<p>Dies ist ein Absatz, der über das externe Stylesheet "layout.css" formatiert ist und deshalb in der Schriftart Times New Roman und einem hellgrauen Hintergrund dargestellt wird. </p>


<p style="font-family:Verdana; color:navy; background-color: #FFFFFF; " >Dieser Absatz wurde einzeln formatiert und wird daher entsprechend in der Schriftart &quot;Verdana&quot;, mit wei&szlig;em Hintergrund und in der Schriftfarbe &quot;navy&quot; dargestellt </p>


<h1 style="font-family: 'Times New Roman', Times, serif; color: #FF6600; font-size: 18px;">Auch  Formatierungsanweisungen f&uuml;r &Uuml;berschriften k&ouml;nnen &uuml;berschrieben werden </h1>


<p>Innerhalb eines Absatzes k&ouml;nnen Sie jedoch auch einzelnen Abschnitten einen eigenen Stil zuweisen. So kann man z.B. einzelne W&ouml;rter <span style="font-weight: bold;">fett</span> darstellen, oder <span style="font-style: italic;">kursiv</span> oder <span style="text-decoration: underline;">unterstrichen</span> oder auch in einer anderen <span style="color: #CC0000;">Farbe</span>, oder <span style="font-style: italic; color: #660099; font-weight: bold; text-decoration: underline;">kursiv, fett, in einer anderen Farbe und unterstrichen</span> ... alles ist m&ouml;glich </p>



<p>Nun folgen drei Abs&auml;tze, die mit einem &lt;span&gt; Tag zusammengefasst und folgenderma&szlig;en formatiert wurden:</p>



<span style="color: #339966; font-weight: bold; font-family: 'Times New Roman', Times, serif; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;">
<p>... in der Schriftart Times New Roman ...</p>
<p>... fett und in gr&uuml;ner Schrift ...</p>
<p>... und ohne Hintergrund ... </p></span>

</body>


</html>

in dem ich folgendes externes Stylesheet eingebunden habe:

Code:

h1 { 	font-family: Verdana, Arial, sans serif;
	font-size: 24pt;
	color: red;}

p  {	font-family: "Courier New", monospace;
	background: lightgrey }

In meinem Dokument möchte ich nun drei Absätze zusammenfassen und mit einem Tag andere Formatierungen zuweisen.

Es werden aber nicht alle neuen Formatdefinitionen übernommen sondern einige aus dem externen Stylesheet beibehalten...
Warum ist das so ??

rewboss · 29.01.2006, 21:56

Irgendetwas hast du falsch verstanden.

In CSS werden manche Eigenschaften vererbt. Das heißt: die inneren Elemente kriegen bestimmte Eigenschaften von den äußeren Elementen -- du hast es eben andersrum versucht. Da die -Elementen innerhalb der -Elementen sind, werden die -Eigenschaften teilweise von den -Eigenschaften überschrieben. Etwa so:

Code:

<span style="color: red;">
<p>Rote Schrift</p>
<p style="color: blue;">Blaue Schrift</p>
</span>

Außerdem darfst du keine -Elemente innerhalb von -Elementen definieren. definiert ein Inline-Element, aber ist ein Block-Element.

danihue · 29.01.2006, 22:13

Also kann ich mit nur einzelne Wörter oder Textpassagen, nicht aber mehrere Absätze formatieren ?

steff11 · 29.01.2006, 22:21

Genau dafür ist spann gedacht. Andererseits kann man vieles, aber die reine Lehre der Spezifikation sieht es nicht vor:

Zitat:

In der "Strict"-Variante dürfen Inline-Elemente nur innerhalb von Block-Elementen notiert werden. Im obigen Beispiel ist das der Fall, da die span-Elemente innerhalb eines Überschriftenelements vorkommen.

Die Browser sind jedoch recht tolerant. Immer aber gilt: eine Css-Formatierung der eingeschachtelten -Absätze überschreibt deine -Vorgaben, wie rewbosss schon vermerkte

Probleme beim Formatieren mit <span>