CSS

Konzepte[edit]

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[edit]

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[edit]

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

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

HTML-Tags[edit]

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[edit]

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[edit]

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

#<name> [<tagnamelist>] {...

zum Beispiel

#xxx
{
  margin-left:10px;
}

<div id="xxx">

Abstände[edit]

Innenabstand (padding) und Außenabstand (margin)

margin[edit]

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[edit]

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[edit]

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

Größen[edit]

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

Resolution[edit]

The CSS resolution is different from the real device screen resolution. The CSS resolution is used for measurements in the CSS Rules, and the Screen Device Resolution is the actual number of pixels on the screen. The Density Display defines the ratio between the Screen Resolution and the CSS Resolution and is different in high-density screens. An example is Samsung Galaxy S10 Resolutions:

Device Resolution — 1440px by 3040px
CSS Resolution — 360px by 760px
Density Display — 4x (4 times for every pixel)

A complete list can be found on yesviz.

The Viewport is the area/window which is currently visible w/o scrollbar in CSS-Pixel.

Farben[edit]

Farben können in folgender Form angegeben werden:

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

Beispiele[edit]

unsichtbarer Button[edit]

s. Project "UweHeuer"->menu.jsp