CSS

Vorlage:Infobox Dateiformat/Wartung/MagischeZahl fehltVorlage:Infobox Dateiformat/Wartung/Website fejt

Cascading Style Sheets
Datei:CSS.svg Vorlage:Infobox Dateiformat/Wartung/Screenshot Format
Dateiendung	. css
MIME-Type	text/css
Entwicklt vo	World Wide Web Consortium
Oart	Stylesheet-Sprache
Standard:	Level 1 (Recommendation) Level 2 (Recommendation) Level 2 Revision 1 (Candidate Recommendation)

CSS (Cascading Style Sheets) is a deklarative Stylesheet-Sproch fia strukturiate Dokumente. Damit wean Formatvoalogn gmocht, wo fia HTML- und XML-Datein vawendd wean. Des hoasst, dass da Inhoit vo da Gstoitung trennt festglegt is.

Mit CSS kena Foabm und Schriftn definiat wean, es kena owa a Elemente positioniat und Hintagrundbuidl festgelegt wean.

CSS guit ois Standard-Stylesheetsproch fia Netzseitn.

Syntax

Definition vonam Syntaxschema

A CSS-Regel schaut so aus:

   Selektor [, Selektor2, …]
      {
         Oagnschoft-A: Wert-A;
         Oagnschoft-B: Wert-B
      }
   /* Kommentar */

A Stylesheet deaf beliebig vui soichane Regeln enthoiten. De foigende Tabejn gibt de wichtigstn Selektorn wieda, mit dena Elemente (moast HTML-Elemente) ausgwejt wean kena. A voiständige Iwasicht vo oin Selektorn findd si fia CSS2 wia aa fia CSS3 auf w3.org.

Megliche Auswoikriterien san direkte Merkmoi vo de Elemente (Typ, Klasse, ID, Attribut oda Attributwert), owa aa strukturelle Oagnschoftn (Existenz vo am bestimmtn iwagordnetn Element oda vo am Voagängarelement). De Auswoikriterien lossn si miteinanda kombinian.

Musta	Bedeitung	Eigfiat in	Definition	Ealaitarung
*	Selektiat jeds Element	CSS2	Universal selector
E	Selektiat jeds Element vom Typ E	CSS2	Type selectors	Typ-Selektoren
.c	Selektiat jeds Element vo da Klasse c (analog [class~='c'])	CSS2	Class selectors	Klassen-Selektoren
#myid	Selektiart s Element mit da ID „myid“.	CSS2	ID selectors	ID-Selektoren
E[foo]	Selektiat jeds Element E, bei dem das „foo“-Attribut gesetzt ist (unabhängig vom Wert)	CSS2	Attribute selectors	Attribut-Selektoren
E[foo=bar]	Selektiat jeds Element E, bei dem das „foo“-Attribut mit dem Wert bar gesetzt ist	CSS2	Attribute selectors	Attribut-Selektoren
E[foo^=bar]	Selektiat jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar beginnt	CSS3	Substring matching attribute selectors	Attribut-Selektoren
E[foo$=bar]	Selektiat jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar endet	CSS3	Substring matching attribute selectors	Attribut-Selektoren
E[foo*=bar]	Selektiat jedes Element E, bei dem das „foo“-Attribut den Wert bar enthält	CSS3	Substring matching attribute selectors	Attribut-Selektoren
E.c	Selektiat jedes Element E der Klasse c	CSS2	Class selectors	Und-Verknüpfung
E F	Selektiat jedes Element F, das ein Nachfahre von Element E ist	CSS2	Descendant selectors	Hierarchische Verschachtelung
E > F	Selektiat jedes Element F, das ein Kind von E ist	CSS2	Child selectors	Direkte hierarchische Verschachtelung
E ~ F	Selektiat jedes Element F, das einen Vorgänger E auf gleicher Ebene hat	CSS3	General sibling combinator	Abfolge
E + F	Selektiat jedes Element F, das einen direkten Vorgänger E auf gleicher Ebene hat	CSS2	Adjacent sibling combinator	Direkte Abfolge
E:first-child	Selektiat an Element E, wenns des eascht Kind vom direktn Vorfoarn is	CSS2	The :first-child pseudo-class

Beispui

CSS:

p.note {
  position: relative;
  left: 15%;
  width: 80%;
  padding: 30px;
  padding-bottom: 45px;
  border: 1px solid black;
  line-height: 1.5em;
  color: black;
  font-weight: bold;
  text-align: justify;
  background-color: #eeeeee;
}

HTML:

<p class="note">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz...
</p>

Das p-Tag macht den dazwischen stehenden Text zu einem Absatz. Da ihm die Klasse „note“ zugewiesen wird, wird er von einem CSS-kompatiblen Browser wie folgt dargestellt:

Hier wird der Deklarationsbereich allen p-Elementen zugewiesen, die das class-Attribut mit dem Wert note besitzen. Würde man das p im Selektor weglassen, würden alle Elemente der Klasse note betroffen sein, beim Weglassen des .note alle p-Elemente.

Ein wichtiges Prinzip von CSS ist die Vererbung der Eigenschaftswerte an untergeordnete Elemente und die Kombination verschiedener Stylesheets (Kaskadeneffekt). Diese können dabei aus verschiedenen Quellen stammen: vom Autor des Stylesheets, dem Browser (User Agent) oder dem Benutzer.

Literadua

•  Ingo Chao, Corina Rudel: Fortgeschrittene CSS-Techniken. Galileo Computing, Bonn 2009, ISBN 978-3-8362-1426-1 (CSS-Feinheitn).
•  Michael Jendryschik: Einführung in XHTML, CSS und Webdesign. Addison-Wesley, Minga 2007, ISBN 978-3-8273-2477-1 (Standardkonforme und barrierefreie Netzseitn eastejn).

Netzseitn

Wikibooks: Websiteentwicklung: CSS – eppas zum Lerna und Lehra.

• W3C: Cascading Style Sheets (englisch)
• CSS Spezifikation (deitsch)
• Doktorarbeit vom Håkon Wium Lie – Gschicht, alternative Formate, Designgrundsätz vo CSS (englisch)
• SELFHTML – Ausfialiche Doastellung im Zammahang mit HTML
• Zen Garden – Herausragende Beispuisammlung vo CSS-Gstoitungen mit zuaghearign Quejcode
• Browserkompatibilität – CSS 4 You – Ausfialiche Tabejn zua Untastitzung vo CSS Oagnschoftn und Selektoren vo gängign Netzbrowsan
• W3C-CSS Validation Service Cascading Style Sheets (CSS) und (X)HTML-Dokumente mit CSS validian