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