HTML - Stylesheet

Cascading Style Sheets (CSS) beschreiben, wie Dokumente auf Bildschirmen, in gedruckter Form oder möglicherweise ausgesprochen werden. W3C hat seit der Gründung des Konsortiums im Jahr 1994 die Verwendung von Stylesheets im Internet aktiv gefördert.

Cascading Style Sheets (CSS) bieten einfache und effektive Alternativen, um verschiedene Attribute für die HTML-Tags anzugeben. Mit CSS können Sie eine Reihe von Stileigenschaften für ein bestimmtes HTML-Element angeben. Jede Eigenschaft hat einen Namen und einen Wert, die durch einen Doppelpunkt (:) getrennt sind. Jede Eigenschaftsdeklaration wird durch ein Semikolon (;) getrennt.

Beispiel

Betrachten wir zunächst ein Beispiel für ein HTML-Dokument, bei dem das <font> -Tag und die zugehörigen Attribute verwendet werden, um die Textfarbe und die Schriftgröße anzugeben.

Note- Das Font- Tag ist veraltet und soll in einer zukünftigen HTML-Version entfernt werden. Sie sollten daher nicht verwendet werden. Es wird empfohlen, CSS-Stile zu verwenden, um Ihre Schriftarten zu bearbeiten. Dieses Kapitel wird jedoch noch zu Lernzwecken anhand eines Beispiels unter Verwendung des Font-Tags verwendet.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Wir können das obige Beispiel mit Hilfe des Stylesheets wie folgt umschreiben:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Dies führt zu folgendem Ergebnis:

Sie können CSS in Ihrem HTML-Dokument auf drei Arten verwenden:

External Style Sheet - Definieren Sie Stylesheet-Regeln in einer separaten CSS-Datei und fügen Sie diese Datei mithilfe des HTML-Tags <link> in Ihr HTML-Dokument ein.
Internal Style Sheet - Definieren Sie Stylesheet-Regeln im Kopfbereich des HTML-Dokuments mit dem Tag <style>.
Inline Style Sheet - Definieren Sie Stylesheet-Regeln direkt zusammen mit den HTML-Elementen mit style Attribut.

Lassen Sie uns alle drei Fälle nacheinander anhand geeigneter Beispiele betrachten.

Externes Stylesheet

Wenn Sie Ihr Stylesheet für verschiedene Seiten verwenden müssen, wird immer empfohlen, ein gemeinsames Stylesheet in einer separaten Datei zu definieren. Eine kaskadierende Stylesheet-Datei hat die Erweiterung als.css und es wird mit dem <link> -Tag in HTML-Dateien aufgenommen.

Beispiel

Stellen Sie sich vor, wir definieren eine Stylesheet-Datei style.css welches folgende Regeln hat -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Hier haben wir drei CSS-Regeln definiert, die auf drei verschiedene Klassen anwendbar sind, die für die HTML-Tags definiert sind. Ich schlage vor, Sie sollten sich nicht darum kümmern, wie diese Regeln definiert werden, da Sie sie während des CSS-Studiums lernen werden. Verwenden wir nun die obige externe CSS-Datei in unserem folgenden HTML-Dokument -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Dies führt zu folgendem Ergebnis:

Internes Stylesheet

Wenn Sie Stylesheet-Regeln nur auf ein einzelnes Dokument anwenden möchten, können Sie diese Regeln mithilfe des <style> -Tags in den Kopfbereich des HTML-Dokuments aufnehmen.

Im internen Stylesheet definierte Regeln überschreiben die in einer externen CSS-Datei definierten Regeln.

Beispiel

Lassen Sie uns das obige Beispiel noch einmal neu schreiben, aber hier werden wir Stylesheet-Regeln in dasselbe HTML-Dokument mit dem <style> -Tag schreiben -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Inline-Stylesheet

Sie können Stylesheet-Regeln mit direkt auf jedes HTML-Element anwenden styleAttribut des relevanten Tags. Dies sollte nur erfolgen, wenn Sie daran interessiert sind, eine bestimmte Änderung nur an einem HTML-Element vorzunehmen.

Inline mit dem Element definierte Regeln überschreiben die in einer externen CSS-Datei definierten Regeln sowie die im <style> -Element definierten Regeln.

Beispiel

Lassen Sie uns das obige Beispiel noch einmal neu schreiben, aber hier werden wir Stylesheet-Regeln zusammen mit den verwendeten HTML-Elementen schreiben style Attribut dieser Elemente.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Dies führt zu folgendem Ergebnis: