Homepagebau	Dateiversion: diesen Beitrag diskutieren, ergänzen, eine Frage stellen

Ganz grob betrachtet gibt es eigentlich nur 3 wichtige Regeln auf die sie beim Schreiben von CSS achten müssen.

Liste (eventuell mehrerer) Tagnamen "{" Liste der Formatierungsanweisungen "}"

Tagnamen werden durch ein Leerzeichen (" ") getrennt, Formatierungsanweisungen durch Semikolon (";").

Um zum Beispiel für alle Bilder ("img" Tag), die von einem Link "umschlossen" sind (also als Link fungieren) den obligatorischen Rahmen auszublenden...

<a ...> ...<img ...> ...</a>

...lautet die Anweisung:

a img { border: 0 }

Wie war das doch gleich mit den Galiern? Wirklich ALLE Bilder?
Eventuell wollen sie nur bestimmte Bilder - eine bestimmte "Klasse" von Bildern - zum Beispiel "Urlaubsfoto"s davon ausklammern.

<a ...> ...<img class="Urlaubsfoto" ...> ...</a>
<a ...> ...<img ...> ...</a>

CSS:

a img.Urlaubsfoto { border: 0 }

Alle Bilder der Klasse ("class") "Urlaubsfoto" haben jetzt keinen Rahmen - alle anderen Bilder dagegen schon.

Wenn sie nun, bei einem bestimmten "Ereignis" - zum Beispiel wenn der User die Maus über ihr Navigations-Menü bewegt - und nur dann - stattdessen aber um ihren Text einen "fetten" Rahmen und für den Text selbst eine spezielle Farbe verwenden möchten.

<p ...><a ...> Text </a></p>

p a:HOVER { border: 5; color: red }

Damit haben sie eigentlich - abgesehen von den genauen Formatierungsanweisungen - schon alles wirklich wichtige, was es zu CSS zu sagen gibt gelernt. Eine erfreuliche Nachricht also bereits vorweg: komplizierter als das wird es wirklich nicht!

 

Fortgeschrittene Programmierer können die obige - etwas langatmige Beschreibung gern überspringen und wissen mit dieser Notation sicher etwas mehr anzufangen.
Wenn sie nicht zu diesem Klientel gehören ignorieren sie diesen Abschnitt. Es wird ihnen - wenn sie nicht gerade Informatik studieren, oder Fachinformatiker lernen wollen - niemand den Kopf abreißen wenn sie die nachfolgende Notation nicht verstehen. ;)

[CSS] :
( [TAGLISTE] "{" [ATTRIBUTLISTE] "}" |
{[TAG]} "." [KLASSE] "{" [ATTRIBUTLISTE] "}" |
[TAG] ":" [EREIGNIS] "{" [ATTRIBUTLISTE] "}" )

[TAGLISTE] :
[TAG] { " " [TAG] }*

[ATTRIBUTLISTE] :
[ATTRIBUT] { ";" [ATTRIBUT] }*

[ATTRIBUT] :
[FORMATIERUNG] ":" [BELEGUNG]

( [TAG] , [KLASSE] , [FORMATIERUNG] , [BELEGUNG] , [EREIGNIS] ) :
#STRING

Genauer gesagt sind mit TAG(s) natürlich Namen von HTML-Tags gemeint. EREIGNISse gibt es nur bei bestimmten Tags - wie "a" (HTML-Links). Hier gibt es zum Beispiel das Ereignis "hover" (entspricht "onmouseover" bei JavaScript). KLASSEn sind von ihnen über das "class"-Attribut explizit an Tags vergebene Bezeichnungen, um gleichnamige HTML-Tags zu "klassifizieren", also unterscheidbar zu machen. FORMATIERUNGen sind die CSS-Formatierungsanweisungen dieser Tags. Davon gibt es allerdings so viele, dass ich sie hier nicht nennen werde und sie stattdessen an die Literatur, bzw. die nachfolgenden Artikel verweisen möchte.

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: