CSS (1): CSS verstehen

1. Was ist CSS

CSS Cascading Style Sheets (englischer vollständiger Name: Cascading Style Sheets) ist eine Computersprache, die zum Ausdrücken von Dateistilen wie HTML oder XML verwendet wird. CSS3 ist eine aktualisierte Version von CSS2 und 3 ist nur die Versionsnummer. Sie fügt viele leistungsstarke neue Funktionen hinzu, die auf CSS2.1 basieren. Derzeit unterstützen die Mainstream-Browser Chrome, Safari, Firefox, Opera und sogar 360 bereits die meisten Funktionen von IE10 und werden auch CSS3 vollständig unterstützen. Verschiedene Browser erfordern möglicherweise unterschiedliche Präfixe. Dies bedeutet, dass die CSS-Eigenschaft oder -Regel noch nicht Teil des W3C-Standards ist und eine private Eigenschaft des Browsers ist. Obwohl neuere Versionen von Browsern derzeit keine Präfixe erfordern, sind Präfixe für eine bessere Vorwärtskompatibilität dennoch unverzichtbar.

<span style="color: #800000;">-moz-transform:translateX(20px);
-webkit-transform:translateX(20px);
-ms-transform:translateX(20px);
transform:translateX(20px);</span>

Transformation ist ein neues Attribut von CSS3 und jeder Browser muss ein Präfix hinzufügen, um es zu unterstützen.

2. Was CSS kann

• Stile definieren, wie HTML-Elemente angezeigt werden.
• CSS kann mit nur wenigen Codezeilen viele Effekte und sogar Animationseffekte erzielen, die bisher den Einsatz von Bildern und Skripten erforderten. Zum Beispiel abgerundete Ecken, Bildränder, Textschatten und Boxschatten, Übergänge, Animationen usw.
• CSS vereinfacht den Designprozess für Front-End-Entwickler und sorgt für ein flexibleres Seitenlayout und eine schnellere Seitenladegeschwindigkeit.
• Alle Webseitenstile auf der Website können mithilfe einer CSS-Datei gesteuert werden. Solange der entsprechende Code in der CSS-Datei geändert wird, ändern sich alle Seiten der gesamten Website entsprechend.
• Zweck: Leistung von Struktur trennen.

<span style="color: #008000;">/*</span><span style="color: #008000;"> style.css </span><span style="color: #008000;">*/</span><span style="color: #800000;">

body</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#ccc</span>;
}<span style="color: #800000;">
h1</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">"微软雅黑"</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">normal</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> index.html </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="./style.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>这是标题<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

3.CSS-Syntaxstruktur

CSS-Regeln bestehen aus zwei Hauptteilen: dem Selektor, der normalerweise das HTML-Element ist, dessen Stil Sie ändern möchten, und einer oder mehreren Deklarationen. Jede Deklaration besteht aus einer Eigenschaft und einem Wert. Eine Eigenschaft ist das Stilattribut, das Sie festlegen möchten. Jedes Attribut hat einen Wert. Eigenschaften und Werte werden durch Doppelpunkte getrennt.

<span style="color: #800000;">p</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择器 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">      
    color</span>:<span style="color: #0000ff;">red</span>;      <span style="color: #008000;">/*</span><span style="color: #008000;"> 属性:值; </span><span style="color: #008000;">*/</span>
}

4. Wie man CSS einführt

Es gibt drei Möglichkeiten, Stylesheets einzuführen:

• Externes Stylesheet
• Internes Stylesheet
• Inline-Stile

　4.1 Externes Stylesheet

Externe Stylesheets sind ideal, wenn Stile auf viele Seiten angewendet werden müssen. Mit externen Stylesheets können Sie das Aussehen Ihrer gesamten Website ändern, indem Sie eine Datei ändern. Jede Seite verlinkt mit dem -Tag auf das Stylesheet. -Tag im Kopf (des Dokuments):

<span style="color: #800000;"><head>
　　<link rel="stylesheet" type="text/css" href="style.css">
</head></span>

　4.2 Internes Stylesheet

Wenn ein einzelnes Dokument einen besonderen Stil erfordert, sollte ein internes Stylesheet verwendet werden. Interne Stylesheets können am Kopf des Dokuments mit dem Tag