ROG Innovation Logo

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

HTML Style Angaben / CSS Stylesheet

Für die Formatierung von HTML Objekten gibt es verschiedene Möglichkeiten.

Style Angaben direkt auf dem Objekt

Zum einen die direkte Style Angabe auf dem HTML Objekt.

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

Style Angaben im HTML Header zusammenfassen

Zum anderen können die Style Angaben im Header Bereich des HTML-Dokuments zusammengefasst angegeben werden.

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

Und als dritte Möglichkeit können die Style-Angaben in eine externe CSS-Datei (Stylesheet) ausgelagert und im HTML-Dokument eingebunden 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 gelden werden müssen.

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