Welche Formatierungs-Arten am besten: CSS oder HTML oder anderes?
Eingetragen von Dirki (180)am 17.09.2008 - 17:04 Uhr in
Welche Art der Formatierungs-Angaben ist am sinnvollsten zu Verwenden (z.B. in Beiträgen, Artikeln etc.) in Drupal bei Aktivierung von "Full HTML" (vor allem auch ohne Verwendung eines Editors)?
Ich vermute CSS-Formatierungen wie diese sind optimal und
<img style="border-width:1px; border-color:#EFEFEF; background-color:#FFFFFF; padding:6px; border-style:solid;" src="/beispiel" alt="" />
sind HTML-Angaben wie diesen vorzuziehen:
<img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum">
Insbesondere auch, wenn man irgendwann einmal das Theme wechseln sollte, wäre es vorteilhaft, wenn alle verwendeten Formatierung sich automatisch anpassen würden. Wie kann man das am besten gewährleisten?
Würde man z.B. das schreiben,
<font size="5"><span style="font-f<span style="color:#FFFF00;">Example</span>Family:'@Kozuka Gothic Pro H'"></span></font>
würde bei einer Wechselung des Themes diese Formatierung beibehalten, sich also nicht an das neue Theme anpassen, was mir nicht wünschenswert scheint.
Nette Grüße, Dirk
- Anmelden oder Registrieren um Kommentare zu schreiben
Inline Styles überwiegen immer
am 18.09.2008 - 07:06 Uhr
Hallo Dirk,
das Problem ist, dass inline styles wie z.B. etc. immer Vorrang haben und vorherige CSS-Definitionen somit überschreiben. Wenn Du tatsächlich sauber bleiben willst bezüglich der Formatierung wäre es am sinnvollsten, Klassen in deiner Haupt-CSS (styles.css?) zu erstellen, und diese Klassen dann auch beim Erstellen von Beiträgen zu verwenden. So kannst Du sicher sein, dass wenn du z.B. die Klasse .contentHeadline hast und diese immer in den Beiträgen verwendest, Du sie auch nur in der Haupt-CSS definieren/anpassen musst, um sie überall zu ändern.
Viele Grüße,
www.maximago.de
Vielen Dank für die
am 18.09.2008 - 08:55 Uhr
Vielen Dank für die Antwort, maximago,
ja, das wäre ja vielleicht noch einfacher, besser, eine zentrale CSS-Datei verwenden zu können.
Ich müßte dann bei einem Theme-Wechsel die CSS-Angaben der style.css - die, wie ich gerade einmal nachgesehen habe, es wohl für jedes Theme gibt (?) und die wohl dann die Formatierunen enthält, die in "Artikeln", "Seiten", allen Beitragsformen etc., also in allen von Nutzern, Admins geschriebenen Beiträgen, angewendet wird - kopieren und in die style.css des jeweils neuen Themes einfügen, stimmt das?
In dieser style.css - und wohl auch anderen CSS-Dateien desselben Themes - sind ja bestimmt die vom jeweiligen Theme vorgegebenen Formatierungen, die sich auf die Darstellung aller Beiträge (und des Themes selber) auswirken, enthalten. Wenn ich also erstrangig will, daß eben diese theme-eigenen Formatierungen angewendet werden, muß ich einfach die üblichen HTML-Tags verwenden wie derartige (ohne "Klassen" oder "id" zu bilden)
<small></small><br>
<big></big>
<b></b>
<i></i>
<h1></h1>
<h3></h3>
<p></p>
und nicht z.B. welche, wie die folgenden, oder?
<div style="text-align:right;"></div><div style="text-align:justify;"></div>
<span style="text-decoration:underline;"></span>
<span style="color:#804000;"></span>
<span style="font-family:"></span>
das Problem ist, dass inline styles wie z.B. etc.
Inline-Styles sind welche, wie diese hier, oder?
<img style="border-width:1px; border-color:#EFEFEF; background-color:#FFFFFF; padding:6px; border-style:solid;" src="/beispiel" alt="" />Wenn Du tatsächlich sauber bleiben willst bezüglich der Formatierung wäre es am sinnvollsten, Klassen in deiner Haupt-CSS (styles.css?) zu erstellen, und diese Klassen dann auch beim Erstellen von Beiträgen zu verwenden.
Hierbei wäre aber bestimmt der Nachteil - vermute ich - daß die selbsterstellten Formatierungen zwar für das gegenwärtig verwendete Theme paßt, aber eventuell nicht für ein anderes, z.B. nach einem Theme-Wechsel. Wenn ich also z.B. eine Klasse gebildet habe, z.B.
<h3 class="rot"></h3>
in css:
h3.rot {
font-weight:bold;
font-size:20px;
font-color:rot;
font-family:Garamond Premr Pro Smbd
}
die zu dem gegenwärtig genutzten Theme paßt, wird diese h3-Überschrift bei einem anderen Theme ja weiterhin genauso aussehen und eventuell nicht zu dem anderen Theme passen, möglicherweise weil sie zu groß oder rot ist, oder?
Vielen Dank, nochmals, nette Grüße, Dirk
---------------------------------------------------------------------------
www.galerie-der-fotos.de
CSS
am 18.09.2008 - 09:30 Uhr
Moin!
...
die zu dem gegenwärtig genutzten Theme paßt, wird diese h3-Überschrift bei einem anderen Theme ja weiterhin genauso aussehen und eventuell nicht zu dem anderen Theme passen, möglicherweise weil sie zu groß oder rot ist, oder?
Nicht, wenn Du sie in dem neuen Theme überschreibst.
Allerdings würde ich niemals (tm) so spezifische Klassennamen verwenden. Besser wäre in dem Fall
<h3 class="colored-header medium-size">...</h3>und dann
h3 {font-weight: boldM}h3.colored-header {color: #dd0000;}
h3.medium-size {font-size: 1.8em; font-family: Garamond Premr Pro Smbd;}
So bleibt der Klassenname getrennt vom eigentlichen Stil und beschreibt nur das, was er soll: eine Stil-Klasse.
Ansonsten sind CSS-Klassen der Verwendung von inline-CSS vorzuziehen. Ist einfach besser zu händeln.
Stefan
Moin Stefan, vielen
am 18.09.2008 - 10:57 Uhr
Moin Stefan, vielen Dank.
Nicht, wenn Du sie in dem neuen Theme überschreibst.
Du meinst, dann dem neuen Theme im Style Sheet anpaßt?
h3 {font-weight: boldM}h3.colored-header {color: #dd0000;}
h3.medium-size {font-size: 1.8em; font-family: Garamond Premr Pro Smbd;}
Bin mir nicht ganz sich zu verstehen: was bringt das genau für Vorteile? Daß man wahlweise nur einen Teil der Formatierungen wählen kann? h3.medium-size erbt dann wohl die Eigenschaften von h3, oder?
Aber solche Klassen wie
span.fett {font-weight:bold}kann ich doch vergeben, oder?
Gut, also auf jeden Fall CSS-Klassen...
Wenn man also eine zentrale CSS-Datei verwendet, hat das ja, wenn ich recht verstehe, erhebliche Vorteile auch gegenüber der Verwendung eines Editors wie FCKeditor, denn bei seiner Nutzung, wäre der Aufwand - je nach Anzahl der damit geschriebenen Beiträge - bei einem Wechsel des Themes und gegebenenfalls gewollter optischen Anpassung der Beiträge an das neue Theme möglicherweise ja gigantisch, oder?
Danke, nochmals, nette Grüße, Dirk
---------------------------------------------------------------------------
www.galerie-der-fotos.de
CSS
am 18.09.2008 - 14:05 Uhr
Nicht, wenn Du sie in dem neuen Theme überschreibst.
Du meinst, dann dem neuen Theme im Style Sheet anpaßt?
Genau.
Bin mir nicht ganz sich zu verstehen: was bringt das genau für Vorteile? Daß man wahlweise nur einen Teil der Formatierungen wählen kann? h3.medium-size erbt dann wohl die Eigenschaften von h3, oder?
Richtig. Erst wertet der Browser die Regeln für
h3aus, dann fürh3.medium-size.Je spezifischer man bei den Klassenaufrufen ist, desto später wird die Anweisung vom Browser umgesetzt. Soll heissen:
<div id="test" class="testKlasse">
<h3 class="medium-size">Test</h3>
</div>
h3.medium-size {font-size: 1.3em;}
#test h3.medium-size {font-size: 1.7em;}
div h3.medium-size {font-size: 1.4em;}
h3 {font-size: 1.2em;}
#test .medium-size {font-size: 1.6em;}
.testKlasse .medium-size {font-size: 1.5em;}
würde Dir daen Text mit Schriftgröße 1.7em ausgeben.
Wenn man also eine zentrale CSS-Datei verwendet, hat das ja, wenn ich recht verstehe, erhebliche Vorteile auch gegenüber der Verwendung eines Editors wie FCKeditor, denn bei seiner Nutzung, wäre der Aufwand - je nach Anzahl der damit geschriebenen Beiträge - bei einem Wechsel des Themes und gegebenenfalls gewollter optischen Anpassung der Beiträge an das neue Theme möglicherweise ja gigantisch, oder?
Ja, eigentlich schon.
Der Vorteil von CSS ist ja, dass man nicht nur direkt die Klasse referenzieren kann, sondern quasi auch den Pfad zum Element.
Also kann man beispielsweise auch
html.js body.not-front #page #squeeze div.content #comment-form div.form-item div.resizable-textarea #editor-0 #edit-comment {background: #0000dd; }Für das Eingabefeld beim Antworten auf diesen Beitrag verwenden :-).
Stefan
Vielen Dank für die
am 18.09.2008 - 15:02 Uhr
Vielen Dank für die Beispiele, Stefan.
<div id="test" class="testKlasse">
<h3 class="medium-size">Test</h3>
</div>
h3.medium-size {font-size: 1.3em;}
#test h3.medium-size {font-size: 1.7em;}
div h3.medium-size {font-size: 1.4em;}
h3 {font-size: 1.2em;}
#test .medium-size {font-size: 1.6em;}
.testKlasse .medium-size {font-size: 1.5em;}
würde Dir daen Text mit Schriftgröße 1.7em ausgeben.
Findet so etwas in der Praxis Anwendung oder ist das nur zur Veranschaulichung? Also, ein Punkt mit folgendem Klassen-Namen bedeutet, jedes Element (z.B. p, h1), das im "body" diese Klasse oder "id" erhält
(z.B. <h1 class="testKlasse"> oder <h1 id="test">)kriegt dann ebendiese Formatierung, die in der CSS-Datei für sie festgelegt wurde.
html.js body.not-front #page #squeeze div.content #comment-form div.form-item div.resizable-textarea #editor-0 #edit-comment {background: #0000dd; }
Für das Eingabefeld beim Antworten auf diesen Beitrag verwenden :-).
Sieht auf jeden Fall kompliziert aus, und ich würde es gerne verstehen, aber...
Vielen Dank nochmals, nette Grüße, Dirk
---------------------------------------------------------------------------
www.galerie-der-fotos.de
CSS
am 18.09.2008 - 15:16 Uhr
Findet so etwas in der Praxis Anwendung oder ist das nur zur Veranschaulichung?
Ja und ja :-)
Also, ein Punkt mit folgendem Klassen-Namen bedeutet, jedes Element (z.B. p, h1), das im "body" diese Klasse oder "id" erhält
(z.B. <h1 class="testKlasse"> oder <h1 id="test">)kriegt dann ebendiese Formatierung, die in der CSS-Datei für sie festgelegt wurde.Genau.
Und beim etwas längeren Beispiel ist das ein Element mit der Id "edit-comment" in einem Element mit der Id "editor-0" in einem div-Element mit der Klasse "resizable-textarea" in einem div-Element mit der Klasse "form-item" in ... dem body-Element (so es denn die Klasse "not-front" hat) im html-Element (so es denn die Klasse "js" hat). :-)
Sieht auf jeden Fall kompliziert aus, und ich würde es gerne verstehen, aber...
http://w3schools.com/css/default.asp ist da ein erster Einstieg.
Und falls Dir langweilig ist: http://www.w3.org/TR/CSS2/ :-)
Stefan
Okay, vielen Dank für
am 18.09.2008 - 15:53 Uhr
Okay, vielen Dank für Erklärungen und Links,
werde mich dort also mal ein bißchen umsehen...
Nette Grüße, Dirk
---------------------------------------------------------------------------
www.galerie-der-fotos.de