topWebHamster |
| offizielle Dokumente zum Thema CSS |
| die aktuelle offizelle Empfehlung zu CSS 2.0 (englisch) |
|
| Übersicht der Aktivitäten zu CSS, auch Hinweise zur geplanten Version 3.0 (englisch) |
http://www.w3.org/Style/CSS/current-work
|
Validierungsservice des W3C (deutsch)
hier kann man sein CSS auf korrekte Syntax prüfen
|
http://jigsaw.w3.org/css-validator/
|
der topwebHamster schafft die Validierung übrigens nicht, es sind etliche StyleSheets enthalten, die IE- spezifisch sind und nicht zum CSS 2.0 gehören:
- farbige Scrolleisten
- Borderstyles
- Unter- und Überstreichen von Hover- Links
|
|
| CSS Tutorial |
dieses Tutorial entstand in Zusammenarbeit mit www.webnetline.de
| 1. Einführung |
Den Gestaltungsmöglichkeiten mit CSS setzen die Beschränkungen der Browser noch Grenzen. HTML bedeutet »Hypertext Markup Language« und ist eine sogenannte Auszeichnungssprache...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 2. CSS in HTML integrieren |
Style Sheets lassen sich auf verschiedene Weisen in HTML einbinden. Zunächst einmal gibt es die Möglichkeit der Schnellformatierung im Text...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 3. zentrale Formate und Unterklassen |
Style-Sheet-Vorlagen definieren die Eigenschaften für HTML-Befehle wie Absatztypen oder Tabellen. Wenn Sie das entsprechende HTML-Tag dann in der HTML-Datei verwenden, werden diese Formate angewendet. Dazu notieren Sie zuerst das gewünschte HTML-Tag und zwar ohne spitze Klammern, gefolgt von den Style-Sheet-Angaben für dieses Tag, eingeschlossen in geschweiften Klammern...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 4. Schriften |
Unter Schriftarten sind Schriften wie etwa Arial, Helvetica, Times New Roman zu verstehen. Auch Schriftfamilien wie Sans Serif und ähnliche gehören dazu. Ob allerdings die schicke Kunstschrift, die sich so toll bei Ihnen auf der Seite macht, beim Anwender auch angezeigt wird, ist eine andere Frage...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 5. Farben |
Deutlich mehr Freiheit als in HTML haben Sie in CSS auch beim Definieren von Farben...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 6. exakte Ausrichtung |
Die Zeit der Dummy-Grafiken als Abstandshalter ist vorbei. Diese arbeitsintensive Fummelei zur Erzeugung wunschgemäßer Einzüge übernimmt ab sofort CSS - und dies sogar viel eleganter...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 7. Rahmen |
Nicht nur Kunstwerke kommen erst mit einem schmückenden Rahmen richtig zur Geltung. Auch Texte, Grafiken, Tabellen und andere Elemente auf WWW-Seiten erhalten damit den nötigen Pep...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 8. Hintergrund |
So, wie nur wenige Puristen zwischen nackten Mauern wohnen, so schmücken fast alle Web-Autoren ihre Seiten mit einem Hintergrundmuster oder doch wenigstens einer Hintergrundfarbe...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 9. Tabellen- und Pseudo-Formate |
Sie können für Kopf- oder Datenzellen von Tabellen erzwingen, dass diese sich über mehrere Spalten erstrecken...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 10. Positionierung I |
Die Gestaltungsmöglichkeiten der bisher beschriebenen Style Sheet-Befehle geben dem Web-Autor bereits viel Freiheit bei der Umsetzung seiner Ideen...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
| 11. Positionierung II und Cursoreinstellungen |
Haben Sie mit float: einen Textumfluss definiert und möchten aber nur zwei oder drei Zeilen kommentierenden Text neben einer Grafik angeben und den folgenden Text dann unterhalb der Grafik fortsetzen, können Sie dazu clear: verwenden...
hier
mehr (die druckfähige Version öffnet sich in einem neuen Fenster) |
|
| ausführliche CSS Dokumentation von Steffen Wenzel |
|
http://www.style-sheets.de/ |
| externe CSS aufrufen |
im <HEAD>:
<link rel="stylesheet" href="xxx.css" type="text/css"> |
| CSS - Text formatieren |
font-variant: small-caps;
Kapitälchen
line-height: 120%;
line-height: 1.2em;
Zeilenabstand
letter-spacing: 5px;
gesperrte Schrift
|
| besondere Rahmenformen |
|
<P style="border-style : dotted; border-width: thin">
<P style="border-style : dashed; border-width: 5px">
<P style="border-style : double; border-color=red">
<P style="border-style : groove; border-color=grey">
|
| goldene Scrolleiste |
<body style="SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #A9A9A9; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-BASE-COLOR: #FFD700">
|
| Abstand um Grafik genau definieren |
<IMG SRC="pic.jpg" style="margin-left:5cm; margin-top:5px; margin-right:5pt; margin-bottom:5mm;">
|
| Grafik oben links ohne Rand am Browserfenster |
BODY
{
Margin-Top: 0px;
Margin-Left: 0px;
}
|
| Hintergrund gestalten... |
BODY
{
Background-Position: center center;
Background-Attachment:fixed; (Bild bleibt beim Scrollen stehen)
}
|
| Hintergrund- Kacheln verhindern |
BODY
{
Background-Image: url ("pic.jpg");
Background-Repeat: no repeat; (Bild wird nicht wiederholt)
Background-Repeat: repeat-x; (Bild wird nach X wiederholt)
Background-Repeat: repeat-y; (Bild wird nach Y wiederholt)
}
|
|
