nicht angemeldet
CSS-Angabe auf andere CSS-Angabe beziehen
0 CSS ökonomisch einsetzen
0 0
CSS-Angabe auf andere CSS-Angabe beziehen
Hallo,
wie kann ich eine CSS-Angabe für ein Element auf eine CSS-Angabe für ein anderes Element beziehen, z. B.
div { font-size : [Wert von span]; }
und
div { [Attribute/Werte von span]; }
?
Thx,
html-fuchs
-
Hallo Füchschen,
wie kann ich eine CSS-Angabe für ein Element auf eine CSS-Angabe für ein
anderes Element beziehen, z. B.Gar nicht. Das Konzept von Variablen bzw. Verweisen gibt es in CSS nicht.
Du könntest aber die Cascadierung von CSS ausnutzen und damit ökonomischer
mit dem Getipptem umgehen:Ich definiere eine Klasse mit bestimmten Eigenschaften ...
.fliesstext {
font-size:1em;
font-family:Zapfino, serif;
color:black;
/* ... */
}Und kann diese an verschiedenen Stellen im Dokument einsetzen:
<span class="fliesstext">Blub</span>
<div class="fliesstext">Blub</div>
Man kann auch verschiedene Klassen kombinieren, wenn der Text dann in
verschiedene Klassen fällt:.vorspann {
color:blue;
}<div class="fliesstext vorspann">Blub</div>
Oder auch durchaus für bestimmte Elemente bestimmte Eigenschaften einer
Klasse überschreiben:#maschinentext {
font-family:Monaco, monospace;
}<div id="maschinentext" class="fliesstext">Blub</div>
Den ökonomischen und sinnvollen Umgang mit CSS lernt man am besten durch
Übung. Zuviele generische Klassen einzusetzen, kann auch ein Fehler sein.
Zum Beispiel kann man sich mit Vererbung sehr viel Arbeit ersparen:<body>
<div class="fliesstext">Blub</div>
<div class="fliesstext">Blub</div>
<div class="fliesstext">Blub</div>
<div class="fliesstext">Blub</div>
<div class="fliesstext">Blub</div>
</body>... ist nicht sonderlich sinnvoll. Besser wäre ...
<body class="fliesstext">
<div>Blub</div>
<div>Blub</div>
<div>Blub</div>
<div>Blub</div>
<div>Blub</div>
</body>... oder gleich die Fliesstextangaben direkt für das body-Element definieren
und bei Bedarf überschreiben. Dies würde ich als das Grundprinzip beim
Erstellen eines Stylesheets bezeichnen: »Vom Allgemeinen zum Speziellen«.
Erst kümmert man sich um die allgemeinen Fällen, das heißt die allgemeinen,
vorhandenen HTML-Elemente und dort möglichst geschickt mit der Vererbung
agieren. Wenn einem das nicht ausreicht, dann sollte man die Spezialfälle in
einzelne, möglichst logische, strukturelle Klassen einteilen. Als letzter
Punkt kommt dann die Direktformatierung über IDs oder mittels des Attributes
style.Tim
-
Hi,
wie kann ich eine CSS-Angabe für ein Element auf eine CSS-Angabe für ein anderes Element beziehen, z. B.
div { font-size : [Wert von span]; }
div { [Attribute/Werte von span]; }Gar nicht. Du musst schon etwas definieren, wenn du die eventuelle Vererbung überschreiben willst.
Grüße,
Roland -
Moin,
wie kann ich eine CSS-Angabe für ein Element auf eine CSS-Angabe für ein anderes Element beziehen, z. B.
div { font-size : [Wert von span]; }
und
div { [Attribute/Werte von span]; }
?
An dieser Stelle macht sich ein Komma immer recht gut, finde ich:
div, span { /* Hier alles was die beiden gemeinsam haben */ }
div { /* Hier nur für das eine */ }
span { /* Hier nur für das andere */ }--
Henryk Plötz
Grüße aus Berlin
~~~~~~~~ Un-CDs, nein danke! http://www.heise.de/ct/cd-register/ ~~~~~~~~
~~ Help Microsoft fight software piracy: Give Linux to a friend today! ~~