Kennt sich einer hier mit CSS aus?

[Popov]

Die Frage ist die: kann ich die Definition eines Tags auf zwei Definitionen aufteilen? Wenn ich also am ANFANG einer CSS Datei ein Tag, z. B. H1 definiere, z. B. Schrift, dann zwischendurch anderen Tags bearbeite und am Ende H1 eine weitere Definition zuweise, jetzt z. B. die Größe, ist das Ok?

Beispiel:

Code:

h1 {font-family: Verdana, Arial, Helvetica, sans-serif;
}
p {font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {font-size: 25px;
}

Das Ganze scheint zu funktionieren, nur weiß ich nicht ob es zufällig funktioniert oder man es so machen kann.

Der Hintergrund ist der, dass ich in eine relativ komplexe und bereits bestehende CSS Datei nicht zu stark eingreifen möchte. Vor allen da einige Tags zusammen definiert werde usw. Also überlege ich ob meine Änderungen einfach ans Ende anfügen kann.

[implementation]

Kurze Antwort: Nach meinen Erfahrungen stellt das kein Problem dar.

[noob2k9]

Ist problemlos möglich, wenn du eine bereits definierte Eigenschaft überschreibst ist der Zusatz !important notwendig ;)

[Namenloser]

Ja, ist völlig ok und gehört sogar zum Konzept von CSS.

Zitat:

Zitat von noob2k9 (Beitrag 1155860)

Ist problemlos möglich, wenn du eine bereits definierte Eigenschaft überschreibst ist der Zusatz !important notwendig ;)

Kommt drauf an. In der Regel gilt immer die Definition die weiter unten steht.

Z.B. wären bei diesem Beispiel alle Links grün:

Code:

a {
  color: red;
}

a {
  color: green;
}

Allerdings gibt es Ausnahmen, da in CSS Definitionen bestimmte „Spezifitäten“ (css specifities) zugeordnet bekommen. Eine ID hat die höchste Spezifität, danach kommen Klassen, und danach alles andere (grob gesagt). Genaueres zur Berechnung der Spezifität findet man im Netz.

Code:

#special {
  color: red;
}

a.highlight {
  color: green;
}

a {
  color: blue;
}

Code:

<a class="highlight" id="special">Dieser Link ist rot</a>
<a class="highlight">Dieser Link ist grün</a>
<a>Dieser Link ist blau</a>

Hier wird also nicht einfach die letzte Deklaration genommen.

Für

Delphi-Quellcode:

!important

gibt es genau einen Anwendungsfall: Wenn man eine Definition höherer Priorität überschreiben will. Wenn man den obigen CSS-Code ändert in:

Code:

#special {
  color: red;
}

a.highlight {
  color: green;
}

a {
  color: blue ! important;
}

Wären die Links alle blau.

[Popov]

Das hört sich schon mal gut an, denn meine CSS Kenntnisse sind nur rudimentär. Die CSS Datei sieht in etwa so aus:

Code:

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
   color: #000;
   line-height: 1.5em;
   margin: 0 0 20px 0;

Hier werden h1 bis h6 gemeinsam definiert. Soweit ist es für mich ok. Nun überlege ich doch ein Schritt weiter zu gehen als ich es noch in Frage 1 gedacht war, denn jetzt würde ich gerne h4 bis h6 im zweiten Durchgang zusätzliche gemeinsame Eigenschaften zuweisen, wie z. B.

Code:

#content h4,
#content h5,
#content h6 {
   width: 66%;
   height: auto;
   border: thin solid #000000;
   margin-right: auto;
   margin-left: auto;
}

Und zuletzt die Einzeleigenschaften

Code:

#content h4 {
   background-color: #FFFFCC;
   color: #663300;
}

Das wäre optimal.

@noob2k9

Meinst du etwa so?

Code:

#content h4 {
   background-color: #FFFFCC;
   color: #663300;
}

#content h4 {
   background-color: #CCCCFF !important;
}

Wobei ich wohl davon ausgehen kann, dass wenn das Ergebnis meinen Vorstellungen entspricht, es wohl auch ohne !important geklappt hat, weil Überschreiben nicht nötig war. Ist das so? Wie gesagt, es ist eine lange CSS Datei.

[Valle]

Das ist natürlich alles machbar war du da tust.

Wenn du dir unsicher bist, lad dir einfach ein paar Browser runter und teste es. Wenn es klappt, ist es okay. ;-)

(Chrome, Firefox, Opera und dieIE Collection)

So läuft HTML und CSS eben. Leider...

Liebe Grüße,
Valentin