stylsheet temporär verändern

[kubinek]

hallo
habe ein sytlsheet in einer css Datei.
jetzt möchte ich aber für ein ganz bestimmtes das ich öfters verwende nur ab und an eine kleine Anpassung vornehmen.
z.B.
habe ich in der css-datei
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: lighter;
font-variant: normal;
color: #666666;
line-height: 120%;
margin-top: 1px;
  margin-bottom: 1px;
}
jetzt möchte ich das ich einen bestimmte Überschrift auch mal fett schreibe dabei möchte ich das stylsheet aber nicht verändern da es sich sonst auf alle h2's auswirken würde.
<h2>das sollte nun fett sein</h2>
mit <h2 style="font:bold">das sollte nun fett sein</h2>
funktioniert es nicht

weiss jemand warum?

Gruß
achim

[mrjerk]

Hallo,

<h2>das sollte nun fett sein</h2>
mit <h2 style="font:bold">das sollte nun fett sein</h2>
funktioniert es nicht

weiss jemand warum?

Die CSS-Eigenschaft heisst font-weight, nicht font - daran wirds liegen.

Generell ist es zu empfehlen, das Style-Attribut möglichst zu vermeiden, da Du sonst Inhalt (HTML) und Layout(CSS) vermischst, was für die Wartbarkeit schlecht ist.

Wenn Du nur bestimmte h2s auszeichnen möchtest, kannst Du z.b. mit IDs arbeiten - wenn mehrere h2s fett werden sollen, wäre zu überlegen eine eigene CSS-Klasse dafür zu definieren.

Eine andere Möglichkeit ist auch, das h2 abhängig vom Kontext zu formatieren, z.b. so:

.meineKlasse h2 {font-weight: bold}

(formatiert alle H2s fett, die innerhalb eines HTML-Elementes mit CSS-Klasse "meineKlasse" vorkommen)

Hope that helps,
Jörg

[Gunnar Bittersmann]

@@mrjerk:

nuqneH

Die CSS-Eigenschaft heisst font-weight, nicht font - daran wirds liegen.

Nicht ganz. 'font' als zusammenfassende Schrift-Eigenschaft gibt es auch. Als Wert wird aber zumindest Schriftgröße und Schriftartfamilie (wenn nicht ein Schlüsselwort) erwartet, Schriftdicke u.a. optional. [CSS2 §15.2.5]

Generell ist es zu empfehlen, das Style-Attribut möglichst zu vermeiden, da Du sonst Inhalt (HTML) und Layout(CSS) vermischst, was für die Wartbarkeit schlecht ist.

Full ACK.

Qapla'

[jackbauer]

Hallo Achim,
wenn du den Text mit css fett schreiben willst, musst du style="font-weight: bold;" verwenden und nicht style="font:bold;". Der von dir verwendete syntax ist falsch.

hallo
habe ein sytlsheet in einer css Datei.
jetzt möchte ich aber für ein ganz bestimmtes das ich öfters verwende nur ab und an eine kleine Anpassung vornehmen.
z.B.
habe ich in der css-datei
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: lighter;
font-variant: normal;
color: #666666;
line-height: 120%;
margin-top: 1px;
margin-bottom: 1px;
}
jetzt möchte ich das ich einen bestimmte Überschrift auch mal fett schreibe dabei möchte ich das stylsheet aber nicht verändern da es sich sonst auf alle h2's auswirken würde.
<h2>das sollte nun fett sein</h2>
mit <h2 style="font:bold">das sollte nun fett sein</h2>
funktioniert es nicht

weiss jemand warum?

Gruß
achim

[Gunnar Bittersmann]

@@jackbauer:

nuqneH

Der von dir verwendete syntax ist falsch.

Der von dir verwendete Grammatik auch. ;-)

die Syntax

Qapla'

PS: Bitte kein TOFU!

[kubinek]

Vielen Dank
an Alle
super...und rutscht mir alle gut ins neue Jahr
Gruß Achim

[Malcolm Beck´s]

hi,

mit <h2 style="font:bold">das sollte nun fett sein</h2>
funktioniert es nicht

Wie wäre es mit einer einfachen Klasse?

<h2 class="bold">das sollte nun fett sein</h2>

.bold {font-weight:bold}

So hast du sichergestellt, dass keine ausser diese <h2> Fett werden.

mfg

[Gunnar Bittersmann]

@@Malcolm Beck´s:

nuqneH

Wie wäre es mit einer einfachen Klasse?

Wie mrjerk schon sagte.

<h2 class="bold">das sollte nun fett sein</h2>

.bold {font-weight:bold}

Aber nicht so! Klassennamen sollten sich nicht auf die gegenwärtig gewünschte Darstellung beziehen, sondern auf das gemeinsame (strukturelle) Merkmal der klassifizierten Elemente.

Wenn bspw. die Überschriften von Teasern fett sein sollen, andere Überschriften nicht:

<h2 class="teaser-heading">Teaser-Überschrift</h2>

.teaser-heading { font-weight: bold }

So hast du sichergestellt, dass keine ausser diese <h2> Fett werden.

So hast du sichergestellt, dass bei späteren Änderungen der Darstellung die Klassenbezeichner nicht unsinnig werden oder gar das Markup geändert werden muss.

Qapla'

[Malcolm Beck´s]

hi Gunnar,

Wie wäre es mit einer einfachen Klasse?

Wie mrjerk schon sagte.

Mit dem Unterschied, dass die vorgeschlagene Klasse ein Container ist, dass diese Überschrift umgibt, wovon man aber nicht ausgehen kann.

Wenn bspw. die Überschriften von Teasern fett sein sollen, andere Überschriften nicht:
<h2 class="teaser-heading">Teaser-Überschrift</h2>

Wenn man etwas so Signifikantes zur Hand hat, dann natürlich, stimme ich dir zu.

So hast du sichergestellt, dass bei späteren Änderungen der Darstellung die Klassenbezeichner nicht unsinnig werden oder gar das Markup geändert werden muss.

Muss doch nicht ... ich habe eine Überschrift, die ich für wichtig halte, daher wird sie mit grösster Wahrscheinlichkeit Fett bleiben, und wenn jemand ohne CSS in seinem Browser ankommt, bekommt er eh alle Überschriften in Fett.
Nur, vielleicht habe ich irgendwann noch ein <h3>, dass ich in Bold möchte, soll ich dann im Markup und zusätzlich in der CSS Hand anlegen, statt auf eine geeignete Klasse zu greifen?
Du bist doch einer der Grossen verfechter des Mehraufwandes; ich auch :)

Und ja, wenn eine Änderung vorgenommen werden muss, bspw. am Design , dann macht das nichts. Der Text ist ja nach wie vor der selbe, und hat nach wievor die selbe Bedeutung -- wenn ich also ein Wort zuvor durchgestrichen darstellte, warum sollte ich für ein neues Design meine Meinung ändern und dieses Wort nicht mehr durchgestrichen darstellen wollen?

mfg

[Gunnar Bittersmann]

@@Malcolm Beck´s:

nuqneH

Wie mrjerk schon sagte.

Mit dem Unterschied, dass die vorgeschlagene Klasse ein Container ist, dass diese Überschrift umgibt, wovon man aber nicht ausgehen kann.

mjerk schlug auch vor, dem 'h2'-Element selbst eine Klasse zu geben: „wenn mehrere h2s fett werden sollen, wäre zu überlegen eine eigene CSS-Klasse dafür zu definieren.“

Wobei die Bezeichnung „CSS-Klasse“ unsinnig ist. Klassen sind Bestandteil des Markups (HTML), sie existieren völlig unabhängig vom Stylesheet. Und sie werden möglichst völlig unabhängig vom Stylesheet (d.h. der gewünschten Darstellung) benannt. _Danach_ kann man im Stylesheet per Klassenselektor auf sie zugreifen.

Wenn bspw. die Überschriften von Teasern fett sein sollen, andere Überschriften nicht:
<h2 class="teaser-heading">Teaser-Überschrift</h2>

Wenn man etwas so Signifikantes zur Hand hat, dann natürlich, stimme ich dir zu.

Das hat man – immer! Hat man kein gemeinsames Merkmal von Elementen, dann hat man keine Klasse.

Muss doch nicht ... ich habe eine Überschrift, die ich für wichtig halte,

Dann hast du <h2><strong>Überschrift, die ich für wichtig halte</strong></h2> im Markup – eine weitere Variante für den OP, das Gewünschte zu erreichen.

daher wird sie mit grösster Wahrscheinlichkeit Fett bleiben

Bei der Erstellung des Markups sollte man sich nicht auf Wahrscheinlichkeiten verlassen, sondern auf Sicherheiten. Dass eine Teaser-Überschrift eine Teaser-Überschrift belibt, ist sicher. Dass eine Teaser-Überschrift immer fett sein soll, ist nicht sicher.

Nur, vielleicht habe ich irgendwann noch ein <h3>, dass ich in Bold möchte, soll ich dann im Markup und zusätzlich in der CSS Hand anlegen, statt auf eine geeignete Klasse zu greifen?

Idealerweise nur im Stylesheet – ein geeigneter Selektor sollte sich finden lassen. Und falls nicht, dann hat man womöglich schon bei der Erstellung des Markups etwas falsch gemacht.

Die Website, an der ich (neben vielen anderen) arbeite, benutzt haufenweise präsentationsbezogene Klassen. Das macht immer wieder Ärger. Davon kann ich dir nicht nur ein Lied singen, sondern eine Oper.

Qapla'

[Malcolm Beck´s]

hi Gunnar,

wir haben uns da in eine Sackgasse geschrieben.

Ich stimme dir zu, was geeignete Klassennamen angeht; und gerade bold war jetzt ein ziemlich unsinniges Bsp., da, wie du schon angemerkt hast, Strong Ideal dafür ist -- ich bezog mich im unterbewussten eher auf Elemente, die Bspw. unterstrichen dargestellt werden sollen, oder durchgestrichen, oder eine bestimmte Farbe oder Border.
Für durchgestrichene Wörter kann man noch auf <del> zurückgreifen, für Farbige Wörter könnte man sich noch eine Bezeichnung für die besonderheit dieser Wörter ausdenken, was aber ist mit den anderen Spezifischen Fällen, die zu allem Überfluss auch noch in einem Absatz stecken?

Wobei die Bezeichnung „CSS-Klasse“ unsinnig ist. Klassen sind Bestandteil des Markups (HTML), sie existieren völlig unabhängig vom Stylesheet. Und sie werden möglichst völlig unabhängig vom Stylesheet (d.h. der gewünschten Darstellung) benannt. _Danach_ kann man im Stylesheet per Klassenselektor auf sie zugreifen.

Das ist doch der Punkt -- ich habe diverse Wörter, die ich unterstrichen darstellen möchte oder einem border. Wie löse ich das für Text in einem Absatz oder einem Wort in einer langen Überschrift? Wie will man diese Wörter bezeichnen?

Wenn man etwas so Signifikantes zur Hand hat, dann natürlich, stimme ich dir zu.

Das hat man – immer! Hat man kein gemeinsames Merkmal von Elementen, dann hat man keine Klasse.

Das stimmt -- nur, willst du von vornherein allen Elementen, die, weil sie ein Gemeinsames Merkmal haben, gleich eine Klasse verpassen? Es gibt ja ausnahmefälle, die sehr Selten vorkommen. Tja, und das führt unweigerlich zu Sinnvollen Klassenbezeichnungen. Wie gesagt, da will ich dir garnicht widersprechen -- gerade ich, der noch in den Anfängerschuhen steckt :)

Dann hast du <h2><strong>Überschrift, die ich für wichtig halte</strong></h2> im Markup – eine weitere Variante für den OP, das Gewünschte zu erreichen.

FULL ACK! Hätte man eigentlich früher drauf kommen können.

Idealerweise nur im Stylesheet – ein geeigneter Selektor sollte sich finden lassen. Und falls nicht, dann hat man womöglich schon bei der Erstellung des Markups etwas falsch gemacht.

Nein, nicht unbedingt. Ich sag ja, gerade was das Design angeht, kommt einem irgendwann mal ein Element unter, dass so spezifisch sein soll, dass jede bezeichnung irgendwie falsch ist, und man eine ID vermeiden möchte, weil man diese Eigenschaft ja doch wieder brauchen könnte ;)

Die Website, an der ich (neben vielen anderen) arbeite, benutzt haufenweise präsentationsbezogene Klassen. Das macht immer wieder Ärger. Davon kann ich dir nicht nur ein Lied singen, sondern eine Oper.

Ja, dass kenne ich von Wordpress -- das haut einem die Klassen um die Ohren, als wenn die Dinger umsonst wären. Da stimme ich dir wie gesagt auch absolut zu -- die weiter oben beschreibenen spezifischen Fälle bleiben aber trotzdem, wo mir keine Sinnvollen Bezeichnungen für einfallen wollen.

mfg

[Gunnar Bittersmann]

@@Malcolm Beck´s:

nuqneH

Das ist doch der Punkt -- ich habe diverse Wörter, die ich unterstrichen darstellen möchte oder einem border.

Warum? Warum gerade diese Wörter? Was haben sie Besonderes an sich? Die Antwort auf diese Frage ist auch die Antwort auf die nächte:

Wie will man diese Wörter bezeichnen?

Wenn du bespielsweise alle Personennamen kenntlich machen willst, könnte die Klasse "person" heißen. Im Stylesheet: .person { text-decoration: underline }

Dann fällt auf, dass es im Web äußerst ungünstig ist, im etwas anderes als Links Fließtext zu unterstreichen. (Das hätte einem aber auch gleich einfallen können!) Kein Problem: Änderung im Stylesheet: .person { text-transform: uppercase }, keine Änderung im Markup.

Und auch, wenn die Personen gar nicht hervorgehoben werden sollen, wird dadurch die Klasse "person" ja nicht falsch.

Das stimmt -- nur, willst du von vornherein allen Elementen, die, weil sie ein Gemeinsames Merkmal haben, gleich eine Klasse verpassen?

Gute Frage. Wenn es in HTML ein 'person'-Element geben würde, würde man es ja auch nutzen. Da es das nicht gibt, halt 'span[@class="person"]'.

HTML ist aber nicht zur semantischen Auszeichnung von Textinhalten gedacht. Und für alle Eventualitäten kann man sicher nicht vorsorgen.

Qapla'