CSS: Difference between revisions

From Medien Wiki
mNo edit summary
 
(31 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]], das eine Kombination von [[PHP]] und [[JavaScript]] ist.
* 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><nowiki><head></nowiki></tt> oder inline (in individuellen Tags) mit <tt>&lt;tag style="background-color:red"&gt;</tt> eingebunden werden:
Stylesheets können intern und extern im <tt>&lt;head&gt;</tt> oder inline (in individuellen Tags) mit <tt>&lt;tag style="background-color:red"&gt;</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" line>
<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" line>
<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;
}
}
strong, b { color:red; }
.red { color:red; }
.bold { font-weight:bold; }
.bold, strong, b { font-weight:bold; }
--> </style>  
--> </style>  
</head>  
</head>  
<body>
<body>
<p>Hallo <span style="red">Welt</span></p>
<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" line>
<source lang="HTML4Strict" highlight="5,8">
<html>  
<html>  
<head>  
<head>  
Line 71: Line 72:
</head>
</head>
<body>  
<body>  
<p>Hallo <span style="red">Welt</span></p>
<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" line>
<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 ==
== 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 109: 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 115: 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 121: 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 { position:fixed; left:25px; }</source>
| <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 131: Line 139:
== Eigenschaften ==
== Eigenschaften ==


Eine Übersicht über (fast) alle CSS-Eigenschaften gibt es bei [http://de.selfhtml.org/css/eigenschaften/index.htm selfHTML]
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>&lt;link media="print" ...&gt;</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 137: 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)
* ''(bitte ergänzen…)''
* [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://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]

Latest revision as of 23:47, 6 January 2016

CSS (Cascading Style Sheets) ist eine Technik, die die vollständige Trennung von Inhalt und Design ermöglicht. Diese Trennung ist elementar für dynamische Inhalte und bringt in der Praxis sehr viele Vorteile mit sich. Wenn z.B. das Design einer Seite geändert werden soll, muss man keine Inhalte mehr konvertieren, sondern passt einfach das Stylesheet an!

Vorteile der Trennung von Inhalt und Design:

  • Neue Designs einfach umzusetzen ohne Inhalte ändern zu müssen
  • Designs passen sich an Endgeräte an (verschiedene CSS für z.B. großen Desktop / mobile Endgeräte mit sehr kleinen Bildschirmen / Ausdruck / ...)
  • Barrierefreies Internet (z.B. für Hör- und Sehgeschädigte)
  • Dynamische Darstellung mit JavaScript möglich (z.B. Ein-/Ausblenden von Ebenen)
  • 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 Web Applications mit Datenbankanbindung

Zur Verdeutlichung sei auf die Seite CSS Zen Garden verwiesen, die diesen Design-Ansatz hervorragend demonstriert. Die HTML-Datei bleibt immer gleich, nur das CSS wird geändert und das Design radikal anders dargestellt.

Einbinden von CSS

Stylesheets können intern und extern im <head> oder inline (in individuellen Tags) mit <tag style="background-color:red"> eingebunden werden:


Inline (Body)

Nicht sehr sinnvoll im Hinblick auf die Trennung von Inhalt und Design ist das Einbinden von Styles in Tags (inline style): 

<html> 
<head> 
	<title>020 CSS (Inline)</title> 
	<meta http-equiv="content-type" content="text/html; charset=UTF8"/> 
</head>  
<body> 
	<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>  
</body> 
</html>



Intern (Head)

Möglich, aber nicht optimal ist das Einbinden eines Stylesheets im Header (intern): 

<html> 
<head> 
	<title>21 CSS (Head)</title> 
	<meta http-equiv="content-type" content="text/html; charset=UTF8"/> 
	<style type="text/css"> <!--
		p {
			background-color:grey;
			text-align:right;
			font-size:32px;
			margin:0 0 40px 0;
			padding-right:20px;
		}
		.red { color:red; }
		.bold, strong, b { font-weight:bold; }		
	-->	</style> 
</head> 
<body>
	<p>Hallo <span class="red">Welt</span></p>
</body> 
</html>



Extern (Head)

Optimal ist das Einbinden eines Stylesheets in den Header als Link (Referenz) zu einer externen CSS-Datei:

HTML-Datei: 

<html> 
<head> 
	<title>020 CSS (Inline)</title> 
	<meta http-equiv="content-type" content="text/html; charset=UTF8"/> 
	<link rel="stylesheet" type="text/css" href="022_style.css" /> 
</head>
<body> 
	<p>Hallo <span class="red">Welt</span></p>
</body> 
</html>


CSS-Datei: 

/* My Custom CSS Style */

p {
	background-color: grey;
	text-align: right;
	font-size: 32px;
	margin: 0 0 40px 0;
	padding-right: 20px;
}

.red { color: red; }

strong, .bold { font-weight: bold; }

Formate

Syntax

 Selektor { Eigenschaft: Wert; }

oder auf englisch: 

 selector { property: value; }

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

Class Beschreibung Syntax Beispiel CSS Beispiel HTML
HTML Tags HTML-Tag Formate [1] 
selector
 
p { color:red; }
 
<p>Text</p>
Custom Class Eigene Formate [2] 
.selector
 
.red { color:red; }
 
<p class="red">Text</p>
ID Universelle ID [3] 
#selector
 
#myID {color:red;}
 
<div id="myID"><p>Text</p></div>
  1. ↑ Es können selbstverständlich nur Selektoren aus bestehenden HTML-Tags gewählt werden.
  2. ↑ 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.
  3. ↑ Die ID darf nur ein einziges Mal vergeben sein. Üblicherweise werden IDs zur Positionierung von Layout-Elementen (Boxen) verwendet.

Eigenschaften

Eine Übersicht über (fast) alle CSS-Eigenschaften gibt es bei 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. box-shadow: 3px 3px 5px black;)
  • 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: #rrggbb bedeutet, dass die Farbe einen bestimmten Anteil Rot (rr) mit einem Wert von 0x00=0 bis 0xFF=255 hat. Gleiches dann für Grün (gg) und Blau (bb). Neuere Browser unterstützen unter Umständen auch die RGBA (Red Green Blue Alpha) Notation, hier gelten Werte von 0.0 bis 1.0 (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:

Attribut-Selektoren

Kaum bekannt ist die Möglichkeit, sog. Attribut-Selektoren zu definieren. Zum Beispiel haben wir folgenden HTML-Quelltext: 

<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>

Nun könnte man z.B. folgende Attribut-Selektoren konstruieren: 

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;
}

More informations here: intensivstation.ch


Browser- & Konfigurationsweichen mit CSS

Einige Beispiele, wie man unterschiedliche Geräte mit der @media Direktive per CSS erkennen kann. 

@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) { ... }

Die @media Direktive kann übrigens auch in HTML eingebunden werden. So ist die Anweisung @media print { ... } in einer CSS-Datei gleichbedeutend mit der Anweisung <link media="print" ...> in einer HTML-Datei.

Weitere Browserweichen für CSS, Javascript und Herstellerabhängige Varianten findet man z.B. hier:

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 !important. Jeder Browser außer dem IE beachtet die !important Auszeichnung und überschreibt vorangegangene Anweisungen: 

color="red" !important;
color="green";

Überlicherweise werden vorangehende Anweisungen von nachfolgenden überschrieben. D.h. wäre im Beispiel oben das !important 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 !important 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 !important)!

Der Hack liegt nun darin, dass !important 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:

Editieren von Stylesheets

Neben der manuellen Editierung in einem Texteditor, gibt es viele komfortable Tools, die das sehr übersichtlich erledigen:

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 Web Developer und Firebug sind für Webentwickler mit Mozilla Firefox schier unverzichtbar.

Ressourcen



Diese Seite ist Teil der Werkmodule Grundlagen der Webprogrammierung und WebApps - Grundlagen Webprogrammierung von Michael Markert für Interface Design / Fakultät Medien an der Bauhaus-Universität Weimar.

Retrieved from "https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=CSS&oldid=77322"