emailconfirmed, nsInternRO, nsInternRW, Administrators
3,356
edits
(created) |
|||
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><tag style="background-color:red"></tt> 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): | |||
<source lang="HTML4Strict" line> | |||
<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> | |||
</source> | |||
<br/><br/> | |||
=== Intern (Head) === | |||
Möglich, aber nicht optimal ist das Einbinden eines Stylesheets im Header (intern): | |||
<source lang="HTML4Strict" line> | |||
<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; | |||
} | |||
strong, b { color:red; } | |||
.bold { font-weight:bold; } | |||
--> </style> | |||
</head> | |||
<body> | |||
<p>Hallo <span style="red">Welt</span></p> | |||
</body> | |||
</html> | |||
</source> | |||
<br/><br/> | |||
=== Extern (Head) === | |||
Optimal ist das Einbinden eines Stylesheets in den Header als Link ''(Referenz)'' zu einer externen CSS-Datei: | |||
'''HTML-Datei:''' | |||
<source lang="HTML4Strict" line> | |||
<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 style="red">Welt</span></p> | |||
</body> | |||
</html> | |||
</source> | |||
<br/> | |||
'''CSS-Datei:''' | |||
<source lang="CSS" line> | |||
/* 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; } | |||
</source> | |||
== Formate und Eigenschaften == | |||
Syntax: | |||
<source lang="CSS">selector { property: value; }</source> | |||
Der selector wird auch als class bezeichnet | |||
Übersicht Selektoren: | |||
{|{{Template:Prettytable}} | |||
| HTML-Klasse | |||
| Format für bestehende HTML-Tags | |||
| Selektor heißt: <tt>tag</tt> | |||
| <source lang="CSS">p { color:red; }</source> | |||
|} | |||
== Editieren von Stylesheets == | |||
Neben der manuellen Editierung in einem Texteditor, gibt es viele komfortable Tools, die das sehr übersichtlich erledigen: | |||
* [http://macrabbit.com/cssedit/ CSSEdit von MacRabbit] (Mac) | |||
* [http://www.panic.com/coda/ Coda von Panic] (Mac) | |||
* ''(bitte ergänzen…)'' | |||
== Ressourcen == | == Ressourcen == |