CSS: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 44: | Zeile 44: | ||
*/ | */ | ||
</source> | </source> | ||
== Einbinden in HTML == | |||
CSS Regeln können auf 3 unterschiedliche Arten in HTML eingebunden werden. | |||
=== Verwendung als Style Attribut === | |||
<source lang="html4strict"> | |||
<p style="font-weight: bold;">fett geschriebener Absatz</p> | |||
</source> | |||
Nachteil: Man benötigt für jeden Absatz, den man speziell formatieren möchte, dieses style-Attribut im <nowiki><p></nowiki>-Tag. Ändert man die Formatierung für Absätze, müsste jeder Absatz händisch umformatiert werden. | |||
=== Style Element === | |||
<source lang="html4strict"> | |||
<head> | |||
<title>CSS-Einbindung per 'style'-Element</title> | |||
<style type="text/css"> | |||
p { | |||
font-weight: bold; | |||
} | |||
</style> | |||
</head> | |||
</source> | |||
Vorteil: Ersparnis von Formatierungen jedes einzelnen Elements<br /> | |||
Nachteil: Jede einzelne Seite muss mit dem style-Bereich ausgestattet werden. Bei mehreren Seiten erhöht sich der Wartungsaufwand | |||
=== Als Link zu einer ausgelagerten CSS Datei === | |||
<source lang="html4strict"> | |||
<link rel="stylesheet" type="text/css" href="format.css" /> | |||
</source> | |||
Der große Vorteil an Variante 3 ist die zentrale Datei, die | |||
Änderungen werden dann sofort für alle Seiten übernommen, die diese Datei eingebunden haben. Es sinkt somit die Fehleranfälligkeit, man vermeidet Codeverdopplung und erhöht somit die Wartbarkeit der Website. | |||
== Literatur == | == Literatur == | ||
Version vom 17. August 2009, 09:45 Uhr
| Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. |
Grundlagen
CSS ist die Abkürzung für Cascading Style Sheets und die Formatierungssprache für HTML. CSS wurde in den 90er Jahren als Standard vom World Wide Web Consortium (W3C) [1] verabschiedet und wird mittlerweile von allen gängigen Browsern fast zu 100% implementiert.
Mit CSS ist es möglich, das Konzept der Trennung von Content und Design umzusetzen, was in reinem HTML nicht möglich ist.
Aufbau einer CSS Regel
Eine CSS Regel ist immer nach folgendem Schema aufgebaut:
Selektor { Attribut: Wert; }
Der Selektor steht für jedes zu formatierende HTML-Element. Das Attribut oder auch Eigenschaft genannt, stellt die Möglichkeit dar, wie ein HTML-Element formatiert werden kann. Die Möglichkeiten richten sich hier nach dem Element selbst. Der Wert definiert die konkrete Gestalt der Formatierung und kann bspw. in Pixel, Farbcodes oder anderen Einheiten angegeben sein.
Ein einfacher Absatz kann mithilfe folgender Regel formatiert werden:
p {
font-size: 12px;
color: black;
}
Kommentare werden auf zwei Arten verwendet, einerseits können kurze Textstellen zur Erklärung geschrieben werden, man kann aber auch die Regel mit Hilfe eines Kommentars 'ausblenden' bzw. deaktivieren.
/* Kommentar für einfachen Absatz */
p {
font-size: 12px;
color: green;
}
/* Die folgende Regel kommt nicht zur ausführung, da sie auskommentiert ist */
/*
h1 {
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
*/
Einbinden in HTML
CSS Regeln können auf 3 unterschiedliche Arten in HTML eingebunden werden.
Verwendung als Style Attribut
<p style="font-weight: bold;">fett geschriebener Absatz</p>
Nachteil: Man benötigt für jeden Absatz, den man speziell formatieren möchte, dieses style-Attribut im <p>-Tag. Ändert man die Formatierung für Absätze, müsste jeder Absatz händisch umformatiert werden.
Style Element
<head>
<title>CSS-Einbindung per 'style'-Element</title>
<style type="text/css">
p {
font-weight: bold;
}
</style>
</head>
Vorteil: Ersparnis von Formatierungen jedes einzelnen Elements
Nachteil: Jede einzelne Seite muss mit dem style-Bereich ausgestattet werden. Bei mehreren Seiten erhöht sich der Wartungsaufwand
Als Link zu einer ausgelagerten CSS Datei
<link rel="stylesheet" type="text/css" href="format.css" />
Der große Vorteil an Variante 3 ist die zentrale Datei, die Änderungen werden dann sofort für alle Seiten übernommen, die diese Datei eingebunden haben. Es sinkt somit die Fehleranfälligkeit, man vermeidet Codeverdopplung und erhöht somit die Wartbarkeit der Website.
Literatur
Quellen