CSS 知識總結（一）-html教學-PHP中文網

一.認識CSS

　1.什麼是CSS？

　　CSS (Cascading Style Sheet) 層疊樣式表

　　是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。

　　由於CSS屬性或規則尚未成為W3C標準的一部分，是瀏覽器的私有屬性，因此不同的瀏覽器可能需要不同的前綴。

前綴	瀏覽器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

　2.CSS能做什麼？

　　使用CSS可以有效地對頁面進行佈局。

　　使用CSS樣式可以對頁面字體、顏色、背景和其他效果實現精確描述，同時對它們的修改和控制變得更加快捷。

　　CSS可以將網站上所有的網頁風格都使用一個CSS檔案來控制，只要修改這個CSS檔案中對應的程式碼，那麼整個網站的所有頁面都會隨之變動。

　　CSS可以支援多種設備，如手機、PDA、印表機、電視機、遊戲機等。

　　*目的：將表現與結構分離，以便於後期維護。

　3.CSS語法結構

　　CSS 語法由三部分構成:選擇符(selector)、屬性(property)和值(value)

　　　　selector {property:value;}

　　屬性是你想要設定的樣式屬性，每個屬性都有一個值，屬性和值用冒號 ":" 分開

　　每個選擇符可以有多個屬性值，之間用分號 ";" 隔開

　　例如：

<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.如何引入CSS？

　　將CSS應用到網頁中有：3種方式（行內樣式表、內部樣式表、外部樣式表）

　　a.行內樣式表（位於html元素內部）

　　　行內樣式是指將CSS樣式編碼直接寫在HTML標籤中的style屬性裡，

　　　*注意：行內樣式不需要寫入選擇器。

　　　例如：

<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.內部樣式表（位於標籤內部）

　　　內部樣式作為頁面中的一個單獨部分，由

　　　例如：

<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.外部樣式表

　　　外部樣式表是將CSS樣式程式碼單獨放在一個外部檔案".css"中，再由網頁檔案".html"呼叫。

　　　*盡量使用外部樣式表這種方式，目的是讓我們的html結構與表現形式分開

<span style="color: #000000;">/* "style.css"代码 */
body{
    background-color:#cccccc;
}

</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;"> type</span><span style="color: #0000ff;">="text/css"</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>

登入後複製

　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的位置，以便顺利快速开发网页。