Vererbung?

[aphix]

Morgen,

ich suche eine Möglichkeit z.B. Textformatierungen zu übernehmen. Vererben?
Ich habe nämlich 4 Textformatierungen, in der sich jeweils nur die Schriftgröße oder Stärke ändert.

Gibt es so etwas:

#text1 { alle angaben....;}
#text2 {#text1; hier aber eine andere schriftgröße als in text1...}
#text3 {#text1; hier eine andere stärke und decoration:underline;}

Kann mir jemand helfen?

danke

moin, klar geht das.
wenn du ne klare struktur hast, kannst du da über die tags direkt ran, z.b.:

#container {
    font-family: verdana, sans-serif;}

#container h2 {
    font-size: 16px;
    font-weight: bold;}


#container p {
    font-size: 12px;}

#container span {
    color: red;}

und das ganze sieht dann im html ca. so aus:

<div id="content>
<h2>Überschrift</h2>
<p><span>Ich bin rot</span> Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Li Europan lingues es membres del sam familie. Lor separat existentie </p>

[Jupp]

ingo's ist die beste Variante.

Man kann aber auch klassen kombinieren:

 
p.text {font-family: "Times New Roman";}
p.gross {font-size: 18px;}
p.bunt {color: #f00;}

 
<p class="text gross bunt">Beispieltext</p>

~ Beispieltext

[jowra]

Zitat von aphix

Gibt es so etwas:

#text1 { alle angaben....;}
#text2 {#text1; hier aber eine andere schriftgröße als in text1...}
#text3 {#text1; hier eine andere stärke und decoration:underline;}

Welche Lösung Du nimmst, hängt in erster Linie auch davon ab, wo Du die verschiedenen Text-Varianten einsetzen willst. Wenn es mitten im Fließtext auftauchen soll, dann ist wohl eine <span></span> Lösung am sinnvollsten und dann wäre es am besten und fexibelsten über Klassen zu lösen.

Die Formatierung mit allen Angaben definierst Du dann am besten für den Paragraphen allgemein:

p { alle angaben ... }

und den Rest über Klassen:

.groesse18 { ... }
.fett { ... }

[jowra]

Zitat von ingo

#container span {color: red;}

Das ist keine saubere Lösung. SPAN ist ein allgemeiner Auszeichner, den man nicht direkt formatieren sondern über Klassen ansprechen sollte:

.red { color: red; }

...

<span class="red">roter Text</span>

Sonst würde im oben genannten Beispiel eine Verwendung verschiedener Schriftformatierungen im Fließtext mit der SPAN-Funktion schon nicht mehr funktionieren, weil der SPAN-Text immer rot wäre.

Zitat von jowra

Das ist keine saubere Lösung. SPAN ist ein allgemeiner Auszeichner, den man nicht direkt formatieren sondern über Klassen ansprechen sollte:

tja, das ist wohl ansichtssache, den h1,h2,h3,p,div, blabla sind auch allgemeine auszeichner.
ausserdem: sauberer ist es allemal. was findste ästhtischer?

<div id="container">
<h1 class="heading-red">Lorem Ipsum</h1>
<p class="fliesstext">Epsum <strong class="green-underline">factorial</strong> non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. <em class="schickimicki">Souvlaki</em> ignitus carborundum e pluribus unum. Defacto lingo est <span class="red">igpay</span> atinlay.<p>
</div>

oder

<div id="container">
<h1>Lorem Ipsum</h1>
<p>Epsum <strong>factorial</strong> non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. <em>Souvlaki</em> ignitus carborundum e pluribus unum. Defacto lingo est <span>igpay</span> atinlay.<p>
</div>

???

genau diese vorgehensweise, die bedingte formatierung per vererbung übers elternelement ist die grundidee der kaskade.

ist aber alles wie gesagt ansichtssache. jeder wie er will.

[steffenk]

was ist das Problem, wenn es verschiedene gibt ?

#container span {color: black;}
#container span.red {color: red;}
#container span.blue {color: blue;}
...

[jowra]

Zitat von St@eff.en

was ist das Problem, wenn es verschiedene gibt ?

#container span {color: black;}
#container span.red {color: red;}
#container span.blue {color: blue;}
...

Ein wirkliches Problem (im Sinne von nicht validierend o.ä.) ist es nicht. Es ist semantisch nicht "die feine Art" weil DIV und SPAN zunächst unformatierte Auszeichnungselemente sind (im Gegensatz zu H1, P, A usw.). Deshalb sollten diese nicht direkt, also "hart" formatiert werden. Die semantisch elegantere Lösung ist:

#container p {color: black;}
#container .red {color: red;}
#container .blue {color: blue;}

mit einer entsprechenden Referenzierung über <span class="..."> im laufenden Text.

[AnnaStesia]

@jowra: Das lese ich zum ersten Mal, hast Du dafür eine Quelle? Ich halte es eher wie Ingo und vermeide Klassenparties, wo's nur geht. <div> und <span> sind doch eh nur Krücken, sie dann auch noch zwangsmässig mit Klassen belassten zu müssen, also da sträubt sich ganz tief in mir was dagegen.

ach, und aphix: die Variante wurde glaube ich noch nicht genannt
#text1,#text2,#text3 { alle angaben....;}
#text2 {hier aber eine andere schriftgröße als in text1...}
#text3 {hier eine andere stärke und decoration:underline;}
ist die Variante für Denkfaule wie mich, da muss man nicht groß kucken, wer wo wie steht, oder explizite Klassen vergeben

<ot>
klassenparties, saugeil
Ist die Steigerung dann Klassenkeile?
</ot>

[jowra]

Sorry Ingo, hatte Deinen Reply vorhin übersehen.

Natürlich brauchen z.B. Überschriften nicht mit einer Klasse formatiert werden. Gar keine Frage.

Zitat von ingo

tja, das ist wohl ansichtssache, den h1,h2,h3,p,div, blabla sind auch allgemeine auszeichner.

Nein, eben nicht. H1 ist ein Auszeichner für Überschriften, P ist ein Auszeichner für Absätze, A ist ein Auszeichner für Links. Das ist klar vorgegeben und diese sind darüber hinaus in allen Browsern vorformatiert, haben also schon eine bestimmte Schriftformatierung, -größe usw.).

DIV (für Block-Elemente) und SPAN (für Inline-Elemente) sind allgemeine, logische Auszeichnungselemente. Sie haben per sé erst mal keinerlei Definition.

Und die Kaskadierung besteht ja eben gerade darin (um auf die Fragestellung des Thread-Ersteller zurück zu kommen), daß ich mit SPAN nur vorübergehend die Text-Formatierung des Elternelementes (hier <P>) verändere. Deshalb definiere ich doch in dem Fall die Grundschriftart über p:

#container p { ... }

und passe dann bestimmte Sonderfälle per SPAN an, in dem Fall aber über eine Klasse um eine maximale Flexibilität zu erhalten. Ich codiere doch auch nicht ein DIV hart, alá:

DIV { ... }

sondern erledige das im Regelfall über einen ID-Selektor.

<div id="container"></div>

Zitat von ingo

ist aber alles wie gesagt ansichtssache. jeder wie er will.

Das sowieso. Nichtsdestotrotz finde ich auch mal solche "Grundsatzdiskussionen" interessant.

Zitat von jowra

...Nichtsdestotrotz finde ich auch mal solche "Grundsatzdiskussionen" interessant.

ich kann sie nicht mehr hören, bzw. lesen
das endet meist in erbsenzählerei, predigten und diskussionen über das verhältnis von form und funktion.

auf mich kannst du in so einer diskussion also nicht mehr zählen.

[jowra]

Zitat von AnnaStesia

@jowra: Das lese ich zum ersten Mal, hast Du dafür eine Quelle?

Ergibt sich eigentlich aus der tieferen Logik von CSS. Aber ich guck mal, was ich dazu finde.

Okay, ich gebe zu ich bin ein W3C-Standards-Geek und das ist vielleicht sogar etwas übertrieben. Mir reicht es meist nicht, wenn die Dokumente als XHTML 1.1 und CSS validieren, sondern ich möchte auch noch die "Warnungen" von HTML-Tidy und vom CSS-Validator verschwinden lassen. Da gewöhnt man sich diese penible Art an, auch wenn das CSS-File dadurch vielleicht sogar etwas größer wird.

Ein Klassenparty-Fan bin ich allerdings auch nicht, in dem o.g. Fall scheint es mir aber geboten.

Zitat von AnnaStesia

#text1,#text2,#text3 { alle angaben....;}
#text2 {hier aber eine andere schriftgröße als in text1...}
#text3 {hier eine andere stärke und decoration:underline;}
ist die Variante für Denkfaule wie mich, da muss man nicht groß kucken, wer wo wie steht, oder explizite Klassen vergeben

Ihr habt ja recht, ist ja auch eigentlich nichts gegen einzuwenden, Hauptsache "es läuft". In Deinem Beispiel hier würde CSS-Validator allerdings die Warnungen (nicht Fehler) ausgeben:

"#text2 - Schriftgröße bereits definiert"

weil Du sozusagen die Schriftgröße erneut definierst bzw. überschreibst.

Okay, okay... ich hör schon auf. *davonschleich*

----------

Edit: Hier mal noch ein Link der vielleicht etwas mehr veranschaulicht was ich meine:

http://de.selfhtml.org/css/formate/z...e.htm#div_span

[fettmme]

Um mal von Klassenparties un Erbsenzählerei wieder zurück zum Praktischen zu kommen …

NICHT sinnvoll ist es, Klassen nach Attributen zu benennen. Red ist ein gutes Beispiel für ein schlechtes Beispiel. Was passiert, wenn die Klasse red nach dem nächsten Relaunch nun grau sein soll?
Besser ist es, die Funktion der Klasse zu beschreiben. Z.B: class="nachrichten"

[AnnaStesia]

@ingo: Ja, Klassenkeile wäre dann sowas <div id="h1" class="arial center kursiv"><p class="weiss">Das ist<span class="unterstrichen">doof</span></p></div> Alles schon gesehen...

@jowra: so ein Validator ist halt auch nur kein Mensch, er kennt den Kontext eben nicht. Du kennst sicher die magischen Worte des großen Orakels "Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben" Das ist mir wurscht, so lange ich mich nicht mit der Maschine unterhalten und sagen kann "Du, ja ich weiss, das ist Absicht". Mehr Diskussion gibt's von meiner Seite auch nicht, soll jeder machen wie er will.