 |
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
CSS-BefehlsübersichtDie folgenden Unterkapitel geben eine Übersicht über die wichtigsten und gebräuchlichsten CSS-Befehle. Sie sind gegliedert in Befehle für Schrift, Absatz, Text, Hintergrund, Rahmen, Abstände, Ränder, Tabellen, Listen und Positionierung. Bei der Übersicht habe ich bewusst auf Vollständigkeit verzichtet, nämlich aus zwei Gründen: Erstens gibt es zahlreiche Befehle, die auf normalen Webseiten wirklich nie vorkommen, die die folgenden Tabellen also nur unnötig aufblähen würden. Zweitens gibt es zahlreiche Befehle, die auch von den gängigsten Browsern noch nicht unterstützt werden. In den Tabellen gebe ich auch bewusst immer einige Beispiele für die jeweilige CSS-Eigenschaft an, nicht aber alle möglichen Werte bzw. Platzhalter. Zu allen hier vorgestellten CSS-Befehlen gibt es jeweils in einem separaten Dokument zahlreiche Beispiele, die deren Anwendung und das Ergebnis zeigen. SchriftformatierungStile, die auf fast jeder Internet-Seite in irgendeiner Form verwendet werden, betreffen die Formatierung der eigentlichen Schrift. Mit dem CSS-Befehl font-family wird bestimmt, in welcher Schriftart ein Text dargestellt werden soll. Mit font-size legt man die Größe der Schrift fest. Dies kann sowohl in absoluten als auch in relativen Größen erfolgen. Mit font-weight hat man ein ziemlich mächtiges Mittel, um eine Schrift in 9 verschiedenen Dicken darzustellen. Voraussetzung ist natürlich, dass für die ausgewählte Schriftart so viele Varianten zur Verfügung stehen. Die Eigenschaft font-style stellt eine Schrift normal oder kursiv dar. Und als weitere Variante bietet sich font-variant, die eine Schrift in kleinen Kapitälchen darstellt. Beispiele zur Schriftformatierung gibt es auf dieser Seite. Zuerst wird immer die verwendete Style Sheet Angabe gezeigt, anschließend das Ergebnis. Leider können nicht alle Browser bzw. Rechner alle Style Sheet Angaben richtig darstellen.
AbsatzformatierungDie wichtigste Absatzformatierung text-align bestimmt die horizontale Ausrichtung des Textes in einem Absatz, also ob Text linksbündig, rechtsbündig, zentriert oder als Blocksatz dargestellt wird. Mit text-indent kann man den Einzug der ersten Zeile bestimmen. Dieses Attribut kann auch negative Werte annehmen, wenn z.B. der Absatz als Ganzes schon eingerückt wird. Der CSS-Befehl line-height hat wesentlichen Einfluss auf die Optik einer Seite, da mit ihm der Zeilenabstand festgelegt wird. Diesen kann man absolut oder als Faktor zur Normalzeilenhöhe angeben. Der Zeilenabstand kann nicht nur vergrößert, sondern auch verkleinert werden. Wird dieser zu klein, werden die einzelnen Zeilen übereinander gedruckt. Mit vertical-align kann man die vertikale Ausrichtung von Text festlegen. Dieses Attribut wird jedoch erst interessant, wenn Text in Tabellenzellen dargestellt wird. Auch für diese CSS-Befehle gibt es zahlreiche Beispiele auf einer Extra-Seite.
TextformatierungDas wichtigste Mittel der Textformatierung ist die Textfarbe. Diese kann entweder durch eine direkte Farbangabe wie blue oder durch eine Rot-Grün-Blau-Mischung angegeben werden. Mit text-decoration kann man einen Text unterstreichen, überstreichen oder gar durchstreichen. Der CSS-Befehl text-transform transformiert den Inhalt eines Textes sämtlich in Groß- oder Kleinbuchstaben oder beginnt jedes Wort mit einem Großbuchstaben. Mit letter-spacing kann man eine gewisse Laufweiter der Schrift erzwingen. Die Möglichkeit, zwischen den einzelnen Wörtern einen bestimmten Abstand zu erzwingen (word-spacing) wird noch nicht von allen Browsern unterstützt. Beispiele zur Textformatierung gibt es auf dieser Seite.
HintergrundformatierungHintergrundfarben und -bilder kann man sowohl für das ganze Dokument als auch für Teilbereiche, zum Beispiel einzelne Textabsätze, Tabellen oder Bereiche festlegen. Eine Hintergrundfarbe kann man entweder direkt mit einer Farbbezeichnung angeben oder als RGB-Wert. Ein Hintergrundbild bindet man ein, indem man den Pfad und den Namen mit dem url() Befehl angibt. Verwendet man nicht den CSS-Befehl background-repeat, so wird das Bild so oft wiederholt, bis die ganze Fläche gefüllt ist. Mit background-repeat kann man jedoch selbst bestimmen, ob und in welche Richtung das Hintergrund wiederholt werden soll. Hier gibt es Beispiele zur Verwendung der Befehle. Hat man mittels background-repeat: no-repeat ausgewählt, dass der Hintergrund nicht wiederholt wird, kann man das Hintergrundbild beliebig auf der Seite positionieren. Erlaubt sind absolute Positionsangaben in Punkt, Pixel oder cm oder relative Angaben wie <center>. Mit dem Befehl background-attachment:fixed kann man aus dem Hintergrundbild sogar ein Wasserzeichen machen wie das folgende Beispiel zeigt.
Rahmen, Innenabstände und RänderWer jetzt denkt, beim Thema Rahmen, Innenabständen und Rändern sind wir bei Tabellen angelangt, der muss noch etwas warten. Denn mit CSS kann man nicht nur Tabellen einen Rahmen verpassen, sondern jedem beliebigen Textabsatz, jeder Überschrift oder jedem <div> Bereich. Alle hier gezeigten CSS-Formatierungen haben gemeinsam, dass man sie immer auf alle 4 Seiten zugleich anwenden kann oder auf jede Seite einzeln. Die Rahmendicke gibt man allgemein mit border-width an. Will man jedoch nur die Dicke des rechten Rahmens angeben, so verwendet man border-right-width. Den Stil des Rahmens gibt man mit border-style an. Ein Rahmen kann jedoch auch unsichtbar sein. Die Angabe einer Rahmenfarbe kann direkt oder in Form von RGB-Werten erfolgen. Mit margin gibt man den Rand eines Absatzes, einer Überschrift oder eines Blockes an. Hat man dem Absatz einen Rahmen gegeben, so bestimmt margin den Abstand vom Rahmen nach außen hin. Mit padding dagegen legt man den Abstand des Rahmens nach innen fest, also zum Beispiel den Abstand des Textes zum Rahmen. Mit Rahmen, Innenabständen und Rändern sind so viele Gestaltungsmöglichkeiten vorhanden, dass man die Anzahl der Beispiele gar nicht groß genug machen kann. Hier wird anhand zahlreicher Beispiele gezeigt, was für Möglichkeiten einem diese CSS-Befehle bieten.
TabellenformatierungDiverse Tabellen wurden bereits als Beispiele der vorigen Unterkapitel formatiert. Für ganze Tabellen, für einzelne Tabellenzeilen oder Zellen können Formatierungen wie Rahmen, Innenabstände und Außenabstände, Schriftart, Hintergrund etc. angewendet werden. CSS bietet jedoch noch zahlreiche weitere Formatierungsmöglichkeiten für Tabellen an. Mit dem HTML-Tag <caption> kann eine Tabelle beschriftet werden. Mit dem CSS-Kommande caption-side kann festgelegt werden, an welcher Stelle die Beschriftung stehen soll. Ältere Browser wie Netscape 4.7 oder Internet-Explorer 5.5 verstehen dieses Kommando jedoch noch nicht. Von diesen Versionen der gängigsten Webbrowser wird auch der Befehl border-spacing noch nicht verstanden; er entspricht dem HTML-Attribut cellspacing. Die vielleicht wichtigsten Formatierungsbefehle für Tabellen sind text-align und vertical-align. Mit diesen richtet man nämlich den Inhalt einer Zelle aus. Dies kann gewöhnlicher Text sein, aber auch Bilder, Untertabellen, Links etc. Hier gibt es einige Beispiele zur Anwendung dieser Befehle. Mehr über die Formatierung von Tabellen gibt es jedoch in einem extra Anwendungs-Kapitel.
ListenformatierungIn HTML gibt es unsortierte und sortierte Listen. Mit CSS kann man für unsortierte Listen aus 3 verschiedenen Bullet-Zeichen auswählen oder man wählt eine externe Grafik als Bullet-Zeichen. Sortierte Listen können mit CSS auf unterschiedliche Weise durchnummeriert werden. Von Zahlen, Buchstaben, griechischen Buchstaben bis hin zu japanischen Hiragana und Katakana ist alles möglich. Mit dem CSS-Befehl list-style-position kann auf die Position des Bullets Einfluss genommen werden. Wählt man den Wert inside, so wird das Bullet und damit auch der Listentext etwas eingerückt. Das folgende Beispiel zeigt die zahlreichen Möglichkeiten der Listenformatierung auf.
Positionierung von ElementenEin faszinierendes Feature von CSS ist die Möglichkeit, Elemente beliebig im Browser-Fenster zu platzieren. Mit position:absolute; kann ein Element in absoluten Koordinaten im Fenster platziert werden. Mit position:relative wird ein Element relativ zum letzten Block positioniert. Mit position:fixed wird ein Element absolut positioniert; ein solches Element behält auch seine Position, wenn der Fensterinhalt durchgescrollt wird. position:static ist die normale Positionierung, d.h. einfach im Fließtext folgend. Positionsangaben werden in typischen Maßeinheiten oder Prozent-Werten angegeben. Gleiches gilt für die Breite und Höhe. Theoretisch kann man auf diese Weise beliebige Elemente (Textabsätze, Überschriften, Tabellen etc.) positionieren. Besser ist es jedoch, wenn man immer zuerst <div> Bereiche positioniert und dann diese Bereiche mit Inhalt füllt. Mit overflow kann man selbst bestimmen, was mit Inhalten eines Bereiches passiert, der im vorgegebenen Bereich eigentlich gar keinen Platz mehr hat. So ist es zum Beispiel möglich, Scrollbalken einzublenden. Mit float wird festgelegt, wie andere Elemente um den positionierten Bereich fließen sollen. Zum Verbergen eines Elementes gibt es zwei CSS-Befehle: visibility und display; beide verstecken ein Element, jedoch mit einem wesentlichen Unterschied: Ein Element, das mit visibility=hidden ausgeblendet wird, nimmt dennoch im Browserfenster seinen zugewiesenen Platz weg. Ein Element, das mit display:none ausgeblendet wird, nimmt auch keinen Platz mehr im Fenster ein. Während mit visibility=hidden bewusst Leerbereiche im Fenster erzeugt werden können, positioniert man Elemente mit display:none hauptsächlich aus dem Grunde, um sie später z.B. durch JavaScript sichtbar zu machen. Das erste Beispiel zeigt den Effekt dieser CSS-Befehle. Mit position:absolute kann man auch Elemente übereinander, nebeneinander und ineinander platzieren. Mit der CSS-Eigenschaft z-index kann man jedem Element eine Zahl zuweisen, die die Priorität in der Darstellung angibt. Auf diese Weise kann man bestimmen, welches Element über welchem liegen soll. Das folgende Beispiel zeigt, wie man mit z-index bestimmt, welches Element über welchem liegen soll.
Zurück zum Inhaltsverzeichnis CSS-Style-Sheets Copyright: Patrick Wagner, www.patrickwagner.de |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|