emailconfirmed, nsInternRO, nsInternRW, Administrators
3,356
edits
m (→Ressourcen) |
mNo edit summary |
||
(22 intermediate revisions by 5 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 12: | Line 12: | ||
== Einbinden von CSS == | == Einbinden von CSS == | ||
Stylesheets können intern und extern im <tt> | Stylesheets können intern und extern im <tt><head></tt> oder inline (in individuellen Tags) mit <tt><tag style="background-color:red"></tt> eingebunden werden: | ||
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 48: | Line 48: | ||
padding-right:20px; | padding-right:20px; | ||
} | } | ||
.red { color:red; } | |||
.bold { font-weight:bold; } | .bold, strong, b { font-weight:bold; } | ||
--> </style> | --> </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<p>Hallo <span | <p>Hallo <span class="red">Welt</span></p> | ||
</body> | </body> | ||
</html> | </html> | ||
Line 59: | Line 59: | ||
<br/><br/> | <br/><br/> | ||
=== Extern (Head) === | === Extern (Head) === | ||
Optimal ist das Einbinden eines Stylesheets in den Header als Link ''(Referenz)'' zu einer externen CSS-Datei: | Optimal ist das Einbinden eines Stylesheets in den Header als Link ''(Referenz)'' zu einer externen CSS-Datei: | ||
Line 71: | Line 72: | ||
</head> | </head> | ||
<body> | <body> | ||
<p>Hallo <span | <p>Hallo <span class="red">Welt</span></p> | ||
</body> | </body> | ||
</html> | </html> | ||
Line 82: | Line 83: | ||
p { | p { | ||
background: grey; | background-color: grey; | ||
text-align: right; | text-align: right; | ||
font-size: 32px; | font-size: 32px; | ||
Line 96: | 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 111: | 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 117: | 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 123: | 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> | ||
|} | |} | ||
Line 154: | Line 160: | ||
** background-color (z.B. white oder #FFFFFF) | ** background-color (z.B. white oder #FFFFFF) | ||
** color (z.B. red oder #FF0000) | ** color (z.B. red oder #FF0000) | ||
* Neue Eigenschaften (CSS 3) | |||
** box-shadow (z.B. <tt>box-shadow: 3px 3px 5px black;</tt>) | |||
* u.v.m… | * u.v.m… | ||
Line 173: | Line 181: | ||
** #00FF00 | ** #00FF00 | ||
** rgba(0, 1.0 , 0 , 0.75) | ** rgba(0, 1.0 , 0 , 0.75) | ||
== 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 === | |||
Kaum bekannt ist die Möglichkeit, sog. Attribut-Selektoren zu definieren. Zum Beispiel haben wir folgenden HTML-Quelltext: | |||
<source lang="HTML4Strict"> | |||
<a href="http://www.uni-weimar.de/medien" target="_blank"> | |||
<img src="http://www.uni-weimar.de/medien/mypic.jpg" title="foo" /> | |||
</a> | |||
<a href="http://www.uni-weimar.de/medien/meinDokument.zip"><img src="zipicon.png" /></a> | |||
</source> | |||
Nun könnte man z.B. folgende Attribut-Selektoren konstruieren: | |||
<source lang="CSS"> | |||
img[title] /* all images with title */ | |||
img[title="foo"] /* all items with title "foo" */ | |||
a[href*="weimar"] /* all references containing the string "weimar" */ | |||
a[href^="http"] /* all references beginning with "http" (eg get ftp links!) */ | |||
a[href$=".zip"] /* all references ending with ".zip" (detect document types and add icons!) */ | |||
/* eg: */ | |||
a[href$='.pdf'] { | |||
padding: 5px 0 5px 20px; | |||
background: url(icons/pdf.png) no-repeat center left; | |||
} | |||
</source> | |||
More informations here: [http://www.intensivstation.ch/css/selectors/attribute-selectors/ intensivstation.ch] | |||
=== Browser- & Konfigurationsweichen mit CSS === | |||
Einige Beispiele, wie man unterschiedliche Geräte mit der @media Direktive per CSS erkennen kann. | |||
<source lang="CSS"> | |||
@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 all and (orientation:portrait) { ... } | |||
@media handheld and (orientation:landscape) { ... } | |||
@media screen and (min-resolution: 300dpi) or (min-resolution: 118dpcm) { ... } | |||
@media tv and (scan: progressive) { ... } | |||
</source> | |||
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: | |||
* [http://www.w3.org/TR/css3-mediaqueries/#media1 w3.org Media Queries Overview] | |||
* [http://www.css4you.de/wsbw/index.html css4you Browserweichen] | |||
=== CSS-Hacks === | |||
Es gibt eine große Menge an CSS Hacks, die alle vornehmlich dem Ziel dienen, bestimmte Unzulänglichkeiten von Browsern auszugleichen, ohne ein Extra Stylesheet für jeden Browser anlegen zu müssen. | |||
Ein klassischer Hack ist zum Beispiel die Verwendung von <tt>!important</tt>. Jeder Browser außer dem IE beachtet die !important Auszeichnung und überschreibt vorangegangene Anweisungen: | |||
<source lang="CSS"> | |||
color="red" !important; | |||
color="green"; | |||
</source> | |||
Überlicherweise werden vorangehende Anweisungen von nachfolgenden überschrieben. D.h. wäre im Beispiel oben das <tt>!important</tt> nicht vorhanden, würde die Farbe zuerst auf Rot gesetzt und dann in der nächsten Zeile vom Wert Grün überschrieben. Damit wäre die Farbe also Grün. Die Anweisung <tt>!important</tt> in der ersten Zeile verursacht nun, dass sich diese Anweisung nicht mehr überschreiben lässt (also auch nicht mehr von Subklassen, es sei denn, auch hier findet sich die Anweisung <tt>!important</tt>)! | |||
Der Hack liegt nun darin, dass <tt>!important</tt> vom Internet-Explorer nicht beachtet wird, deshalb gilt: | |||
* IE: Element ist Grün | |||
* Alle anderen Browser: Element ist Rot | |||
Viele weitere Hacks sind u.a. hier zu finden: | |||
* [http://de.selfhtml.org/css/layouts/browserweichen.htm SELFHTML: CSS-Browserweichen und HTML-Hacks] | |||
* [http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html Umfassende Übersicht welche Browser welche CSS-Eigenschaften interpretieren] | |||
* [http://www.evolt.org/ten-css-tricks-you-may-not-know 10 CSS Tricks you may not know] | |||
== Editieren von Stylesheets == | == Editieren von Stylesheets == | ||
Line 182: | Line 266: | ||
* [http://www.aptana.org/studio Aptana Studio] (Free, open source, cross platform) | * [http://www.aptana.org/studio Aptana Studio] (Free, open source, cross platform) | ||
* [http://notepad-plus.sourceforge.net Notepad++] und [http://sourceforge.net/projects/cssexplorerplug CSS Xplorer Plugin] (Windows) | * [http://notepad-plus.sourceforge.net Notepad++] und [http://sourceforge.net/projects/cssexplorerplug CSS Xplorer Plugin] (Windows) | ||
=== Browser integration: Safari === | |||
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 === | |||
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 == | ||
* [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_018-024.zip Kursbegleitende Quelldateien | * [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_018-024.zip Kursbegleitende Quelldateien 018-024.zip] | ||
* [http://de.selfhtml.org/css/index.htm SelfHTML (CSS)] | * [http://de.selfhtml.org/css/index.htm SelfHTML (CSS)] | ||
* [http://www.css4you.de/ CSS4You] - Umfassende deutsche CSS Referenz | * [http://www.css4you.de/ CSS4You] - Umfassende deutsche CSS Referenz | ||
* [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://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.cssmenumaker.com/ CSS Menu Maker] | * [http://www.cssmenumaker.com/ CSS Menu Maker] | ||
* [http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/ Fun with Box Shadows] (nur neueste Browser!) | * [http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/ Fun with Box Shadows] (nur neueste Browser!) | ||
* [http://www.intensivstation.ch/css/selectors/attribute-selectors/ intensivstation.ch] CSS How-To: a | * [http://www.intensivstation.ch/css/selectors/attribute-selectors/ intensivstation.ch] CSS How-To: a href=... Attribut Selektoren | ||
* [http://www.w3.org/TR/css3-mediaqueries/ w3.org] - CSS @media queries (Auswahl von CSS für Endgeräte) | * [http://www.w3.org/TR/css3-mediaqueries/ w3.org] - CSS @media queries (Auswahl von CSS für Endgeräte) | ||
* [http://m.cssiphone.com/ Web Design Inspiration for the iPhone] | * [http://m.cssiphone.com/ Web Design Inspiration for the iPhone] |