CSS: Difference between revisions

Revision as of 16:29, 5 February 2010

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, das eine Kombination von PHP und JavaScript 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: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: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: 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

selector { property: value; }

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 { position:fixed; left:25px; }	<div id="myID"><p>Text</p></div>

↑ Es können selbstverständlich nur Selektoren aus bestehenden HTML-Tags gewählt werden.
↑ 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.
↑ 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)
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)

Editieren von Stylesheets

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

CSSEdit von MacRabbit (Mac)
Coda von Panic (Mac)
Firebug Add-On (Firefox)
Web Developer Toolbar (Firefox)
Aptana Studio (Free, open source, cross platform)
Notepad++ und CSS Xplorer Plugin (Windows)

Ressourcen

Kursbegleitende Quelldateien 018-024.zip
SelfHTML (CSS)
CSS4You - Umfassende deutsche CSS Referenz
CSS-Technik - Tutorials, Ressourcen, Skripte
Galileo OpenBook (Kapitel CSS)
CSS Menu Maker
Fun with Box Shadows (nur neueste Browser!)
intensivstation.ch CSS How-To: a[href=...] Attribut Selektoren
w3.org - CSS @media queries (Auswahl von CSS für Endgeräte)
Web Design Inspiration for the iPhone

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.

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

[1]

[2]

[3]

@@ Line 12: / Line 12: @@
 == 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>
+<nowiki><head></nowiki> </tt> oder inline (in individuellen Tags) mit <tt>&lt;tag style="background-color:red"&gt;</tt> eingebunden werden:
@@ Line 53: / Line 54: @@
 </head>
 <body>
-	<p>Hallo <span style="red">Welt</span></p>
+	<p>Hallo <span class="red">Welt</span></p>
 </body>
 </html>
@@ Line 72: / Line 73: @@
 </head>
 <body>
-	<p>Hallo <span style="red">Welt</span></p>
+	<p>Hallo <span class="red">Welt</span></p>
 </body>
 </html>