HTML Style Sheet

Cascading Style Sheets (CSS) zu beschreiben, wie Dokumente sind auf Bildschirmen präsentiert, im Druck, oder vielleicht, wie sie ausgesprochen werden. W3C hat aktiv die Verwendung von Stylesheets im Web gefördert, da das Konsortium wurde im Jahr 1994 gegründet.

Cascading Style Sheets (CSS) bieten eine einfache und effektive Alternativen zu angeben verschiedenen Attribute für die HTML-Tags. Mit CSS können Sie eine Reihe von Stileigenschaften für einen bestimmten HTML-Element angeben. Jede Eigenschaft hat einen Namen und einen Wert von einem Doppelpunkt (:) getrennt. Jede Eigenschaft Anmeldung von einer Semikolon (;) getrennt.

Beispiel

lassen Zunächst betrachten ein Beispiel für HTML-Dokument, das den Einsatz von macht <font> -Tag und assoziiert Attribute, zu angeben die Textfarbe und Schriftgröße:

<!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 neu schreiben obigen Beispiel mit Hilfe von Style Sheet wie folgt:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style="color:green;font-size:24px;">Hello, World!</p>
</body>
</html>

Dies wird produzieren folgendes Ergebnis:

Hello, World!

Sie können Verwendung CSS in drei Arten in Ihren HTML-Dokument:

  • Externe Style Sheet -- Definieren Stylesheet-Regeln in einer separaten CSS-Datei und umfasst Sie dann die Datei in ihre das HTML-Dokument unter Verwendung HTML <link> tag.

  • Interne Style Sheet -- Definieren Stylesheet-Regeln in Header-Bereich des HTML-Dokuments unter Verwendung <style> tag.

  • Inline Style Sheet --. definieren Stylesheet-Regeln direkt entlang-mit den HTML-Elemente unter Verwendung style attribute.

Mal sehen, alle drei Fälle einer nach dem anderen mit Hilfe geeigneter Beispiele.

Externe Style Sheet

Wenn Sie müssen zu verwenden Ihr Stylesheet zu verschiedenen Seiten, dann ist es immer empfehlenswert, einen gemeinsamen Stil Blatt in einer separaten Datei definieren. Ein Cascading Stylesheet-Datei wird haben Erweiterung als .css und es wird sein umfasst in HTML-Dateien unter Verwendung <link> tag.

Beispiel

Betrachten wir definieren eine Stylesheet-Datei style.css die folgenden Regeln hat:

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

Hier haben wir definiert drei CSS-Regeln, die für drei verschiedene Klassen für die HTML-Tags definiert sein wird. Ich schlage vor, Sie sollten nicht darüber, wie diese Regeln werden definiert, weil Sie ihnen zu lernen während des Studiums CSS stören. Nun wollen wir nutzen die oben externen 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 wird produzieren folgendes Ergebnis:

This is red

This is thick

This is green

This is thick and green

Interne Style Sheet

Wenn Sie wollen zu Stylesheet-Regeln zu einem einzigen Dokument gelten nur dann Sie kann umfasst diese Regeln in Header-Bereich des HTML-Dokuments unter Verwendung <style> tag.

Regeln definiert im internen Stylesheet, überschreibt die Regeln in einer externen CSS-Datei definiert.

Beispiel

Lassen Sie uns neu zu schreiben obigen Beispiel noch einmal, aber hier werden wir wird schreiben Stylesheet-Regeln in der gleichen HTML-Dokument unter Verwendung <style> tag:

<!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 wird produzieren folgendes Ergebnis:

This is red

This is thick

This is green

This is thick and green

Inline Style Sheet

Sie können anwenden Stylesheet-Regeln direkt zu jeder HTML-Element unter Verwendung Stil -Attribut des relevant Tag . Dies sollte nur erfolgen, wenn Sie Interesse haben, eine bestimmte Änderung in jedem HTML-Element zu machen sind nur.

Regeln definiert inline mit dem Element überschreibt die Regeln in einer externen CSS-Datei sowie den Regeln definiert in<Stil > element.

Beispiel

Lassen Sie uns neu zu schreiben obigen Beispiel wieder, aber hier werden wir wird schreiben Stylesheet-Regeln zusammen mit den HTML-Elemente unter VerwendungStil Attribut dieser Elemente zu schreiben. .

<!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 wird produzieren folgendes Ergebnis:

This is red

This is thick

This is green

This is thick and green

Advertisements