CSS nachträglich??

[Carolin Kloskalla]

Hallo,

ich habe mit Frontpage 2000 ein Web erstellt. Mein Chef will jetzt doch, dass mit Style Sheets gearbeitet wird. Kann ich so etwas nachträglich noch machen? Wie kann ich die Formatierungen von Tabellen und Texten in eine CSS-Datei übernehmen?

Danke für die Hilfe
carolin

[Mathias Simmack]

Hallo,

Das geht prima, und ist eigentlich auch ideal. Wenn du nämlich am Design (Schrift, Farbe usw.) etwas ändern willst, dann musst du das nur in der CSS-Datei tun, und es hat Auswirkungen auf alle HTML-Seiten, die diese CSS-Datei nutzen.

Sagen wir als Beispiel, du benutzt die Schriftart "Tahoma", schwarz, in Größe 10 als generelle Schrift der Seite. Dann sieht das in der CSS-Datei etwa so aus:
<PRE>body { font-family:Tahoma<i><font color=#c0c0c0>,Arial,...</font></i>; font-size:10pt; color:#000000; background-color:#ffffff; }</PRE>
Du kannst auch mehr Schriftarten angeben, wie du siehst. Und du kannst nach dem Tag "body" auch gern "p" und "td" angeben, jeweils durch Komma getrennt, dann beziehen sich die Angaben gleich noch auf Textabsätze und Tabellen. )
Und bei Links ist´s ebenso leicht:
<PRE>a:link,a:hover,a:active,a:visited { font-family:Tahoma; font-size:10pt; color:#0000ff; }</PRE>
usw.

Wie du Stylesheets einbindest, weißt du?
Falls nicht:
<pre>
&lt;html&gt;
&lt;head&gt;
&lt;link rel=stylesheet type="text/css" href="Dateiname.css"&gt;
...
</PRE>
Gruß,
Mathias

[Carolin Kloskalla]

Hallo Mathias,

danke! Kannst Du mir vieleicht auch sagen, iwe ich die Formtierungen von Tabellen in die CSS-Datei bekomme? Kann ich sie einfach aus dem Quelltext entfernen und in die CSS-Datei schreiben? Oder ist es besser für die Tabellen iegene CSS-Dateien zu schreiben und diese nur in den entsprechenden Tag einzufügen?

MfG
Caroli

[Mathias Simmack]

Hi Carolin,

was meinst du denn mit Formatierung? Die Größen- und Breitenangabe z.B.? Wenn ja, dann würde ich sagen, die lässt du im HTML-Text. Ich muss nämlich gestehen, ich weiß nicht, ob man die auch in einer CSS angeben kann. Möglicherweise steht bei SelfHTML ja was dazu ...

Generell würde ich sagen, du müsstest deinen HTML-Text mal durchsehen und evtl. überflüssige Formatierungen entfernen. Ein Beispiel wären Deklarationen im "body"-Tag:
<PRE>&lt;body vlink=....&gt;</PRE>
Weil du das ja in der CSS-Datei stehen hast (haben solltest ;o), ist es im HTML-Text nicht mehr erforderlich. Es besteht bloß die Gefahr, die Angaben der CSS quasi zu überschreiben und zu ignorieren.

Wenn du spezielle Sachen machen willst, empfehle ich CSS-Definitionen wie diese z.B.:
<PRE>.MeineTabelle { border:#ff0000 2px solid; background-color:#c0c0c0; color:#000000; }</PRE>
Die bindest du dann im HTML-Text so ein:
<PRE>
&lt;html&gt;
...
&lt;body&gt;
&lt;table border="0" cellspacing="0" <i>bla bla</i> class="MeineTabelle"&gt;
...
</PRE>
Wenn ich den Code dabei nicht verhauen habe, müsste das Ergebnis eine Tabelle mit hellgrauem Hintergrund, schwarzer Schrift und einem hässlichen, 2 Pixel breiten roten Rahmen sein. )
Aber in jedem Fall bleiben evtl. andere Tabellen davon unbeeindruckt, weil du ja einen speziellen Klassennamen verwendet hast.

Mathias

[Christian Marquardt]

Es ist ein ungünstiger Weg den Stylesheet direkt an das Tag zu binden.

Besser ist es eine Stylesheetdatei zu verwenden, die dann allen Seiten der Website zur Verfügung steht.

So wird die Datei im HEAD in jede Seite eingebunden (relative Pfadangabe beachten):

<LINK REL="STYLESHEET" HREF="../../mystyle.css">

So könnte die Stylesheet-Datei selbst aussehen:

Das TAG, welches ich mit speziellen Werten versehen wiil wird hier aufgenommen.

BODY {

margin-left: 0px;

margin-top: 0px;

margin-bottom: 0px;

margin-right: 0px;
}

TD, P, UL, OL, SUB, SUP, BLOCKQUOTE {

font-family: Helvetica, Arial;

font-size: 12px;

}

H2 {

font-family: Helvetica, Arial;

font-size: 18px;

font-weight: bold;

color: #003163;

}

H3 {

font-family: Helvetica, Arial;

font-size: 16px;

font-weight: bold;

color: #003163;

}

H4 {

font-family: Helvetica, Arial;

font-size: 13px;

font-weight: bold;

color: #003163;

}

H2 SMALL {

font-size: 16px;

}

H3 SMALL {

font-size: 14px;

}

SMALL {

font-size: 11px;

[Mathias Simmack]

<b>Zitat:</b><br>
<i>Es ist ein ungünstiger Weg den Stylesheet direkt an das Tag zu binden.<br><br>Besser ist es eine Stylesheetdatei zu verwenden, die dann allen Seiten der Website zur Verfügung steht.</i><br><br>
Hm, ... hab´ ich denn was anderes behauptet?<br>Mathias

[markus lemcke]

hi carolin,

mathias sein "das geht prima" klingt sehr euphorisch. auch ich habe ohne style-sheets begonnen und meine seite umgestellt! gehen tut es au jeden fall, nur je nachdem wie groß die seite ist (meine hat ca. 200 html-seiten) ist das entsprechend zeit intensiv!

gruß

marku

[Mathias Simmack]

Zwei Jahre später? ... )

Ich bin nach wie vor für Stylesheets. Mittlerweile würde ich aber bspw. XML bevorzugen. Ich habe mal einen Offline-Test gemacht. Ergebnis: musste ich früher x HTML-Dateien anpassen, beschränkte sich meine Änderung nur noch auf das XSL-Stylesheet. Die XML-Dateien wurden damit entsprechend interpretiert und vom Browser (IE und Mozilla) wie die HTML-Seiten dargestellt.

Nur leider fehlt auf dem Server, auf dem meine Homepage liegt, der XML-Eintrag in der Apache-Konfig. Aus dem Grund kann online nur der IE die XML-Dateien richtig interpretieren. (

Also ändere ich nach wie vor auch meine Stylesheets von Hand.

Gruß

[markus lemcke]

hi mathias,

auch ich finde style-sheets prima!
was mir aber in der praxis oft probleme macht ist die browser-kompatibilität!

ich bin gerade dabei mich mit style-sheets näher zu beschäftigen. kannst du was empfehlen, welche aufgaben (auch design-technisch) man mit style-sheets unbedingt machen sollte und welche lieber nicht?

zu eingangsbemerkung:
3 jahre später

gruß

marku

[Mathias Simmack]

Ich habe keine großen Probleme mit Stylesheets, muss ich mal so sagen. Meine Seite sieht im IE, Mozilla und Opera zu 99% identisch aus.

Was man machen sollte, wären IMHO Sachen wie Tabellengestaltungen u.ä.

Beispiel: du erstellst eine Tabellenklasse mit Farben usw. Dann erstellst du untergeordnete Klassen für Elemente, die in der Tabelle drin sein können; Links etwa

<pre>table.Navigation {
width:200px;
}<br>
table.Navigation th {
background-color:#0000a0;
color:#ffffff;
padding:3px;
}<br>
table.Navigation td {
border-right:#0000a0 thin dotted;
border-bottom:#0000a0 thin dotted;
background-color:#dddddd;
color:#000000;
padding:2px;
}<br>
table.Navigation a:link {
background-color:transparent;
color:#0066ff;
text-decoration:underline;
}<br>
table.Navigation a:visited {
background-color:transparent;
color:#996600;
text-decoration:underline;
}<br>
table.Navigation a:hover {
background-color:transparent;
color:#cc9900;
text-decoration:underline;
}</pre>

Die Anweisungen für die Links gelten nur für die Tabelle "Navigation". Deine übrigen Links auf der Seite können grün auf rot sein, die Links in der Tabelle werden immer blau sein und bei Berührung orange werden.

Solche Dinge würde ich via CSS gestalten, weil sie den HTML-Code klein halten und weitreichendere Änderungen erlauben.

Ansonsten, wenn du die Möglichkeit hast, kannst du dich ja auch mal mit PHP usw. befassen. Da bestünde die Möglichkeit, Inhalt und Layout zu trennen. Sprich: deine Seite besteht bspw. aus Textdateien mit News, Downloadangeboten, usw. Diese Textdateien werden via PHP geladen und als HTML an den Besucher weitergereicht.
Jede Designänderung würde nur eine Änderung im PHP-Code voraussetzen. Deine Textdateien könnten immer gleich bleiben.

Gruß