StyleSheet

Valid CSS!http://jigsaw.w3.org/css-validator/validator?uri=http://www.msxfaq.de/msxfaq2005.css

Um eine klare Trennung von eigentlichem Inhalt und der Formatierung zu erreichen, werden alle Formate über CSS definiert. Dabei kommen im Stylesheet Definitionen für normale Tags, ID und Class zu Einsatz

/* Text = normale Tags */
/* #text = ID, darf nur einmal je Seite vorkommen*/
/* .name = Class, darf mehrfach vorkommen und ist in FP auch in der Formatleiste zu sehen */

Zusätzlich wird mit der Sonderfunktion  @media print { xxxx} für den Ausdruck abweichende Formate definiert. Das Stylesheet wird mit "<link rel="stylesheet" type="text/css" href="msxfaq2005.css"> auf jeder Seite eingebunden. Das übernimmt aber der Einfachheit halber gleich die DWT-Vorlage, auf der alle Seiten aufbauen.

Due Nutzung von CSS hat aber auch noch weiteren Vorteil, dass die Formate alle im StyleSheet definiert werden und Sie als Anwender bei den moderneren Browsers sich sogar eigene alternative CSS-Vorlagen hinterlegen können.

Standard Tags

Natürlich werden auch auf der MSXFAQ einige Standardformate per CSS vorgegeben:

Tag Format Beschreibung
body, td, th, p, ul, ol, li,h1, h2, h3, h4, div, address, blockquote, nobr font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #000000;		 Standard
a:link background: none; color: #009 ; text-decoration: none normaler Link
a:visited background: none; color: #009 ; text-decoration: none besuchter Link
a:hover background: none; color: #009 ; text-decoration: underline Mouseover Link
a img background: inherit; color: inherit; border: none IMG Link
form  margin-bottom: 0px Formularrand minimieren

ID-Definitionen (Blöcke)

Folgende Definitionen sind für Blöcke (Prefix:#) definiert, die nur einmal je Seite vorkommen können.

Tag Format Beschreibung
#Header Position oben fix, auch beim Ausdruck Kopfbereich
#Footer Position unten fix, auch beim Ausdruck Fußzeilen
#Breadcrumb Position unter Header Navigationsübersicht
#menu Position links fix, nicht beim Ausdruck Menüleiste.
Primär um alternative Formate für die Aufzählung nutzen zu können
#content Position rechts neben Menu Inhalt
#nocss Display:none Information für nicht CSS-tauglichen Browser

Sie werden genutzt, um geschachtelte CSS-Klassen zu definieren, z.B. die Aufzählung im Menü hat ein anderes Format als eine Aufzählung im Content.

CLASS-Definitionen

Folgende Definitionen dienen der Formatierung von Absätzen. Sie sind im CSS mit "." Als Prefix definiert

Tag Format Beschreibung
A:   Hyperlinks normal, besucht, aktiv
.menu:LI LI { list-style-type: disc; list-style-image: url('http://www.msxfaq.de/images/bullet.gif') } Aufzählungszeichen bei den Menüs
.content:H1   Format der Überschrift H1
.content:H2   Format der Überschrift H1
.content:TABLE 90%, zentriert Rahmen 1-zeilig Basisformat für alle Tabellen im Content
.content:TH background-color : #EFEFEF; Überschrift von Tabellen
.content:TH:LI   Abweichende Formatierung für Aufzählungen in Tabellen
.content:KB   Kennzeichnung von Knowledgebase (Qxxxxx oder 6-stellige Nummern)
.content:LI LI { list-style-type: disc; list-style-image: url('http://www.msxfaq.de/images/bullet.gif') } Aufzählungszeichen im Content
.content:PRE   Codelistings
.content:Key   Keyword. Wird z.B. im Index verwendet
.download grauer Block, umstrichelt, zentriert Kennzeichnung von Downloads
.image zentriert Formatierung für Bilder im Text
.blockwarn Roter Block, zentriert Warning
.blockinfo Grüner Block, zentriert Infomail
.zitat   Zitieren von Informationen von anderen Quellen

 

Download

BlockWarn

BlockInfo

Zitat

Code

Baustelle

Zusammenfassung am Anfang jeder Seite

Unterstützung durch Net at Work:
Infoblock mit Hinweise auf Mehrwerte durch NetatWork. Auch die MSXFAQ hat Grenzen und dann ist die Zeit für Dienstleistung.

 

Zeichenformate

Zusätzlich gibt es noch einige Formate, die für individuelle Zeichen, Worte etc. verwendet werden

Tag Format Beschreibung
SPAN.COL1   Rot  bzw. unterstrichen bei DRUCK
SPAN.COL2   Grün bzw. invers bei Druck
SPAN.COL3   Blau bzw. Kursiv bei Druck
SPAN.COL4   Gelb bzw. fett bei Druck

Durch das Prefix "SPAN" nutzt Frontpage diese Styles als Klassen für Spam-Tags

Damit ist es natürlich besonders einfach auch entsprechende Worte mit CSS zu formatieren.

Weitere Links

Keywords:Backstage CSS StyleSheet