Ich habe nur ein Grundwissen über CSS, ist es möglich, eine Eigenschaft von einem Stil in einen anderen Stil zu erben. So könnte ich beispielsweise die Schriftgröße, die in meinen Standardparagra-Tag-Einstellungen angegeben ist, in meine Hyperlink-Tags übernehmen.Vererben css Eigenschaften
Der Grund, warum ich dies tun möchte, ist es, die Pflege mehrerer Stile zu erleichtern.
Sie können auf einmal für zwei Elemente gemeinsame Stile definieren wie folgt:
p, a {
font-size: 1em;
}
Und dann jede mit ihren individuellen Eigenschaften erweitern, wie Sie wollen:
p {
color: red;
}
a {
font-weight: bold;
}
Denken Sie daran: Stile, die später in einem Stylesheet definiert werden, überschreiben im Allgemeinen die zuvor definierten Eigenschaften.
Extra: Wenn Sie nicht bereits haben, empfehle ich die Firebug Firefox-Erweiterung bekommen, so können Sie sehen, welche Arten die Elemente auf Ihrer Seite erhalten und wo sie vererbt werden aus.
Kein CSS hat keine Möglichkeit Stile zu erben. Es gibt jedoch mehrere Möglichkeiten, Stile zu teilen. Hier sind ein paar Beispiele:
mehrere Klassen
<p class="first all">Some text</p>
<p class="all">More text</p>
<p class="last all">Yet more text</p>
p.all { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Verwenden Sie den Komma-Operator in Ihre Designs verwenden
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
p.first, p.middle, p.last { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Containerelemente Mit
<div class="container">
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
</div>
div p { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Keine davon ist genau das, wonach Sie suchen, aber die Verwendung dieser Techniken hilft Ihnen, die CSS-Duplizierung auf ein Minimum zu beschränken.
Wenn Sie bereit sind, serverseitigen Code zum Vorverarbeiten Ihres CSS zu verwenden, können Sie den Typ der gewünschten CSS-Vererbung abrufen.
Ja.
Sie sollten verstehen, wie die Kaskade in CSS funktioniert, und auch verstehen, wie die Vererbung funktioniert. Einige Stile erben (wie das Schriftbild) und einige Stile werden nicht verwendet (wie der Rahmen). Sie können jedoch auch festlegen, dass Stile von ihren übergeordneten Elementen im DOM erben.
Einige Hilfe hier ist Wissen, wie Style-Regeln angegeben sind. This site about the CSS Specifity Wars könnte helfen (Hinweis: diese Website ist derzeit nicht verfügbar, aber hoffentlich wird es bald wieder verfügbar sein).
Außerdem finde ich es manchmal Stile zu überlasten, wie dies hilft:
h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; }
h1 { font-size: 300%; }
... etc ...
CSS automatisch erben vom Stil Eltern. Wenn Sie zum Beispiel in Ihrem Körperstil sagen, dass der gesamte Text #EEE sein soll und Ihr Hintergrund # 000 sein soll, dann wird der gesamte Text, egal ob in einem div oder einem Bereich, immer #EEE sein.
Es wurde schon ziemlich viel darüber geredet, Vererbung hinzuzufügen, wie Sie es in CSS3 beschrieben haben, aber diese Spezifikation ist noch nicht out, also stecken wir jetzt fest und wiederholen uns ziemlich oft.
"... ist es möglich, eine Eigenschaft von einem Stil in einen anderen Stil zu übernehmen. So könnte ich zum Beispiel die Schriftgröße, die in meinen Standardparagra-Tag-Einstellungen angegeben ist, in meine Hyperlink-Tags übernehmen."
Die Link-Tags werden automatisch die Schriftarten aus dem Absatz verwenden, wenn und nur wenn sie innerhalb eines Absatzes sind. Wenn sie außerhalb eines Absatzes (sagen wir in einer Liste) sind, werden sie nicht die gleiche Schriftart verwenden usw.
Zum Beispiel diese CSS:
* {
margin: 0 10px;
padding:0;
font-size: 1 em;
}
p, a { font-size: 75%; }
generiert Links und Absätze, die bei .75em bemessen sind, . Aber es wird Links innerhalb von Absätzen um etwa .56em (.75 * .75) anzeigen.
Zusätzlich zu der von Jonathan Arkell zitierten Spezifitätsreferenz empfehle ich die bei W3Schools.
"Styles, die später in einem Stylesheet definiert werden, überschreiben immer die zuvor definierten Eigenschaften" das stimmt nicht ganz. Es passiert nur, wenn Selektoren dieselbe Spezifität haben. p # ID überschreibt immer p.class - siehe Kaskade in der CSS-Spezifikation. – Kornel
@porneL - Danke für die Korrektur, behoben. Ich dachte in der Denkweise des Beispielfalles. – leek