CSS

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.

 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:
   Selektor [, Selektor2, …]
      {
         Oagnschoft-A: Wert-A;
         Oagnschoft-B: Wert-B
      }
   /* Kommentar */

A Stylesheet deaf beliebig vui soichane Regln enthoitn. De foigende Tabejn gibt de wichtigstn Selektorn wieda, mit dena Elemente (moast HTML-Elemente) ausgwejd wean kena. A voiständige Iwasicht vo oin Selektorn findd si fia CSS2CSS2: selector #pattern-matching af w3.org (engl.) wia aa fia CSS3CSS3 selectors auf w3.org (engl.) 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 des „foo“-Attribut gsetzt is (unobhängig vom Wert) CSS2 Attribute selectors Attribut-Selektoren E[foo=bar] Selektiat jeds Element E, bei dem das „foo“-Attribut mim Wert bar gsetzt is CSS2 Attribute selectors Attribut-Selektoren E[foo^=bar] Selektiat jeds Element E, bei dem des „foo“-Attribut mitm Wert bar ofangt CSS3 Substring matching attribute selectors Attribut-Selektoren E[foo$=bar] Selektiat jeds Element E, bei dem des „foo“-Attribut mitm Wert bar endd CSS3 Substring matching attribute selectors Attribut-Selektoren E[foo*=bar] Selektiat jeds Element E, bei dem des „foo“-Attribut an Wert bar enthoit CSS3 Substring matching attribute selectors Attribut-Selektoren E.c Selektiat jeds Element E vo da Klasse c CSS2 Class selectors Und-Verknüpfung E F Selektiat jedes Element F, des a Nochfoar vo Element E is CSS2 Descendant selectors Hierarchische Verschachtelung E > F Selektiat jeds Element F, des a Kind vo E is CSS2 Child selectors Direkte hierarchische Verschachtelung E ~ F Selektiat jeds Element F, des an Vorgänga E af gleicha Ebene hod CSS3 General sibling combinator Abfolge E + F Selektiat jeds Element F, des an direktn Vorgänga E af gleicha Ebene hod CSS2 Adjacent sibling combinator Direkte Abfolge E:first-child Selektiat an Element E, wenns des easchte 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>

Des p-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:

Da Text is so formatiat, wia des CSS-Beispui des voagibt.

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

 Literatua 



 Netzseitn 

 W3C: Cascading Style Sheets (englisch)
 CSS Spezifikation (deitsch)
 Instant CSS Code
 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

Kategorie:Datenformat
Kategorie:Beschreibungssprache
Kategorie:Web-Entwicklung