emailconfirmed, nsInternRO, nsInternRW, Administrators
3,356
edits
m
no edit summary
WSebastian (talk | contribs) |
mNo edit summary |
||
| (5 intermediate revisions by 3 users not shown) | |||
| Line 6: | Line 6: | ||
* [http://de.wikipedia.org/wiki/Barrierefreies_Internet Barrierefreies Internet] (z.B. für Hör- und Sehgeschädigte) | * [http://de.wikipedia.org/wiki/Barrierefreies_Internet Barrierefreies Internet] (z.B. für Hör- und Sehgeschädigte) | ||
* Dynamische Darstellung mit [[JavaScript]] möglich (z.B. Ein-/Ausblenden von Ebenen) | * Dynamische Darstellung mit [[JavaScript]] möglich (z.B. Ein-/Ausblenden von Ebenen) | ||
* Noch dynamischer geht es mit [[AJAX]] | * Noch dynamischer geht es mit [[AJAX]] bzw [[xhr]], hier werden Seiteninhalte nachgeladen, ohne dass ein erneutes Laden der kompletten Seite erforderlich ist. | ||
* Einfaches Erstellen von Templates und Skins für [[Webapps|Web Applications]] mit Datenbankanbindung | * Einfaches Erstellen von Templates und Skins für [[Webapps|Web Applications]] mit Datenbankanbindung | ||
| Line 25: | Line 25: | ||
</head> | </head> | ||
<body> | <body> | ||
<p style="background:grey; text-align:right; font-size:32px; margin:0 0 40px 0; padding-right:20px"> | <p style="background-color:grey; text-align:right; font-size:32px; margin:0 0 40px 0; padding-right:20px"> | ||
Hallo <span style="color:red">Welt</span></p> | Hallo <span style="color:red">Welt</span></p> | ||
</body> | </body> | ||
| Line 42: | Line 42: | ||
<style type="text/css"> <!-- | <style type="text/css"> <!-- | ||
p { | p { | ||
background:grey; | background-color:grey; | ||
text-align:right; | text-align:right; | ||
font-size:32px; | font-size:32px; | ||
| Line 83: | Line 83: | ||
p { | p { | ||
background: grey; | background-color: grey; | ||
text-align: right; | text-align: right; | ||
font-size: 32px; | font-size: 32px; | ||
| Line 97: | Line 97: | ||
== Formate == | == Formate == | ||
=== Syntax === | === Syntax === | ||
<source lang="CSS">selector { property: value; }</source> | <source lang="CSS"> Selektor { Eigenschaft: Wert; }</source> | ||
oder auf englisch: | |||
<source lang="CSS"> selector { property: value; }</source> | |||
Der Selektor bestimmt, auf welche Abschnitte oder Elemente des HTML-Dokuments die Formatierung angewandt wird. Die Eigenschaft definiert, was verändert wird (z.B. Farbe) sowie den Wert der Eigenschaft (z.B. 'Rot') | |||
''Selektoren werden auch als Klassen (Class) bezeichnet.'' | ''Selektoren werden auch als Klassen (Class) bezeichnet.'' | ||
| Line 112: | Line 117: | ||
|- | |- | ||
| HTML Tags | | HTML Tags | ||
| HTML-Tag Formate<ref>Es können selbstverständlich nur Selektoren aus bestehenden HTML-Tags gewählt werden.</ref> | | HTML-Tag Formate <ref>Es können selbstverständlich nur Selektoren aus bestehenden HTML-Tags gewählt werden.</ref> | ||
| <source lang="CSS">selector</source > | | <source lang="CSS">selector</source > | ||
| <source lang="CSS">p { color:red; }</source> | | <source lang="CSS">p { color:red; }</source> | ||
| Line 118: | Line 123: | ||
|- | |- | ||
| Custom Class | | Custom Class | ||
| Eigene Formate<ref>Es müssen eigene Namen (ohne Sonderzeichen!) vergeben werden, die üblicherweise entweder die grafischen Eigenschaften oder die Zugehörigkeit zu bestimmten Layout-Elementen klar benennt.</ref> | | Eigene Formate <ref>Es müssen eigene Namen (ohne Sonderzeichen!) vergeben werden, die üblicherweise entweder die grafischen Eigenschaften oder die Zugehörigkeit zu bestimmten Layout-Elementen klar benennt.</ref> | ||
| <source lang="CSS">.selector</source > | | <source lang="CSS">.selector</source > | ||
| <source lang="CSS">.red { color:red; }</source> | | <source lang="CSS">.red { color:red; }</source> | ||
| Line 124: | Line 129: | ||
|- | |- | ||
| ID | | ID | ||
| Universelle ID<ref>Die ID darf nur ein einziges Mal vergeben sein. Üblicherweise werden IDs zur Positionierung von Layout-Elementen (Boxen) verwendet.</ref> | | Universelle ID <ref>Die ID darf nur ein einziges Mal vergeben sein. Üblicherweise werden IDs zur Positionierung von Layout-Elementen (Boxen) verwendet.</ref> | ||
| <source lang="CSS">#selector</source > | | <source lang="CSS">#selector</source > | ||
| <source lang="CSS">#myID { | | <source lang="CSS">#myID {color:red;}</source> | ||
| <source lang="HTML4Strict"><div id="myID"><p>Text</p></div></source> | | <source lang="HTML4Strict"><div id="myID"><p>Text</p></div></source> | ||
|} | |} | ||
<references/> | <references/> | ||
== Eigenschaften == | == Eigenschaften == | ||
| Line 228: | Line 232: | ||
</source> | </source> | ||
Die @media Direktive kann übrigens auch in HTML eingebunden werden. So ist die Anweisung <tt>@ | Die @media Direktive kann übrigens auch in HTML eingebunden werden. So ist die Anweisung <tt>@media print { ... }</tt> in einer CSS-Datei gleichbedeutend mit der Anweisung <tt><link media="print" ...></tt> in einer HTML-Datei. | ||
Weitere Browserweichen für CSS, Javascript und Herstellerabhängige Varianten findet man z.B. hier: | Weitere Browserweichen für CSS, Javascript und Herstellerabhängige Varianten findet man z.B. hier: | ||