- deadlegend wird sich noch aktiv um die Seite gekümmert? o.o
- Acavi Hallo ;)
- elderstab96 @deadlegend: nein wird es nicht
Cascading Style Sheets
Inhalt
Stylesheet anlegen
Die Sprache CSS
HTML Tag Bezeichnungen in CSS
CSS Befehle
» Schrift
» Hintergrund
» Rahmen
» Scrollbalken
» Mauszeiger
» Spielereien
Stylesheet anlegen
Es gibt zwei Möglichkeiten, Stylesheets in deine Webseite einzubinden. Die einfachste Methode ist, sie in den Header der Seite einzufügen.
<head>
<title>Meine Seite</title>
<style type="text/css">
// Dein Stylesheet
</style>
</head><body>
</body>
</html>
Deine Formatierung, wie du sie hier findest, schreibst du innerhalb des style-Tags.
Die zweite Möglichkeit ist, eine Stylesheet Datei anzulegen.
Gehe auf Start - Programme - Zubehör und öffne den Editor.
Speicher die Datei unter "Speichern unter..." und gib
einen Namen, z.B. style ein, und hänge die Endung .css an, also
style.css
Unter dem Eingabefeld steht Textdateien (*txt), da wählst
du nun aus der Liste "Alle Dateien" aus und klickst auf speichern.
Diese Datei kannst du jetzt mit einer Zeile in denen HTML Code einbinden:
<head>
<title>Meine Seite</title>
<link rel="stylesheet" href="pfad/style.css" type="text/css">
</head><body>
</body>
</html>
Diese Datei ist noch leer, sehen wir einmal, wie wir sie füllen können.
Die Sprache CSS
Die Webgestaltungssprache Cascading Style Sheets (CSS) ist eigentlich sehr einfach, wenn man HTML kennt, wenn nicht, kann man sie aber dennoch verstehen. Der Grundaufbau ist
Tag { Befehl }
wobei mit Tag das HTML Tag gemeint ist, das bestimmt,
was im Brower angezeigt werden soll, zum Beispiel p für
einen Absatz, img für ein Bild oder table für
eine Tabelle, was im HTML Code jeweils innerhalb der Klammern < und
> steht.
In den geschweiften Klammern in der Stylesheetdatei kommt der Befehl,
der nur dieses HTML Tag formatiert. Wenn man mehrere
Befehle einfügen möchte, werden diese durch ein Semikolon
( ; )getrennt.
Wie die meisten Websprachen ignoriert CSS Leerzeichen im Text, du solltest aber einige wegen der Übersichtlichkeit setzten und die Befehle für die einzelnen Tagformatierungen einrücken und untereinander schreiben:
<style type="text/css">
Erstes Tag {
Befehl 1;
Befehl 2;
Befehl 3
}
Zweites Tag {
Befehl 1;
Befehl 2
}
...
</style>
HTML Tag Bezeichnungen in CSS
Ich gebe dir einmal ein kleine Liste, wie du durch welche Tag Bezeichnungen verschiedene HTML Tags auf einer Seite formatieren kannst.
|
Tag
|
Bescheibung |
| body | Formatiert die gesamte Seite |
| a | Formatiert Links |
| a:visitited | Formatiert besuchte Links |
| a:hover | Formatiert Mouseover der Links |
| a:active | Formatiert aktive Links |
| table | Formatiert Tabellen |
| td | Formatiert Tabellenzellen |
| input | Formatiert Eingabefelder und Abschick Button |
| textarea | Formatiert große Texteingabe Felder |
| img | Formatiert Bilder |
| hr | Formatiert Trennlinien |
| font | Formatier in font eingebetteten Text |
| p | Formatiert in p eingebettete Absätze |
Dies sind nur Beispiele, du kannst alle anderen HTML Tags ebenfalls
formatieren.
CSS Befehle / Anweisungen
Folgendes kannst du nun innerhalb deiner Stylesheet Datei oder innerhalb
deiner Grundstruktur schreiben, mit den Tagbezeichnungen vorneweg,
die du fomatieren willst.
Der Aufbau ist oben beschrieben, willst du zum Beispiel den Link beim
Mouseover ändern, ist die Grundstruktur a:hover { }, willst
du den Hintergrund oder Schrift der ganzen Seite verändern, nimmst
du body { }. Die CSS Befehle brauchst du nun nur noch in die
geschweiten Klammern schreiben. Vergiss das Semilkolon nicht, wenn es
mehrere sind.
Allgemein
Du kannst fast alle Befehle mit none verneinen und dadurch die Formatierung unterdrücken.
Viele CSS Befehle, wie bunte Scrollbalken oder eigene Mausanzeiger, können nur vom Internet Explorer übersetzt werden.
Du kannst auch alle Stylesheetbefehle direkt im HTML Code anwenden, dazu fügst du die einzelnen Befehle direkt innerhalb style="" in die HTML Tags ein, zum Beispiel <a href="seite.htm" style="text-decoration: none; color: #FF0000"> oder <table width="300" style="border-style:none">
Schrift
| Schriftfarbe | color: #000000 |
| Schriftgröße | font-size: 10 |
| Schriftart | font-family: Tahoma, Arial |
| Fettdruck | font-weight: bold |
| Kursivdruck | font-weight: italic |
| Links nicht unterstreichen | text-decoration: none |
| Verschwommene Schrift | |
| filter: blur(add=15, direction=90, strength=20) width: 100%; height: 10; | |
| Glühende Schrift | |
| filter:Glow(color=#000000, strength=6); height=10 | |
Denk daran, dass Links auch Schrift sind, wenn du also z.B.
schreibst, dann wird die Schrift schwarz und kursiv, wenn du
schreibst, dann werden die Links schwarz und kursiv.
Hintergrund
| Hintergrund Farbe | background-color: #000000 |
| Hintergrund Bild | background-image: url(http://url.de/bg.jpg) |
| Fixieren | background-attachment: fixed |
| Fixieren aufheben | background-attachment: scroll |
| Hintergrundbild nicht wiederholen | background-repeat: no-repeat |
| -> Das ist hilfreich, wenn du ein kleines Bild nur einmal anzeigen möchtest. Der Rest des Hintergrundes wird dann mit der Hintergrund Farbe gefüllt. | |
| Hintergrund ausrichten | |
| Links | background-position: left |
| Rechts | background-position: right |
| Oben | background-position: top |
| Unten | background-position: bottom |
| Mitte | background-position: center |
Rahmen
| Rahmen Farbe | border-color: #000000 |
| -> Wenn du willst, kannst du vier Farben nennen, dann wird der Rahmen ganz bunt, z.B. border-color: #000000 #FFFFFF #000000 #FFFF00 | |
| Dünner Rahmen | border-width: thin |
| Mittlerer Rahmen | border-width: medium |
| Dicker Rahmen | border-width: thick |
| Gepunktet | border-style: dotted |
| Gestrichtelt | border-style: dashed |
| Doppelt | border-style: double |
Die border-style Befehle gelten für Tabellen Rahmen, deshalb musst du sie in table { } oder td {} einbetten. Die Rahmen Farbe kannst du allerdings z. B. auch bei input { } oder textarea { } anwenden, oder du fügst es in body { } ein, so erhälst du einen Rahmen und die kompette Seite.
Was du noch machen kannst, ist jede Rahmenseite einzeln formatieren, dazu fügst du folgende Bezeichnungen mit einem weiteren - zwischen die Befehle
| Rahmenseiten Bezeichnungen | |
| Links | left |
| Recht | right |
| Oben | top |
| Unten | bottom |
Beispiel: border-left-style: dashed oder border-top-width: thick
Scrollbalken
So kannst du deinen Scrollbalken für den IE komplett einfärben:
| scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000; scrollbar-arrow-color: #000000 |
Obenauf Links oberer Schatten Links unterer Schatten Rechts oberer Schatten Rechts unterer Schatten Scrolleiste unten Pfeile |
Tranparente (= durchsichte) Scrollbalken bekommst du leider nicht so ohne weiteres hin. Wenn du transparente Scrollbalken auf der ganzen Seite haben möchtest, musst du einen iframe formatieren. Du kannst auch die Scrollbalken in Tabellen transparent machen, allerdings reicht die Transparenz durch die Tabelle durch und der Hintergrund der Seite schimmert durch und nicht der Hintergrund der Tabelle.
Der CSS Befehl
sorgt dafür, dass alles, was auf der Seite neongrün (#00FF00) ist, transparent wird. Wenn du etwas anderes in dieser Farbe auf deiner Seite hast, solltest du deshalb einen anderen Hexawert wählen.
Mauszeiger
Wenn du möchtest, kannst du den Cursor auf deiner Seite ändern. Dafür gibt es extra Befehle für die Standart Windows Cursor, oder du verwendest eine eigene Graphik.
Halte die Maus über die Angaben
| Hand | cursor: hand |
| Fadenkreuz | cursor: crosshair |
| Text | cursor: text |
| Warten | cursor: wait |
| Standart | cursor: default |
| Hilfe | cursor: help |
| Doppelpfeil horinzontal | cursor: e-resize |
| Doppelpfeil diagonal | cursor: ne-resize |
| Doppelpfeil senkrecht | cursor: s-resize |
Wenn du einen eigenen Mauszeiger haben möchtest, musst du ihn im *.cur oder *.ani Format speichern.
Spielereien
|
Inhalt senkrecht spieglen | Inhalt horizental spiegeln __ Inhalt grau anzeigen Farben umkehren
Abstand zwischen den Wörtern Zeichenabstand zwischen den Wörten Abstand des Textes vom linken Rand |
