emailconfirmed, nsInternRO, nsInternRW, Administrators
3,356
edits
m
no edit summary
mNo edit summary |
|||
| (38 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 18: | Line 18: | ||
Nicht sehr sinnvoll im Hinblick auf die Trennung von Inhalt und Design ist das Einbinden von Styles in Tags (inline style): | Nicht sehr sinnvoll im Hinblick auf die Trennung von Inhalt und Design ist das Einbinden von Styles in Tags (inline style): | ||
<source lang="HTML4Strict" | <source lang="HTML4Strict" highlight="7,8"> | ||
<html> | <html> | ||
<head> | <head> | ||
| 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 35: | Line 35: | ||
Möglich, aber nicht optimal ist das Einbinden eines Stylesheets im Header (intern): | Möglich, aber nicht optimal ist das Einbinden eines Stylesheets im Header (intern): | ||
<source lang="HTML4Strict" | <source lang="HTML4Strict" highlight="5-15,18"> | ||
<html> | <html> | ||
<head> | <head> | ||
| 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: | ||
'''HTML-Datei:''' | '''HTML-Datei:''' | ||
<source lang="HTML4Strict" | <source lang="HTML4Strict" highlight="5,8"> | ||
<html> | <html> | ||
<head> | <head> | ||
| Line 71: | Line 72: | ||
</head> | </head> | ||
<body> | <body> | ||
<p>Hallo <span | <p>Hallo <span class="red">Welt</span></p> | ||
</body> | </body> | ||
</html> | </html> | ||
| Line 78: | Line 79: | ||
<br/> | <br/> | ||
'''CSS-Datei:''' | '''CSS-Datei:''' | ||
<source lang="CSS" | <source lang="CSS"> | ||
/* My Custom CSS Style */ | /* My Custom CSS Style */ | ||
p { | p { | ||
background:grey; | background-color: grey; | ||
text-align:right; | text-align: right; | ||
font-size:32px; | font-size: 32px; | ||
margin:0 0 40px 0; | margin: 0 0 40px 0; | ||
padding-right:20px; | padding-right: 20px; | ||
} | } | ||
.red { color:red; } | |||
strong, .bold { font-weight:bold; } | .red { color: red; } | ||
strong, .bold { font-weight: bold; } | |||
</source> | </source> | ||
== Formate == | |||
=== Syntax === | |||
<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.'' | |||
Übersicht Selektoren | === Übersicht Selektoren === | ||
{|{{Template:Prettytable}} | {| {{Template:Prettytable}} | ||
| HTML- | |- | ||
| | ! Class | ||
| | ! Beschreibung | ||
! Syntax | |||
! Beispiel CSS | |||
! Beispiel HTML | |||
|- | |||
| HTML Tags | |||
| 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">p { color:red; }</source> | | <source lang="CSS">p { color:red; }</source> | ||
| <source lang="HTML4Strict"><p>Text</p></source> | |||
|- | |||
| 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> | |||
| <source lang="CSS">.selector</source > | |||
| <source lang="CSS">.red { color:red; }</source> | |||
| <source lang="HTML4Strict"><p class="red">Text</p></source> | |||
|- | |||
| ID | |||
| 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">#myID {color:red;}</source> | |||
| <source lang="HTML4Strict"><div id="myID"><p>Text</p></div></source> | |||
|} | |} | ||
<references/> | |||
== Eigenschaften == | |||
Eine Übersicht über (fast) alle CSS-Eigenschaften gibt es bei [http://de.selfhtml.org/css/eigenschaften/index.htm selfHTML]. | |||
Einige gängige Eigenschaften sind z.B. | |||
* Schrift: | |||
** font-family (z.B. Arial, Helvetica, Times) | |||
** font-size (z.B. 14px oder 120%) | |||
** font-weight | |||
** font-style | |||
** text-decoration (z.B. underline, none) | |||
** color (z.B. black oder #000000) | |||
** line-height (z.B. 16px oder 150%) | |||
** text-align (z.B. left oder right) | |||
* Elemente: | |||
** width und height | |||
** position (relative, absolute, fixed) | |||
** margin-left (äußerer Rand nach links) | |||
** padding-left (innerer Rand von links) | |||
** display (z.B. hidden, normal) | |||
* Farben: | |||
** background-color (z.B. white oder #FFFFFF) | |||
** 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… | |||
== Parameter == | |||
Folgende Parameter-Typen sind üblich: | |||
* benannte Parameter, z.B. | |||
** left | |||
** right | |||
** inherit | |||
** usw… | |||
* Numerische Parameter | |||
** 0 | |||
** 25px | |||
** 120% | |||
** 1.2em | |||
** usw... | |||
* Farbangaben können entweder nach den benannten Webfarben (''red'', ''green'', ''navy'') oder nach dem RGB Format in hexadezimaler Schreibweise notiert werden: <tt>#rrggbb</tt> bedeutet, dass die Farbe einen bestimmten Anteil Rot (<tt>rr</tt>) mit einem Wert von 0x00=0 bis 0xFF=255 hat. Gleiches dann für Grün (<tt>gg</tt>) und Blau (<tt>bb</tt>). Neuere Browser unterstützen unter Umständen auch die RGBA (Red Green Blue Alpha) Notation, hier gelten Werte von 0.0 bis 1.0 ([[float|Fließkommazahlen]]) | |||
** green | |||
** #00FF00 | |||
** 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 110: | Line 262: | ||
* [http://macrabbit.com/cssedit/ CSSEdit von MacRabbit] (Mac) | * [http://macrabbit.com/cssedit/ CSSEdit von MacRabbit] (Mac) | ||
* [http://www.panic.com/coda/ Coda von Panic] (Mac) | * [http://www.panic.com/coda/ Coda von Panic] (Mac) | ||
* ''( | * [https://addons.mozilla.org/de/firefox/addon/1843 Firebug Add-On] (Firefox) | ||
* [https://addons.mozilla.org/de/firefox/addon/60 Web Developer Toolbar] (Firefox) | |||
* [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) | |||
=== 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 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://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://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] | ||
{{Template:Webprogramming}} | |||