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:
- <html>
- <head>
- <title> Layout mit CSS </title>
- </head
- <body>
- </body>
- </html>
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:
- <html>
- <head>
- <title> Layout mit CSS </title>
- </head
- <body>
- <p style="color:red;">Beispieltext für den Textabsatz.</p>
- </body>
- </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:
- <html>
- <head>
- <title> Layout mit CSS </title>
- <style type="text/css">
- </style>
- </head
- <body>
- </body>
- </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:
- <html>
- <head>
- <title> Layout mit CSS </title>
- <link rel="stylesheet" type="text/css" href="style/default.css" />
- </head
- <body>
- </body>
- </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.
Keine Kommentare:
Kommentar veröffentlichen