emailconfirmed, nsInternRO, nsInternRW, Administrators
3,356
edits
m
no edit summary
mNo edit summary |
|||
| (12 intermediate revisions by 4 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 179: | Line 183: | ||
== Advanced CSS == | == Advanced CSS == | ||
=== CSS3 === | |||
Die neuesten CSS-Funktionen für Browser der neuesten Generation bringen viele Erweiterungen, die das Gestalten mit CSS einfacher machen; angefangen von Schatten (text-shadow, box-shadow) bis hin zu mehrspaltigen Layouts: | |||
* [http://www.css3.info/ css3.info] - the newest techniques for modern browsers! | |||
* [http://www.css3.com/ css3.com reference] - the newest techniques for modern browsers! | |||
* [http://css-infos.net/properties/webkit.php Alle Webkit-Properties] | |||
=== Attribut-Selektoren === | === Attribut-Selektoren === | ||
| Line 204: | Line 215: | ||
More informations here: [http://www.intensivstation.ch/css/selectors/attribute-selectors/ intensivstation.ch] | More informations here: [http://www.intensivstation.ch/css/selectors/attribute-selectors/ intensivstation.ch] | ||
=== Browser- & Konfigurationsweichen mit CSS === | === Browser- & Konfigurationsweichen mit CSS === | ||
Einige Beispiele, wie man unterschiedliche Geräte mit der @media Direktive per CSS erkennen kann. | Einige Beispiele, wie man unterschiedliche Geräte mit der @media Direktive per CSS erkennen kann. | ||
<source lang="CSS"> | <source lang="CSS"> | ||
@media only screen and (max-device-width: 480px) { | @media only screen and (max-device-width: 480px) { | ||
/* btw: this is the official iPhone media query! */ | |||
/* max-device-width: 1024px for the iPad */ | |||
/* remember that "and (orientation:landscape)" can be added to the query */ | |||
} | |||
@media screen and (min-width:400px) and (max-width:800px) { ... } | @media screen and (min-width:400px) and (max-width:800px) { ... } | ||
@media all and (orientation:portrait) { ... } | @media all and (orientation:portrait) { ... } | ||
| Line 216: | 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: | ||
* [http://www.w3.org/TR/css3-mediaqueries/#media1 w3.org Media Queries Overview] | * [http://www.w3.org/TR/css3-mediaqueries/#media1 w3.org Media Queries Overview] | ||
* [http://www.css4you.de/wsbw/index.html css4you Browserweichen] | * [http://www.css4you.de/wsbw/index.html css4you Browserweichen] | ||
=== CSS-Hacks === | === CSS-Hacks === | ||
| Line 255: | Line 270: | ||
bietet ab Version 4 einen komfortablen Debugger für Webseiten an (Konsole, HTML, CSS, Script-Debugger und Ressourcen-Analyse). Zum Aktivieren in den Safari-Einstellungen "Erweitert" den Punkt ''"Menü 'Entwickler' in der Menüleise anzeigen"''. Danach kann man per Rechtsklick Elemente inspizieren ("Element-Informationen"). | bietet ab Version 4 einen komfortablen Debugger für Webseiten an (Konsole, HTML, CSS, Script-Debugger und Ressourcen-Analyse). Zum Aktivieren in den Safari-Einstellungen "Erweitert" den Punkt ''"Menü 'Entwickler' in der Menüleise anzeigen"''. Danach kann man per Rechtsklick Elemente inspizieren ("Element-Informationen"). | ||
=== Browser integration: Firefox === | === Browser integration: Firefox === | ||
Die Add-ons [https://addons.mozilla.org/de/firefox/addon/60 Web | Die Add-ons [https://addons.mozilla.org/de/firefox/addon/60 Web Developer] und [https://addons.mozilla.org/de/firefox/addon/1843 Firebug] sind für Webentwickler mit Mozilla Firefox schier unverzichtbar. | ||
== Ressourcen == | == Ressourcen == | ||
| Line 263: | Line 278: | ||
* [http://css-technik.de/ CSS-Technik] - Tutorials, Ressourcen, Skripte | * [http://css-technik.de/ CSS-Technik] - Tutorials, Ressourcen, Skripte | ||
* [http://openbook.galileocomputing.de/kit/itkomp16002.htm#Rxx355kap16002040004031F02F100 Galileo OpenBook] (Kapitel CSS) | * [http://openbook.galileocomputing.de/kit/itkomp16002.htm#Rxx355kap16002040004031F02F100 Galileo OpenBook] (Kapitel CSS) | ||
* [http://www.css3.info/ css3.info] - the newest techniques for modern browsers! | |||
* [http://www.css3.com/ css3.com reference] - the newest techniques for modern browsers! | |||
* [http://css-infos.net/properties/webkit.php Alle Webkit-Properties] | |||
* [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS | * [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS | ||
* [http://www.webdeveloperjuice.com/2010/01/14/14-jquery-and-css-demos-i-wish-i-knew-much-before/ 14 JQuery and CSS Demos I wish I knew before] | * [http://www.webdeveloperjuice.com/2010/01/14/14-jquery-and-css-demos-i-wish-i-knew-much-before/ 14 JQuery and CSS Demos I wish I knew before] | ||