Die Syntax der Styles

Definition eines Styles

Einen Style definiert man mit Hilfe von Regeln in einfachem Text, durch die das Aussehen der Elemente der Seite beschrieben werden kann. Eine CSS-Regel hat zwei Haupt-Elemente :

Ein Tag-Selektor, der besagt, auf welche Tags des Dokuments der Style angewendet wird ;
Eine Deklaration des Styles, in geschwungenen Klammern, durch die man den Style präzisieren kann, der auf den gewählten Tags ausgeführt wird. Die Deklaration besteht selbst aus :
- einer oder mehrerer Eigenschaften(s), gefolgt vom Zeichen « : » (Doppelpunkt),
- einem oder mehreren Werten(s) die jeder Eigenschaft zugeordnet sind, in Anführungszeichen, wenn es sich um mehrere Worte handelt, und durch Kommas getrennt, wenn es mehrere gibt, am Schluss steht ein Strichpunkt.

Die Syntax sieht also folgendermaßen aus :

$Syntaxe d\$

Die folgende Syntaxt definiert zum Beispiel den Style, der auf Hypertext-Links angewendet wird (Tag <A>), also die Schriftart Verdana in einer Größe von 18 Pixel, fettgeschrieben und gelb :

A  {
       font-family: Verdana;
       font-size: 18px;
       font-style: bold;
       color: yellow
       }

Tag-Selektoren

« Tag-Selektoren » (oder « Elemente-Selektoren ») bezeichnen das oder die Schlüsselbegriffe, die vor der geschwungenen Klammer stehen und den oder die Tags des Dokuments angeben, auf die der Style zwischen den Klammern ausgeführt wird.

Um den Style eines bestimmten HTML-Tags festzulegen, fügt man einfach den Namen des Tags ein (ohne die Zeichen < und >. Zum Beispiel :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <STYLE type="text/css">
  <!--

Tag {Eigenschaften}
  -->
  </STYLE>
 </HEAD>
<BODY>

<tag> ... </tag>

...
</BODY>
</HTML>

Multiple Selektoren

Es ist auch möglich, den Style auf mehrere Tags anzuwenden, indem man die Namen dieser Tags durch Beistriche trennt (,). Ein solcher Selektor heißt multipler Selektor und hat folgende Syntax :

Tag-Selector1, Tag-Selector2  { /* style */  }

Universeller Selektor

Mit dem universellen Selektor (« * ») ist es möglich, einen Style festzulegen, der auf alle HTML-Elemente angewendet wird. Der universelle Selektor hat folgende Syntax :

*  { /* style */  }

Der universelle Selektor ist in wenigen Browsern integriert !</ital>

Verschachtelte Selektoren

Man kann einen Tag in einem gegebenen Kontext auswählen, also abhängig von den Elementen, die ihn umgeben, und zwar durch Kontext-Selektoren.

Es gibt verschiedene Arten von Kontext-Selektoren :

Mit verschachtelten Selektoren lassen sich Regeln festlegen, die nur in Kraft treten, wenn ein Element Y in einem Element X verschachtelt ist. Sie haben folgende Syntax :

selector_X selector_Y { /* style; */ }

Für den folgenden HTML-Code :

<p> <i> Achtung </i>, dies ist eine <b> Warnung </b> </p>
<b> Bitte beachten </b>

Die folgende Regel wirkt nur auf das Wort « Warnung » (das einzige, das von den Tags umgeben ist, die selbst in einem -Tag verschachtelt sind) :

P B { font-weight: bold; color: red; }

Mit Selektoren für konsekutive Elemente lassen sich Regeln erzeugen, die nur in Kraft treten, wenn ein Element Y direkt auf ein Element X folgt. Sie haben folgende Syntax :

selector_X + selector_Y { /* style; */ }

Für den folgenden HTML-Code :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p>
<b> Prière d'en tenir compte </b>

La règle suivante ne sélectionne que le mot « avertissement » (le seul entouré de balises , elles-mêmes suivant une balise ) :

I + B { font-weight: bold; color: red; }

Mit Child-Selektoren lassen sich Regeln erzeugen, die nur dann in Kraft treten, wenn ein Element Y der direkte Nachfahre eines Elements X ist. Die Regel wird nicht angewendet, wenn Y in einen oder mehrere andere Tags eingekapselt ist. Sie haben folgende Syntax :

selector_X > selector_Y { /* style; */ }

Für den folgenden HTML-Code :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p>
<b> Prière d'en tenir compte </b>

Die folgende Regel wählt nur das Element «  Achtung  » (das einzige, das von den Tags umgeben ist, die selbst direkt in einem -Tag verschachtelt sind) :

P > B { font-weight: bold; color: red; }

Style-Eigenschaften

Kommentare

Es ist möglich (und empfohlen), seine Stylesheets zu dokumentieren, indem man Kommentare mit Zusatzinformationen einfügt (Grund für die Wahl eines Styles, Typ des Dokuments, auf das er angewendet wird, Kontext, ...). CSS-Kommentare werden durch die Kürzel /* und */ abgegrenzt :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <STYLE type="text/css">
  <!--
/* Dies ist ein Kommentar */
TagA {Eigenschaften}
TagB {Eigenschaften}
TagC {Eigenschaften}
  -->
  </STYLE>
 </HEAD>
<BODY>
...
</BODY>
</HTML>

Ein Style kann « inline » auf alle HTML-Tags bis auf die folgenden angewendet werden : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Letzte Änderung am Mittwoch 6 Mai 2009 à 14:10:46.

Letzte Stylesheets

Nächst Einsetzen von CSS

Beste Antworten für « Die Syntax der Styles » auf :

Deklaration eines Stylesheets (CSS) Sehen Deklaration eines Stylesheets Stylesheets sind kein eigentlicher Bestandteil der HTML-Sprache, das bedeutet, sie sind nicht direkt Teil der HTML-Empfehlungen zu HTML vom W3C. Deswegen ist es nötig, bestimmte Elemente in den HTML-Code einzufügen,...

Stylesheets - CSS Sehen Vorstellung der Stylesheets Das Konzept von Stylesheets kam 1996 mit einer Veröffentlichung einer neuen Empfehlung durch den W3C auf, diese hieß« Cascading StyleSheets » (Kaskaden- Stylesheets), geschrieben CSS. Le principe des feuilles de style...

Stylesheets Sehen Eigenschaften von Schriften Eigenschaft Wert Beschreibung font-family Genaue Schrift (Arial, Times, Verdana) Familie (serif, sans-serif, fantasy, monospace, kursiv) Definiert einen oder mehrere Namen von Schriften oder...

Google - Suche nach ähnlichen websites SehenDer Operator related: ermöglicht die Suche nach Websites, die mit spezifizierten Websites vergleichbar sind. Die verwendete Syntax: related:Website_Adresse ZB related: http://de.kioskea.net/ Hinweis: Sie erhalten das gleiche Ergebnis, wenn Sie auf...

Lynx SehenWas ist eigentlich Lynx Woher kann Lynx runtegeladen werden Funktionen und Syntax Was ist eigentlich Lynx Lynx ist ein web-Browser. Es ist eigentlich bevorzugt unter Linux-und UNIX und läuft in Text-Modus. Das heisst, dass er nur mit...

Mehrere CSS-Stylesheet? Sehen

Download Safari Sehen

Download GNU Octave SehenGNU Octave ist freie Software für wissenschaftliche Berechnungen zum Scilabsbild und ist kostenlos "gleichwertig" mit Matlab ®. Es ist jedoch zu beachten, dass im Gegensatz zu Scilab, bei dem kann sich manchmal die Syntax von Matlab ® unterscheiden....

Download PSPad Sehen"PSPad ist ein besonders auf Programmierer und Webdesigner zugeschnittener unicode-fähiger Editor für Microsoft Windows mit den folgenden Merkmalen: Einfaches Arbeiten mit verschiedenen Entwicklungsumgebungen Farbig hervorgehobene Syntax...

Mit CSS Elemente positionieren SehenMit Stylesheets lassen Text und Bilder aufs Pixel genau positionieren, nämlich mit den Tags und . Dies ist in der Version 4 von Netscape und Internet Explorer möglich, allerdings bleibt diese Technik problematisch und kann zu...

Die Styl-Tags SehenWas ist ein Styl-Tag? Styl-Tags verändern die Typographie des Textes. Sie können mit anderen Styl-Tags verschachtelt sein, genau so, wie man es auch mit einem Textverarbeitungsprogramm machen würde. Hier eine Liste der Styl-Tags die von den...

Einheiten in Stylesheets (CSS) SehenEinheiten Mit Stylesheets lassen sich numerische Werte für Style-Eigenschaften festlegen, auf verschiedene Arten : Absolut, also in einer Einheit, die unäbhängig vom Ausgangsformat ist (zum Beispiel in Zentimetern) ; Relativ, also in einer...