Latest web development tutorials

erstellen Sie CSS

Wenn ein Stylesheet zu lesen, wird der Browser auf dem formatierten HTML-Dokument basieren.


Wie das Stylesheet einfügen

Legen Sie das Stylesheet auf drei Arten:

  • Externe Stylesheet
  • Interne Stylesheet
  • Inline-Stil

Externe Stylesheet

Wenn der Stil in vielen Seiten angewendet wird, erforderlich, ein externes Stylesheet würde die ideale Wahl sein. Im Fall von einem externen Stylesheet können Sie eine Datei ändern das Aussehen der gesamten Website zu ändern. Jede Seite verwendet das <link> -Tag zu einem Stylesheet zu verknüpfen. <Link> -Tag im (Dokument) Leiter:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Der Browser wird aus der Datei mystyle.css Stil Erklärung gemäß lesen Sie das Dokument zu formatieren.

Externe Stylesheet kann in einem beliebigen Texteditor bearbeitet werden. Dateien können keine HTML-Tags enthalten. Stylesheet sollte mit der Erweiterung .css gespeichert werden. Hier ist ein Beispiel für ein Stylesheet-Datei:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}

Bemerkung Lassen Sie keine Leerzeichen zwischen dem Eigenschaftswert und Einheiten. statt: Wenn Sie die "20 px margin-left" Verwendung "margin-left: 20px", ist es nur gültig in IE 6, aber es funktioniert nicht in Mozilla / Firefox oder Netscape in.


Interne Stylesheet

Wenn ein einzelnes Dokument einen besonderen Stil erfordert, sollten interne Stylesheet verwendet werden. Sie können die <style> -Tag im Kopf des Dokuments verwenden, um interne Stylesheet definieren, wie folgt aus:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>


Inline-Stil

Aufgrund der Leistungsfähigkeit und Inhalte miteinander vermischt werden Inline-Styles viele der Vorteile von Stylesheets verlieren. Bitte Vorsicht Dieses Verfahren, zum Beispiel, wenn der Stil auf ein Element nur einmal angewendet werden muss.

Um Inline-Stile zu verwenden, müssen Sie den Stil (Stil) Attribut in dem betreffenden Tag zu verwenden. Style-Attribut kann jede CSS-Eigenschaft enthalten. Dieses Beispiel zeigt, wie die Farbe des Absatzes zu ändern und am linken Rand:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>


Mehrere Arten

Wenn einige Attribute den gleichen Wähler in verschiedenen Stylesheets definiert sind, dann wird der Eigenschaftswert aus dem spezifischeren Stylesheet wird vererbt.

Zum Beispiel kann ein externes Stylesheet hat drei Eigenschaften für den h3 Selektor:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Der interne Stylesheet hat zwei Eigenschaften für den h3 Selektor:

h3
{
text-align:right;
font-size:20pt;
}

Wenn der Stil interne Stil hat Blätter und externen Stylesheets diese Seite verlinken zur gleichen Zeit, dann h3 get ist:

color:red;
text-align:right;
font-size:20pt;

Das ist die Farbe Eigenschaft wird von dem externen Stylesheet und die Textanordnung (Text-Ausrichtung) und Schriftgröße (font-size) durch die internen Stylesheet-Regeln ersetzt werden vererbt werden.


Mehrere Arten sind ein laminiert

Stylesheets erlauben Stilinformationen auf verschiedene Arten festgelegt. Styles können in einem einzigen HTML-Element angegeben werden, ist das erste Element der HTML-Seite oder in einer externen CSS-Datei. Auch mehrere Blätter externen Stil kann in einem einzigen HTML-Dokument referenziert werden.

Stapel bestellen

Wenn die gleiche HTML-Element um mehr als ein Stil definiert ist, wird es die Art verwenden?

In der Regel werden alle Stile in einem neuen virtuellen Stylesheet gestapelt werden nach den folgenden Regeln, wo Nummer 4 die höchste Priorität hat.

  1. Standardbrowser
  2. Externe Stylesheet
  3. Interne Stylesheet (im <head> -Tag innen)
  4. Inline-Stil (HTML-Elemente im Inneren)

Also, ein Inline-Stil (in einem HTML-Element) hat die höchste Priorität, was bedeutet, dass sie Vorrang vor dem folgenden Stil Erklärung nimmt: label Style-Statement, Blatt Artaussage externen Stil, oder Browser-Style-Statement (Standardwert).

BemerkungTipp: Wenn Sie eine externe Style - Datei im <head> verwenden , ist auch der Stil definiert, wird das Stylesheet die internen Stil externen Dateien ersetzen.