Maßeinheiten in CSS

Es ist in CCS auch wichtig die Maßeinheiten zu kennen, die uns zur Verfügung steht. Leider gibt es hier ein kleines oder auch etwas größere Problem. Da die Größe von den Betriebssystemen verschieden berechnet wird, ist nicht gewährleistet, dass z.B. die Schriftgröße auf einen anderen Rechner gut lesbar ist. Man sollte deshalb darauf achten dass die Schrift nicht zu klein ist.

Kommawerte der Maßeinheiten müssen immer mit einem Punkt geschrieben werden (11,45 ist also 11.45).

Hier sind die Maßeinheiten die uns unter CSS zur Verfügung stehen: pt, pc, in, mm, cm, px, em, ex und %

Die absolute Maßeinheiten
Absolute Maßeinheiten geben einen festen Wert an.

pt    steht für Point, 1 Point ist sozusagen ein Punkt groß auf dem Bildschirm. 1 Punkt entspricht 1/72 Inches.
pc   steht für Pica, 1 Pica entspricht 12 Punkte auf dem Bildschirm.
in    steht für Inch, 1 Inch entspricht 2.54 Zentimeter.
mm steht für Millimeter.
cm  steht für Zentimeter.
px   steht für Pixel, die Größe des Pixels ist vom Bildschirm abhängig.

Die relative Maßeinheiten
Relative Maßeinheiten werden erst errechnet.

em  steht für bezogen auf die Schriftgröße des Elements oder bezogen auf die Schriftgröße des Elternelements, wenn em bei der Schriftgröße des Elements angewendet wird.
ex   steht für bezogen auf die Größe des Kleinbuchstaben x des Elements oder bezogen auf die Größe des Kleinbuchstaben x auf das Elternelement, wenn ex bei der Schriftgröße des Elternelements angewendet wird.
%   steht für Prozent, je nach CSS-Eigenschaft relativ zur Größe des Elements, oder zu der des Elternelements.

Aufbau des CSS-Syntax

Der Syntax des CSS-Codes ist in drei Bereichen zu unterteilen. Der Selektor, die Eigenschaft und der Wert.

Selektor {Eigenschaft: Wert;}

Der Selektor der aus HTML-Tags besteht, es müssen aber nicht immer HTML-Tags sein, mehr dazu aber erst später. Die Eigenschaft und der Wert stehen zwischen { und }. Bei den Eigenschaften wird z.B. die Textfarbe angegeben, nach der Eigenschaft steht immer ein Doppelpunkt. Der Wert ist der Wert den die Eigenschaft erhält, nach einem Wert steht immer ein Semikolon. Es können auch mehr als nur eine Eigenschaft in den geschweiften Klammern angegeben werden, die dann immer durch ein Semikolon getrennt sind.

Selektor {Eigenschaft: Wert; Eigenschaft: Wert;}

Kommentare in CSS

Kommentare in CSS sind natürlich auch möglich und sinnvoll, um den Code übersichtlicher zu gestallten und eventuell anderen Web-Designer die Arbeit mit ihrem Code leichter zu machen. CSS-Kommentare stehen zischen /* und */. Hier ein Beispiel:

1. <html>
2.         <head>
3.                 <title> Layout mit CSS </title>
4.                 <style>
5.                         /* Blaue Textfarbe für Textabsätze */
6.                         p{color:blue;}
7.                 </style>
8.         </head
9.         <body>
10.                 <p>Dies ist ein Beispieltext!</p>
11.         </body>
12. </html>

Wenn der CSS-Code zentral in einer HTML-Datei liegt, darf ein CSS Kommentar nur zwischen den Tags <style> und </style> stehen, außerhalb dieser Tags wird der Kommentar nicht als Kommentar erkannt. Der Text des Kommentares kann auch über mehrere Zeilen gehen. Hier ein Beispiel:

1. <html>
2.         <head>
3.                 <title> Layout mit CSS </title>
4.                 <style>
5.                         /* Blaue
6.                            Textfarbe
7.                            für Textabsätze */
8.                         p{color:blue;}
9.                 </style>
10.         </head
11.         <body>
12.                 <p>Dies ist ein Beispieltext!</p>
13.         </body>
14. </html>

Bei Stylesheets die im HTML-Tag stehen, ist es nur möglich einen HTML-Kommentar (Kommentare in HTML) zu schreiben.

In einer externen CSS-Datei können Kommentare in der ganzen Datei verwendet werden.

Kommentare in HTML

In HTML können auch Kommentare erstellt werden, damit der Code Übersichtlicher bleibt. Hier ein Beispiel:

1. <html>
2.         <head>
3.                 <title> Kommentare in HTML </title>
4.         </head
5.         <body>
6.                 <!-- Dies ist ein Kommentar in HTML. -->
7.                 <p> Perfekt ist man, wenn man sich seine Fehler eingesteht
8.                     und es versucht besser zu machen! </p>     
9.                 <!--
10.                         Das ist auch ein Kommentar!
11.                 -->
12.         </body>
13. </html>

Kommentare werden immer mit <!-- angefangen und mit --> beendet. Durch das <!-- wird einfach der Text vom Browser übersprungen bis zu -->. Der Kommentar-Text braucht nicht in der selben Zeile stehen wie <!-- und -->, wie es in Zeile 9 bis 11 zu sehen ist. Hier das Resultat im Browser:

Einführung in CSS

CSS (Cascading Style Sheets) ist für das Layout der Webseiten zuständig. Es ist zwar in HTML auch möglich, wie es im HTML Tutorial beschrieben ist, in HTML ist es aber um einiges umständlicher und es ist nicht sicher, ob alle Tags und Attribute von jeden Browser unterstützt werden. CSS dagegen wird von allen Browsern unterstützt. Man sollte sich angewöhnen für das Layout CSS zu verwenden und nicht mehr die HTML-Attribute.

Wir erstellen uns eine Datei home.html, diese Datei wird in den nächsten Tutorials immer wieder verwendet, der Code wird aber öfters ausgetauscht und/oder erweitert. Jetzt schreiben wir das HTML-Grundgerüst für unsere Webseite. Hier der dazugehörige HTML-Code:

1. <html>
2.         <head>
3.                 <title> Layout mit CSS </title>
4.         </head
5.         <body>
6.        
7.         </body>
8. </html>
9. 
   

Wer das erste HTML Tutorial (Einführung in HTML) gelesen hat, dürfte den Beispielcode ohne Probleme verstehen.

Es gibt drei Methoden Stylesheets zu verwenden.

Stylesheets in ein Tag schreiben
Mit dem Attribut style können wir den CSS-Code in ein HTML-Tag schreiben. Hier ein Beispiel:

1. <html>
2.         <head>
3.                 <title> Layout mit CSS </title>
4.         </head
5.         <body>
6.                 <p style="color:red;">Beispieltext für den Textabsatz.</p>
7.         </body>
8. </html>

Die Werte des style-Attributs ändert die Schriftfarbe des Absatzes auf rot. Man muss aber bedenken, dass die Eigenschaft nur in diesem Tag verändert wird in der das style-Attribut steht. Würde noch ein <p>-Tag folgen würde dieser Absatz die Standardschriftart haben.

Stylesheets zentral definieren
Es ist möglich Stylesheets im HTML-Code einzufügen. Hier der Code für die Datei home.html:

1. <html>
2.         <head>
3.                 <title> Layout mit CSS </title>
4.                 <style type="text/css">
6.                 </style>
7.         </head
8.         <body>
9.        
10.         </body>
11. </html>

Zwischen dem Start-Tag <style> und End-Tag </style> können wir den CSS-Code einfügen, für dieses Tutorial werden wir keinen CSS-Code einfügen. Die beiden Tags sollten zwischen dem <head>-Tag und </head> stehen. Das Attibut type (Typ) ist ein MIME-Type (für MIME-Type werde ich auch noch ein Tutorial schreiben)  und dafür müssen wir die CSS-Sprache angeben, damit wir CSS nutzen können, dies geht mit "text/css".

Stylesheets als externe Datei
Ich finde die beste Methode ist, eine externe Datei dafür anzulegen. Wir erstellen ein neues Verzeichnis mit dem Namen Style und erstellen uns im Verzeichnis Style die Datei default.css.

Jetzt müssen wir noch einen Link mit dem <link />-HTML-Tag in der Datei home.html erstellen. Hier der Beispielcode dazu:

1. <html>
2.         <head>
3.                 <title> Layout mit CSS </title>
4.                 <link rel="stylesheet" type="text/css" href="style/default.css" />
5.         </head
6.         <body>
7.        
8.         </body>
9. </html>

Das <link />-Tag ist dafür da einen Verweis auf eine andere Datei zu erstellen, damit der Inhalt der angegebenen Datei in der home.html verwendet werden kann. Dieses Tag muss zwischen dem <head>-Tag und </head>-Tag stehen. Das Attribut rel (relation = Bezug), hier geben wir "stylesheet" an. Für das Attribut type (Typ) geben wir für CSS "text/css" an und zum Schluss für das Attribut href (Hypertext Reference, das HTML-Tag href wird im Tutorial Links in HTML besprochen), geben wir das Verzeichnis oder Adresse unserer erstellten CSS-Datei default.css an.

Farben in HTML

Die Farben in HTML werden als Hexadezimalen Werten oder mit dem Farbnamen angegeben.

Die Hexadezimale Farbangabe
Am Anfang der Farbangabe muss das #-Zeichen stehen, danach folgt ein sechsstelliger hexadezimaler Wert (dieser besteht aus den Zahlen 0-9 und den Buchstaben A-F).

0 = dezimal 0
1 = dezimal 1
2 = dezimal 2
3 = dezimal 3
4 = dezimal 4
5 = dezimal 5
6 = dezimal 6
7 = dezimal 7
8 = dezimal 8
9 = dezimal 9
A = dezimal 10
B = dezimal 11
C = dezimal 12
D = dezimal 13
E = dezimal 14
F = dezimal 15

Die Farbe setzt sich aus den RGB-Farbwerten (rot, grün, blau) zusammen. Für jeden Farbwert stehen zwei Stellen zum definieren der Farben zur Verfügung, somit ergeben sich 16*16 = 256 Farbeinstellungen für jede Farbe.

Die Farbangabe mit VGA-Farbnamen 
Die VGA-Farbpalette besteht aus 16 Farben: black, gray, maroon, red, green, lime, olive, yellow, navy, blue, purple, fuchsia, teal, aqua, silver und white.
Ff

Grafiken in HTML

Um eine Grafik einzubinden gibt es das Standalone-Tag <img> (img = Image = Bild) dieses Tag besitzt kein Start- und End-Tag. Hier der Beispielcode dazu:

1. <html>
2.         <head>
3.                 <title> Grafiken in HTML </title>
4.         </head
5.         <body>
6.                 <img src="Bild.jpg">
7.         </body>
8. </html>

Den Attribut src (source = Quelle) übergeben wir die Adresse oder das Verzeichnis. Hier im Beispiel ist es das Verzeichnis. Es ist auch möglich mit ../ in ein vorheriges Verzeichnis auf eine Grafik zuzugreifen oder z.B. mit "Bilder/Bild.jpg" in ein Unterverzeichnis auf eine Grafik zuzugreifen. Es ist natürlich auch möglich das komplette Verzeichnis anzugeben. Wenn sich aber unser Projektverzeichnis änder, müssen wir die Verzeichnisse der Grafiken ändern, deren kompletten Pfade angegeben wurden, deshalb sollte man es vermeiden komplette Verzeichnisse anzugeben. Die Grafiken sollten das Format GIF, JPG oder PNG haben.

Hier das Bild im Browser:

Nach der Adressangabe oder Verzeichnisangabe sollte noch das Attribut alt (alternativ) hinzugefügt werden. Wenn die Grafik nicht angezeigt werden kann, aus welchen Grund auch immer, wird der Text vom Attribut alt angezeigt, hier kann z.B. eine Beschreibung der Grafik angegeben werden. Wenn die Grafik nur dekorativ ist, sollte alt="" angeben werden.

1. <html>
2.         <head>
3.                 <title> Grafiken in HTML </title>
4.         </head
5.         <body>
6.                 <img src="Bild.jpg" alt="Grafik">
7.         </body>
8. </html>

Der Alternativtext sollte also immer angegeben werden. Hier ein Beispiel wenn der Browser die Grafik nicht anzeigen kann:

Wie man sehen kann, wird der Alternativtext im Browser ausgegeben.

Die Größe der Grafiken verändern
Wir können natürlich auch die Größe der Grafik mit den Attributen width (Breite) und height (Höhe) verändern. Wir können die Größe in Pixel angeben. Hier ein Beispiel:

1. <html>
2.         <head>
3.                 <title> Grafiken in HTML </title>
4.         </head
5.         <body>
6.                 <img src="Bild.jpg" width="450" height="310" alt="Grafik">
7.         </body>
8. </html>

Die Grafik wird in der angegebenen Größe dargestellt, auch wenn das Browserfenster kleiner sein sollte.

Wer die Seitenverhältnisse beibehalten möchte, kann auch nur eine Größe angeben dadurch wird die zweite Größe automatisch berechnet um das Seitenverhältnis beizubehalten. Hier ein Beispiel:

1. <html>
2.         <head>
3.                 <title> Grafiken in HTML </title>
4.         </head
5.         <body>
6.                 <img src="Bild.jpg" width="200" alt="Grafik">
7.         </body>
8. </html>

Es ist natürlich uns überlassen welche Größe wir angeben wollen. Wir könnten anstatt der Breite width auch nur die Höhe mit height angeben.

Es ist auch möglich die Größe anzugeben, die die Grafik im Browserfenster belegen soll, dafür geben wir den Prozentsatz an, dessen Fläche im Fenster die Grafik belegen soll. Wenn wir die Größe als Prozent angeben wollen müssen wir nur nach der Zahl ein %-Zeichen anhängen.

1. <html>
2.         <head>
3.                 <title> Grafiken in HTML </title>
4.         </head
5.         <body>
6.                 <img src="Bild.jpg" width="100%" height="100%" alt="Grafik">
7.         </body>
8. </html>

Hier im Beispiel wird die Grafik vergrößert oder verkleinert damit sie das ganze Browserfenster ausfüllt. Dabei werden die Seitenverhältnisse nicht eingehalten.

Wenn wir nur Breite oder nur Höhe angeben, wird das Seitenverhältnis beibehalten. Hier ein Beispiel:

1. <html>
2.         <head>
3.                 <title> Grafiken in HTML </title>
4.         </head
5.         <body>
6.                 <img src="Bild.jpg" height="50%" alt="Grafik">
7.         </body>
8. </html>

In diesen Beispiel nimmt die Grafik 50% der Fensterhöhe ein die Seitenverhältnisse werden dabei eingehalten, auch wenn die Breite des Fensters kleiner ist als die Breite der Grafik.

Rahmen für Grafiken erstellen
Mit dem Attribut border (Rahmen) kann ganz einfach ein Rahmen gezeichnet werden. Es muss border nur die Dicke des Rahmens in Pixel übergeben werden.

1. <html>
2.         <head>
3.                 <title> Grafiken in HTML </title>
4.         </head
5.         <body>
6.                 <img src="Bild.jpg" height="50%" border="3" alt="Grafik">
7.         </body>
8. </html>