emailconfirmed, nsInternRO, nsInternRW, Administrators
3,356
edits
(added advanced section) |
|||
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 132: | Line 131: | ||
<references/> | <references/> | ||
== Eigenschaften == | == Eigenschaften == | ||
Line 156: | Line 156: | ||
** 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 175: | Line 177: | ||
** #00FF00 | ** #00FF00 | ||
** rgba(0, 1.0 , 0 , 0.75) | ** rgba(0, 1.0 , 0 , 0.75) | ||
== Advanced CSS Stuff == | |||
=== 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] | |||
=== Browserweichen mit CSS === | |||
Einige Beispiele, wie man unterschiedliche Geräte mit CSS erkennen kann. | |||
<source="CSS"> | |||
/* detect iPhones */ | |||
@media only screen and (max-device-width: 480px) { | |||
... | |||
} | |||
</source> | |||
Die @media Direktive kann übrigens auch in HTML eingebunden werden. So ist die Anweisung <tt>@medie 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.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. | |||
== Editieren von Stylesheets == | == Editieren von Stylesheets == | ||
Line 186: | Line 235: | ||
=== Browser integration: Safari === | === 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"). | 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 === | ||
Line 197: | Line 245: | ||
* [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://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] |