Quöntext voh da Seiten CSS auhschauh

{{Infobox Dateiformat
| Name = Cascading Style Sheets
| Icon =
| Logo =
| Screenshot =
| Beschreibung =
| Dateiendung =. css
| MIME = text/css
| UniformTyp =
| MagischeZahl =
| MagischeZahlNotation =
| MagischeZahlHex =
| Entwickler = [[World Wide Web Consortium]]
| Veröffentlicht =
| LetzteVersion =
| LetzteVersionDatum =
| Art = [[Stylesheet]]-Sprache
| Container für =
| Enthalten in =
| Erweitert von =
| Erweitert zu =
| Standard = [http://www.w3.org/TR/CSS1 Level 1 (Recommendation)]<br />[http://www.w3.org/TR/CSS2/ Level 2 (Recommendation)]<br />[http://www.w3.org/TR/CSS21/ Level 2 Revision 1 (Candidate Recommendation)]
| Website =
}}
'''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-[[Stylesheet]]sproch fia Netzseitn.

== Gschicht ==

Da easchte Voaschlog fia Web-Stylesheets is 1993 afkema. Cascading Style Sheets (CSS), wias aktuell bekannt san, san 1994 vom Håkon Wium Lie voagschlogn woan.

== Syntax ==
=== Definition vonam Syntaxschema ===
A CSS-Regl schaut so aus:
<syntaxhighlight lang="css">
   Selektor [, Selektor2, …]
      {
         Oagnschoft-A: Wert-A;
         Oagnschoft-B: Wert-B
      }
   /* Kommentar */
</syntaxhighlight>

A Stylesheet deaf beliebig vui soichane Regln enthoitn. De foigende Tabejn gibt de wichtigstn Selektorn wieda, mit dena Elemente (moast [[HTML|HTML-Elemente]]) ausgwejd wean kena. A voiständige Iwasicht vo oin Selektorn findd si fia CSS2<ref>[http://www.w3.org/TR/CSS2/selector.html#pattern-matching CSS2: selector #pattern-matching] af w3.org (engl.)</ref> wia aa fia CSS3<ref>[http://www.w3.org/TR/css3-selectors/#selectors CSS3 selectors] auf w3.org (engl.)</ref> 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.

{| class="wikitable"
|-
! Musta
! Bedeitung
! Eigfiat in
! Definition
! Ealaitarung
|-
| *
| Selektiat jeds Element
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#universal-selector Universal selector]
|
|-
| E
| Selektiat jeds Element vom Typ E
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#type-selectors Type selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Typ-Selektoren Typ-Selektoren]
|-
| .c
| Selektiat jeds Element vo da Klasse c (analog [class~='c'])
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#class-html Class selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Klassen-Selektoren Klassen-Selektoren]
|-
| #myid
| Selektiart s Element mit da ID „myid“.
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#id-selectors ID selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#ID-Selektoren ID-Selektoren]
|-
| E[foo]
| Selektiat jeds Element E, bei dem des „foo“-Attribut gsetzt is (unobhängig vom Wert)
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#attribute-selectors Attribute selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Attribut-Selektoren Attribut-Selektoren]
|-
| E[foo=bar]
| Selektiat jeds Element E, bei dem das „foo“-Attribut mim Wert bar gsetzt is
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#attribute-selectors Attribute selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Attribut-Selektoren Attribut-Selektoren]
|-
| E[foo^=bar]
| Selektiat jeds Element E, bei dem des „foo“-Attribut mitm Wert bar ofangt
| CSS3
| [http://www.w3.org/TR/css3-selectors/#attribute-substrings Substring matching attribute selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Attribut-Selektoren Attribut-Selektoren]
|-
| E[foo$=bar]
| Selektiat jeds Element E, bei dem des „foo“-Attribut mitm Wert bar endd
| CSS3
| [http://www.w3.org/TR/css3-selectors/#attribute-substrings Substring matching attribute selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Attribut-Selektoren Attribut-Selektoren]
|-
| E[foo*=bar]
| Selektiat jeds Element E, bei dem des „foo“-Attribut an Wert bar enthoit
| CSS3
| [http://www.w3.org/TR/css3-selectors/#attribute-substrings Substring matching attribute selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Attribut-Selektoren Attribut-Selektoren]
|-
| E.c
| Selektiat jeds Element E vo da Klasse c
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#class-html Class selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Und-Verkn.C3.BCpfung Und-Verknüpfung]
|-
| E F
| Selektiat jedes Element F, des a Nochfoar vo Element E is
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#descendant-selectors Descendant selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Hierarchische_Verschachtelung Hierarchische Verschachtelung]
|-
| E &gt; F
| Selektiat jeds Element F, des a Kind vo E is
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#child-selectors Child selectors]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#direkte_hierarchische_verschachtelung Direkte hierarchische Verschachtelung]
|-
| E ~ F
| Selektiat jeds Element F, des an Vorgänga E af gleicha Ebene hod
| CSS3
| [http://www.w3.org/TR/css3-selectors/#general-sibling-combinators General sibling combinator]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#abfolge_tilde Abfolge]
|-
| E + F
| Selektiat jeds Element F, des an direktn Vorgänga E af gleicha Ebene hod
| CSS2
| [http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators Adjacent sibling combinator]
| [https://web.archive.org/web/20110809090328/http://4webmaster.de/wiki/CSS-Selektoren#Abfolge Direkte Abfolge]
|-
| E:first-child
| Selektiat an Element E, wenns des easchte Kind vom direktn Vorfoarn is
| CSS2
| [http://www.w3.org/TR/CSS21/selector.html#first-child The :first-child pseudo-class]
|
|}

=== Beispui ===
CSS:
<syntaxhighlight lang="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;
}
</syntaxhighlight>

HTML:
<syntaxhighlight lang="xml">
<p class="note">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz...
</p>
</syntaxhighlight>

Des <code>p</code>-Tag mocht den Text, dea wo dazwischn steht, zu am Obsotz. Wei eam de Klasse „note“ zuagwiesn wead, wead a vo am CSS-kompatibln Browsa wia foigt dorgstejt:

[[Datei:Bildschirmfoto von einem CSS-gestalteten Testabsatz.png|Da Text is so formatiat, wia des CSS-Beispui des voagibt.]]

Do wead da Deklarationsbereich oin <code>p</code>-Elementn zuagwiesn, wo des <code>class</code>-Attribut mit am Wert <code>note</code> besitzn. Dadat ma des <code>p</code> im Selektor weglossn, waradn olle Elemente vo da Klasse <code>note</code> betroffn, beim Weglossn vom <code>.note</code> olle <code>p</code>-Elemente.

A wichtigs Prinzip vo CSS is de Vaeabung vo de Oagnschoftswerte an untagordnete Elemente und de Kombination vaschiedena Stylesheets ([[Kaskadeneffekt]]). De kena dabei aus vaschiednan Quejn stamma: vom Autor vom Stylesheet, am Browser (''User Agent'') oda am Nutza.

=== CSS-Hacks ===
A Owendung vo CSS-Syntax bei da Gstoitung vo Netzseitn san sognennte CSS-Hacks.

== Beleg ==
<references />

== Literatua ==
* {{Literatur |Autor=Ingo Chao, Corina Rudel |Titel=Fortgeschrittene CSS-Techniken |Auflog=2. |Verlag=Galileo Computing |Ort=Bonn |Jahr=2009 |ISBN=978-3-8362-1426-1|Kommentar=CSS-Feinheitn}}
* {{Literatur |Autor=Michael Jendryschik |Titel=Einführung in XHTML, CSS und Webdesign |Auflage= |Verlag=Addison-Wesley |Ort=[[Minga]] |Jahr=2007 |ISBN=978-3-8273-2477-1|Kommentar=Standardkonforme und barrierefreie Netzseitn eastejn}}

== Netzseitn ==
{{Wikibooks|Websiteentwicklung: CSS}}
* [http://www.w3.org/Style/CSS/ W3C: Cascading Style Sheets (englisch)]
* [https://web.archive.org/web/20080111223426/http://www.edition-w3c.de/TR/REC-CSS2/ CSS Spezifikation (deitsch)]
* [https://web.archive.org/web/20101031011031/http://instantcsscode.com/ Instant CSS Code]
* [https://web.archive.org/web/20141004215348/http://people.opera.com/howcome/2006/phd/ Doktorarbeit vom Håkon Wium Lie] – Gschicht, alternative Formate, Designgrundsätz vo CSS (englisch)
* [http://de.selfhtml.org/css/ SELFHTML] – Ausfialiche Doastellung im Zammahang mit HTML
* [http://www.csszengarden.com/tr/deutsch/ Zen Garden] – Herausragende Beispuisammlung vo CSS-Gstoitungen mit zuaghearign Quejcode
* [https://web.archive.org/web/20100408174907/http://www.css4you.de/browsercomp.html/browserfilter/safari_3-0%20%3Bfirefox_3-0%20%3Bopera_9-5%20%3Bie_7%3Bie_6%3B Browserkompatibilität – CSS 4 You] – Ausfialiche Tabejn zua Untastitzung vo CSS Oagnschoftn und Selektoren vo gängign Netzbrowsan
* [http://jigsaw.w3.org/css-validator/ W3C-CSS Validation Service] Cascading Style Sheets (CSS) und (X)HTML-Dokumente mit CSS validian

{{Navigationsleiste W3C-Standards}}

[[Kategorie:Datenformat]]
[[Kategorie:Beschreibungssprache]]
[[Kategorie:Web-Entwicklung]]