<style type="text/css">
<!--
body {
background-color: #CCCC99;
background-image: url(../img/shadow2.gif);
background-repeat: repeat-y;
background-attachment: fixed;
color: #793300;
margin: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
scrollbar-face-color: #CCCC99;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #999999;
scrollbar-darkshadow-color: #505050;
scrollbar-track-color: #E0CC98;
scrollbar-arrow-color: #000000;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a {
color: #336600;
}
a:link {
color: #336600;
}
a:visited {
color: #999900;
}
a:hover {
color: #CC0000;
}
p {
margin-top: 0.5%;
}
h1, h2, h3, h4, h5, h6{
margin-top: 3%;
margin-bottom: 0.2%;
}
h1 {
font-size: 24px;
font-weight: normal;
color: #990000;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 0.1em;
}
h2 {
font-size: 13px;
font-weight: bold;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #4B7852;
}
.codescript {
font-family: "Courier New", Courier, mono;
font-size: 12px;
color: #666666;
}
table.rand td {
border: 1px solid #666600;
margin: 5px;
padding: 5px;
}
table.rand th {
border: 1px solid #666600;
margin: 5px;
padding: 5px;
background-color: #C0C081;
font-weight: bold;
}
table.back td {
margin: 5px;
padding: 5px;
background-color: #C0C081;
}
table.back th {
margin: 5px;
padding: 5px;
background-color: #C1B37D;
font-weight: normal;
font-size: 14px;
text-align: left;
color: #660000;
}
select {
background-color: #E7DDBA;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #4F4F26;
}
input {
background-color: #E4E4C9;
background-image: url(../formular/butback.gif);
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
color: #4F4F26;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #E1E1C1;
border-left-color: #E1E1C1;
border-bottom-color: #878743;
border-right-color: #ACAC57;
}
input.textfeld {
background-color: #E7DDBA;
font: 13px Verdana, Arial, Helvetica, sans-serif;
color: #4F4F26;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-bottom-color: #E1E1C1;
border-right-color: #E1E1C1;
border-top-color: #878743;
border-left-color: #ACAC57;
background-image: url(../formular/textback.gif);
background-repeat: no-repeat;
background-color: #E7DDBA;
padding-left: 10px;
}
textarea {
font: 12px Verdana, Arial, Helvetica, sans-serif;
background-color: #E7DDBA;
background-image: url(../formular/textarea.gif);
background-repeat: repeat-y;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-bottom-color: #E1E1C1;
border-right-color: #E1E1C1;
border-top-color: #878743;
border-left-color: #ACAC57;
color: #4F4F26;
padding-left: 10px;
}
-->
</style>
Hier ein Style Sheet, den ich persönlich in abgeänderter Form gern benutze. Die Style Sheet Datei habe ich ausgelagert sie heißt standard.css
hier wird eine generelle Schriftart Verdana mit einer bestimmten Größe in Pixeln festgelegt. Damit auch ältere Browser innhalb von Tabellen diese Schriftgröße nutzen habe ich im td Tag die Größe nochmals aufgeführt.
Außerdem wurde hier die Hintergrundfarbe, sowie ein Hintergrundbild (Schatten am linken Rand) definiert und für IE Browser farbige Scrollleisten.
Damit ich nicht auf jeder Seite im Body Tag die Links formatieren muss, habe ich auch dazu Style Sheets angelegt, wobei die Farbe für a und a.link identisch sein sollte.
Ich ziehe es vor, dass Überschriften einen kleineren Abstand zum nächsten Absatz haben. Deswegen wurden generell für alle Überschriften und auch für das p-Tag die Abstände definiert. Die Unterschiede der verschiedenen Überschriften werden dann nochmals getrennt aufgeführt.
Eine selbst definierte Schriftformatierung für bestimmte Textpassagen wurde hier .codescript genannt. Sie wird mittels span-Tag zugewiesen.
Unter den selbst vergebenen Namen .rand habe ich mir ein Style Sheet geschustert, welches man table Tags zuweisen kann, um schöne Ränder mit Abstand zu erzeugen. Vorrausetzung ist, dass die Tabelle keine margin und padding Zuweisungen erhält. Das Ergebnis sieht so aus:
Tabellenformatierung | |
---|---|
Hier eine einzelne Tabellenzelle. Die Formatierung namens rand muss nur einmal der Tabelle zugewiesen werden, so erhalten alle td Tags die entsprechende Formatierung. Die <th> Tags sehen dann so aus, wie die erste Zeile dieser Tabelle. <th> Tags brauchen nicht in der ersten Zeile eingefügt werden. Man kann sie jeder Zelle zuweisen. | Die Zuweisung sieht dann im Quelltext folgendermaßen aus: <table class="rand"> Siehe auch das Thema Verschachtelung. |
Darunter habe ich noch eine zweite Tabellenformatierung namens .back eingefügt. Dieses Stylesheet wurde der Tabelle des Formlars (unten) zugewiesen.
Die Stylesheets für die einzelnen Formularelemente. Lediglich die einzeiligen Textfelder brauchen die spezielle Zuweisung class="textfeld"
Stylesheet | Formularelement | Zuweisung |
---|---|---|
input.textfeld | einzeilige Textfelder | class="textfeld" |
textarea | mehrzeilige Textfelder | |
select | Auswahllisten | |
input | Schaltflächen und alle anderen Elemente |
Copyright Vermerk:
Die hier verwendeten Grafiken sind nicht frei und dürfen auf keiner anderen Homepage verwendet werden. Wenn alle das gleiche Design haben, wird es langweilig.
Startseite | nächste Seite | ![]() |