ROG Innovation Logo

Tutorials, Gadgets und vieles mehr - Idea. Creation. Success. - Let's create the future!

HTML Style Angaben / CSS Stylesheet

Stylesheet

Für die Formatierung von HTML Objekten gibt es verschiedene Möglichkeiten.
Das Einbinden der sogenannten CSS-Angaben bringt für jede dieser Variante Vor- & Nachteile mit sich.

Style Angaben direkt auf dem Objekt

Mit der direkte Style-Angabe auf den einzelnen HTML Objekt muss für jedes einzelne Element alles separat angegeben werden, was bei grösseren HTML-Seiten einen enormen Aufwand bedeutet und bei einer Änderung muss mühsam jedes einzelne dieser Elemente überarbeitet werden.
Eignet sich für sehr kleine HTML-Seiten mit wenig Objekten und geringer Änderungstendenz.

Beispiel
<h1 style="text-align: center; text-decoration: underline;">
  Format direkt festlegen
</h1>

Style Angaben im HTML Header zusammenfassen

Mit der zusammengefassten Style-Angaben (CSS) im Header Bereich des HTML-Dokuments wird der Style der einzelnen Objekte einmalig im HTML-Dokumentkopf definiert.
Bei einer Änderung im HTML-Dokument muss somit nicht bei jedem Element der Style angepasst werden, sondern nur einmalig im HTLM Header.
Eignet sich für grössere einzelne HTML-Seiten.

Beispiel
<!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Stylesheet in einem style-Element definieren</title>
   <style>
     h1 { color: green; }
   </style>
  </head>
 <body>
    <h1>CSS Style Angaben zusammengefasst im Header der HTML Datei angeben.</h1>
 </body>
</html>

Stylesheets in HTML einbinden

Mit der Style-Angaben in eine externe CSS-Datei (Stylesheet) und im HTML-Dokument eingebunden muss die Style-Angabe lediglich einmal für alle HTML-Seiten einer Website definiert werden.
Der grosse Vorteil von dieser Variant ist, dass bei einer Anpassung der Style Angaben die Änderung nur an einem Ort (CSS Stylesheet) gemacht werde müssen und nicht in jedem HTML-Dokument separat!
Zudem bringt es den Vorteil, dass die Style Angaben vom Browser nur einmal für alle Dokumente geladen werden müssen.
Das CSS Stylesheet kann über einen herkömmlichen Text-Editor erstellt werden. Die Textdatei muss mit der Endung ".css" abgespeichert werden.
Eignet sich für Websiten mit mehreren HTML-Seiten.

Beispiel
<!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Stylesheet in einem style-Element definieren</title>
    <link rel="stylesheet" href="https://meinewebsite.com/stylesheet.css">
  </head>
 <body>
    <h1>CSS Style Angaben zusammengefasst im Header der HTML Datei angeben.</h1>
 </body>
</html>


Hinweis
Es sollten nicht zu viele kleine externe CSS-Dateien erstellt werden, da jede Ressource die über den Browser geladen werden muss die Ladezeit der Webseite verlängert.

Stylesheets in XML einbinden

Beispiel
<?xml version="1.0" encoding="utf-8" ?>
  <?xml-stylesheet type="text/css" href="stylesheet.css" ?>
  <beispiel>
  <text>Dies ist ein beispielhaftes XML-Dokument mit eingebundenem Stylesheet.</text>
</beispiel>




Kommentare
Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.


*Name:


*Kommentar:

(max. 500 Zeichen)

Terms:


*Pflichtfeld

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche
DoubleTwist
doubletwist iTunes mit Android Handy synchronisieren
Free YouTube Video Music
Youtube gratis Musik für Youtube Videos
Anzeige
Spenden
ROG Innovation unterstützen