CSS: Difference between revisions

From Medien Wiki
(created)
 
Line 12: Line 12:


== Einbinden von CSS ==
== Einbinden von CSS ==
# im <tt><nowiki><head></nowiki></tt> (intern und extern)
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:
# in individuellen Tags mit <tt>&lt;tag style="background-color:red"&gt;</tt>
 
 
=== 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 ==
Retrieved from "https://www.uni-weimar.de/kunst-und-gestaltung/wiki/CSS"