CSS-Wissenszusammenfassung (1)

1.CSS verstehen

　1. Was ist CSS?

CSS (Cascading Style Sheet) Cascading Style Sheet

ist eine Auszeichnungssprache, die zur Steuerung des Stils von Webseiten verwendet wird und die Trennung von Stilinformationen vom Webinhalt ermöglicht.

Da CSS-Eigenschaften oder -Regeln noch nicht Teil des W3C-Standards sind und private Browsereigenschaften sind, erfordern verschiedene Browser möglicherweise unterschiedliche Präfixe.

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

　2. Was kann CSS?

Verwenden Sie CSS, um die Seite effektiv zu gestalten.

　Durch die Verwendung von CSS-Stilen können Seitenschriftarten, Farben, Hintergründe und andere Effekte genau beschrieben werden, während ihre Änderung und Steuerung schneller erfolgt.

CSS kann alle Webseitenstile auf der Website mithilfe einer CSS-Datei steuern. Solange der entsprechende Code in der CSS-Datei geändert wird, ändern sich alle Seiten der gesamten Website entsprechend.

CSS kann eine Vielzahl von Geräten unterstützen, z. B. Mobiltelefone, PDAs, Drucker, Fernseher, Spielekonsolen usw.

*Zweck: Leistung von Struktur trennen, um spätere Wartung zu erleichtern.

　

　3.CSS-Syntaxstruktur

Die CSS-Syntax besteht aus drei Teilen: Selektor, Eigenschaft und Wert

　selector {property:value;}

　Attribute sind die Stilattribute, die Sie festlegen möchten. Die Attribute und Werte werden durch Doppelpunkte getrennt „“

Jeder Selektor kann mehrere Attributwerte haben, getrennt durch Semikolons „

;“

Zum Beispiel:

<span style="color: #800000;"><style type="text/css">
    body </span>{<span style="color: #ff0000;">background-color</span>:<span style="color: #0000ff;">#ccc</span>;}<span style="color: #800000;">
</style></span>

　4. Wie führt man CSS ein?

Es gibt drei Möglichkeiten, CSS auf Webseiten anzuwenden (

Inline-Stylesheet, internes Stylesheet, externes Stylesheet)

　

a. Inline-Stylesheet (befindet sich im HTML-Element)

　Inline-Stil bezieht sich auf das Schreiben der CSS-Stilkodierung direkt in das Stilattribut im HTML-Tag,

*Hinweis: Inline-Stile erfordern keinen Selektor.

Zum Beispiel:

<span style="color: #0000ff;"><</span><span style="color: #800000;">body </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="background-color:#ccc;"</span><span style="color: #0000ff;">></span>

　

b. Internes Stylesheet (befindet sich im -Tag)

Der interne Stil ist ein separater Teil der Seite, der innerhalb des -Tags positioniert wird.

Zum Beispiel:

<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;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

　

C. Externes Stylesheet

Das externe Stylesheet platziert den CSS-Stilcode separat in einer externen Datei „.css“ und ruft ihn dann aus der Webseitendatei „.html“ auf.

　

*Versuchen Sie, externe Stylesheets zu verwenden, um unsere HTML-Struktur und Präsentation zu trennen

 

 

　5.样式优先级

　　a.写法优先权（就近原则）

　　　行内样式表 > 内部样式表 > 外部样式表

　　b.选择符优先权

　　　选择符的比较（从低到高）:

　　　通配符"*"

　　　类型选择符"标签名为选择符名称的"

　　　子选择符">"

　　　包含选择符

　　　class选择符

　　　属性选择符

　　　id选择符

　　　行内样式

　　　!important[慎用]

 

　6.样式继承

　　HTML中的标签会继承部分父标签的样式。

　　比如 body { color:red;} ，那么body中的所有标签及标签下的所有子标签的文本都将变成红色。

 

　　*!important的用法

　　在两个相同类型的css样式定义中，优先执行后面一个

　　例如：

<span style="color: #800000;">p</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">15px</span>; <span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">20px</span>;}

　　这种情况下，执行"font-size:20px;" 。

　　但是可以通过!important语法,提升某一句样式表的重要性,使及优先执先 !important标注的语句

　　例如：

<span style="color: #800000;">p</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">15px!important</span>;<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;">20px</span>;}

 

　　这时，执行"font-size:15px" 。

 

　7.CSS代码注释（快捷键：Ctrl+/）

　　例如：

<span style="color: #008000;">/*</span><span style="color: #008000;"> 头部样式开始 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
#header</span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;">#ccc</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 头部样式结束 </span><span style="color: #008000;">*/</span>

 

　　CSS代码注释可以帮助我们对自己写的CSS样式进行说明，如说明某段CSS代码是什么地方、功能、样式等说明，以便我们以后维护具有一看即懂的方便性；

　　同时在团队开发的时候合理适当的注解有利于团队看懂css样式对应html的位置，以便顺利快速开发网页。