Cascading Style Sheets

(Diese Seite verwendet CSS Style Sheets)

Web Styles

Cascading Style Sheets

CSS lernen

CSS Tutorial HTML

Web Style Sheets CSS

XML mit Style

CSS & XSL

Amaya

Partner und Sponsoren

Bei Hotel Mallorca gibts Infos über Malorca und die Hotels dort

Cascading Style Sheets Selectors

Die Selektoren legen fest, auf welche Elemente ein Style angewendet werden soll.

Elementselektoren

Dieser Style gilt für genau dieses Element.

h1 { color: green; }
color setzt hier die Schriftfarbe des Elementes h1 auf den Wert grün.
body { background-color: gray; }
background-color setzt die Hintergrundfarbe des ganzen Dokuments auf den Wert grau.

Gruppenselektoren

Style gilt für eine Reihe von Elementen. Die einzelnen Selektoren sind durch Kommas getrennt.

h2, h3 { color:gray; }
zeigt die Elemente h2 und h3 in grau an.

Kontextsensitive Selektoren

Style gilt für ein Element, wenn es innerhalb eines anderen Elementes liegt.

h1 { color: red; }
h1 a { color: blue; }
das a-Elemente innerhalb des h1 -Elementes wird blau angezeigt. h1-Elemente sonst werden in rot angezeigt.

Klassenselektoren

Mit dem Attribut class wird einem Element einen bestimmten Style zugewiesen. Man kann allgemeine Klassen oder elementspezifische Klassen erstellen. In der CSS-Syntax wird ein Punkt vor den Namen der Klasse gesetzt.

.blau { color:blue; } kann jedem Elementen zugewiesen werden
<p class="blau"> dieser Text wird blau </p>
h2.rot { color:red; } ist nur für das Element h2
<h2 class="rot"> rote Überschrift </h2>

ID-Selektoren

Mit dem Attribut id wird einem Element einen Bezeichner zugewiesen. ID's werden nur einmal vergeben. Sie sind universell.
ID-Selektoren wird das Rauten-Zeichen #vorangestellt.

<div id="logo"> LOGO IMAGE </div>
#logo { background-color: green; }
zeigt das Element mit dem id -Wert logo, mit grünem Hintergrund an.

Pseudoelement-Selektoren

Das a-Element kann durch in CSS definierte Pseudoklassen unterschiedlich angezeigt werden. Wichtig ist die richtige Reihenfolge

a:link = normaler Hyperlink  a:visited = besuchter Hyperlink  a:hover = Mauszeiger befindet sich gerade über dem Hyperlink  a:active = beim Klick auf den Hyperlink

Achtung: Pseudoelement-Selektoren werden von Browsern ab Version 5 unterstützt. Aeltere Browser (Versionen NS4.x oder IE4 und älter) unterstützen diese Pseudoelement-Selektoren nicht. Dies spielt aber insofern keine Rolle, da diese Browser keine Fehler anzeigen, sondern sie einfach ignorieren.

Amaya

Amaya ist ein Web Editor, also ein Programm um Dokumente direkt im Web erstellen und bearbeiten zu können. Die Features zum Browsen sind nahtlos verknüpft mit den Editier - und Fernzugriff Features des Programms. Das Grundprinzip orientiert sich damit an der Vision eines Webs in welchem Surfer und Publisher gemeinsam aktiv sind und welches nicht nur als Ein-Weg Veröffentlichkeits Medium genutzt wird.

Bookmark Script


Bookmark Script

Durch das Bookmarks Script wird Ihre Webseite attraktiver für Nutzer von Social Bookmarking und Social Networking Diensten. Webmaster die unsere Code eingebunden haben

Partner und Sponsoren


CSS Impressum Copyright  © 1997-2008