CSS: Difference between revisions

Revision as of 21:05, 26 February 2014

Konzepte

Style-Sheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Befehle. Mit Hilfe von Style-Sheets können Sie beispielsweise bestimmen, daß Überschriften 1. Ordnung eine Schriftgröße von 18 Punkt haben, in der Schriftart Helvetica, aber nicht fett erscheinen, und mit einem Abstand von 1,75 Zentimeter zum darauf folgenden Absatz versehen werden. Angaben dieser Art sind mit herkömmlichem HTML nicht möglich.

Ein weiteres wichtiges Leistungsmerkmal von Style-Sheets ist es, daß Sie Definitionen zentral angeben können. So können Sie beispielsweise im Kopf einer HTML-Datei zentrale Definitionen zum Aussehen einer Tabellenzelle notieren. Alle Tabellenzellen der entsprechenden HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner. Style sheets lassen zudem unterschiedliche Definitionen von Formaten für verschiedene Ausgabemedien zu.

Es gibt mehrere Sprachen zum Definieren von Style-Sheets. Die bekannteste ist die CSS-Sprache. CSS steht für "Cascading Style Sheets". Diese Sprache wird vom W3-Konsortium, das auch für die Normierung von HTML zuständig ist, vorgeschlagen. Genau so, wie es HTML-Sprachversionen gibt, gibt es auch CSS-Sprachversionen. Die erste Version 1.0 enstand 1996. Seit März 1998 gibt es die Version 2.0. Eine wichtige Eigenschaft von CSS ist der Umgang mit Konflikten. Diese Regeln werden auch cascades genannt.

Einbinden von CSS Angaben

Entweder in einem eigenen File oder direkt im HTML, z.B.

<html>
<head>
[<link rel=stylesheet type="text/css" href="<Filename>">]

<style type="text/css">
<!--
<StyleSheet>	
//-->
</style>
</head>
<body>
<p id="<UnabhaengigerFormatname>">
</body>

Über die link Syntax können style sheet Angaben in externen Dateien stehen. Damit der Browser, weil er keine style sheets versteht, die style sheet Angaben als HTML interpretiert sind sie als Kommentar gekennzeichnet. Alle Angaben, die in </style> und </style> geklammert sind überschreiben die Formate aus der externen Datei. Eine andere Möglichkeit der Angabe von Style-Informationen, die ebenfalls die Angaben in einer zentralen Datei überschreiben, ist folgende, die in dem Beispiel die Breite eines Buttons einstellt:

<button style="width:200">ButtonText</button>

Kommentare in style sheet werden durch /* eingeleitet und */ beendet.

CSS Beschreibungen

Eine CSS-Beschreibung besteht aus einer Menge von Regeln folgender Art:

<selector list>
{
  <attribute>:<value>;
}

HTML-Tags

Für HTML-Tag wird als <selector> der Tagname oder der Universalselektor *, der alle HTML-Tags repräsentiert, angegeben. Um anzugeben das eine CSS-Definition für ein HTML-Tag nur innerhalb eines anderen HTML-Tag greift können mehrere HTML Tags hintereinander geschrieben werden:

<TagName> [<TagList>] { ... }
p,h1,h2,h3 {color: red; font-family: arial;}

<TagName> * <TagName> { ...
<TagName> > <TagName> { ...
<TagName> + <TagName> { ...

Um bestimmte Typen eines Tags wie z.B. der submit-Type des Input-Tags zu definieren verwendet man folgende Syntax:

<TagName>["<Type>"] { ..

Klassen

HTML-Tags einer bestimmten Klasse (Attribut class) wird als <selector> der Tagname gefolgt von einem Klassennamen angegeben:

[<TagName>].<KlassenName> {...}
.myClass1 {text-align: left; color: red;}
<h2 class=”myClass1”>My CSS styled  text</h2>

The tagname can be ommitted.

Individuelle HTML-Tags

Für individuelle HTML-Tags (Attribut id="name") erhält sieht der <selector> wie folgt aus:

#<name> <tagnamelist> {...

Abstände

Innenabstand (padding) und Außenabstand (margin)

margin

margin-left:0; margin-right:auto; = linksbündig ausrichten (Voreinstellung). margin-left:auto; margin-right:auto; = zentriert ausrichten. margin-left:auto; margin-right:0; = rechtsbündig ausrichten.

padding

padding: <Values>

if only one value specified it's taken for top, bottom, left and right
if two than the first for top and bottom, the second for left and right
if three than the first for top, the second for left and right, and the third for bottom
if for than in the order top, right, bottom and left

Viewport

@viewport 
{
  width: 320px;
  zoom: 1;
}

Größen

Mit font-size im body-Tag legt man fest, wie groß 1 em ist.

Farben

Farben können in folgender Form angegeben werden:

color: (blue|...)
color: #<HexRGB>
color: rgb(<IntRed>,<IntGreen>,<IntBlue>)

Beispiele

unsichtbarer Button

s. Project "UweHeuer"->menu.jsp

@@ Line 81: / Line 81: @@
 * if three than the first for top, the second for left and right, and the third for bottom
 * if for than in the order top, right, bottom and left
+==Viewport==
+ @viewport
+ {
+   width: 320px;
+   zoom: 1;
+ }
 ==Größen==
 Mit font-size im body-Tag legt man fest, wie groß 1 em ist.
 ==Farben==