CSS

CSS (Cascading Style Sheets) 層疊樣式表或級聯樣式表，用於渲染HTML元素標籤的樣式，是一組格式設置規則，用於控制Web頁面的外觀

通過使用CSS，可將頁面的內容與表現形式分離：頁面內容存放在HTML文檔中，而用於定義表現形式的CSS規則存放在另一個文件中或HTML文檔的某一部分

CSS聲明

屬性:屬性值

font-size:12px;

如何使用CSS

CSS 可以通過以下方式添加到HTML中:

行內(嵌入or內聯)樣式：在HTML元素中使用style 屬性
內部樣式表：在HTML文檔頭部 head 區域使用style 元素來包含CSS
外部引用：使用外部 CSS 文件

最好的方式是通過外部引用CSS文件.

行內樣式

直接作用在HTML標籤中

<h1 style="text-align:center;">居中對齊的標題</h1>
<p style="font-family:arial;color:red;font-size:20px;">一個段落。</p>

使用 text-align（文字對齊）屬性指定文本的水平與垂直對齊方式：使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:

內部樣式表

style標籤應該在head標籤內部.

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部樣式表

鏈接（LINK ）外部樣式表
導入（@import）外部樣式表

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

<style type="text/css">@import url(http://www.baidu.com/style.css);</style>
</head>

外部引用`link`與`@import`區別

link屬於XHTML標籤，而@import完全是CSS提供的一種方式。

link標籤除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。

加載順序的差別

當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯

兼容性的差別

@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題

使用dom控制樣式時的差別

當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因爲@import不是dom可以控制的。

@import可以在css中再次引入其他樣式表

main.css
———————-
@import “sub1.css”;
@import “sub2.css”;

sub1.css
———————-
p {color:red};

sub2.css
———————-
.myclass {color:blue}

這樣寫法，會對網站服務器產生過多的HTPP請求。以前是一個文件，而現在卻是兩個或更多文件了，服務器的壓力增大，瀏覽量大的網站還是謹慎使用

選擇器

CSS選擇器分爲

標籤選擇器（元素選擇器）：以HTML標籤的名字作爲樣式應用依據
類選擇器：以標籤的CLASS屬性值作爲依據
ID選擇器：以標籤的ID屬性值作爲依據

選擇器取名規則：CSS選擇符可以使用英文字母的大寫與小寫,數字,連字號,下劃線,冒號,句號.

英文字母大寫與小寫 A-Z a-z
數字 0-9
連字號 -
下劃線 _
冒號 :
句號 .

CSS選擇符只能以字母開頭.

標籤選擇器

P { color:red; font-family:"隸書"; font-size:24px;}

選擇器：p{}

多個樣式用分號隔開

類選擇器

<style type="text/css">
  .red{ color:red; font-family:"隸書"; font-size:24px;}
</style>

使用標籤的CLASS屬性應用樣式，如：

<H2 CLASS=“red”>……</H2>

ID選擇器

爲某一特定標籤設置樣式,使用ID選擇器

<style type="text/css">
  #red{ color:red; font-family:"隸書"; font-size:24px;}
</style>

使用標籤的ID屬性應用樣式，如

<h2 id="red" ></h2>

選擇器優先級

如果對同一元素使用了三種選擇器

<style type="text/css">
  h2{color:green;}
  .blue{color:blue;}
  #red { color:red; }
</style>

代碼出現何種結果

<h2 id="red" class="blue"></h2>

行內樣式>ID選擇器>類選擇器>標籤選擇器

特殊選擇器

全局選擇符匹配文檔中的任意一個元素（可以星號省略），如：{color:#000}
複合：標籤選擇器可以和ID選擇器、類選擇器複合，如：P.aa{……}//CLASS爲aa的P標記
組合：如果若干個選擇器具有相同樣式，則可以組合使用，如下：a, #dd, .ss{……}
嵌套：在某個選擇器內再設置選擇器，如：#di p a{……}//在ID爲“di”的元素內的P標記裏的a標記

常用屬性

background-color定義背景顏色
background-image定義背景圖片
background-repeat定義背景圖片的重複方式
background-position定義背景圖片的位置
background-attachment定義背景圖片隨滾動軸的移動方式
letter-spacing屬性控制字母之間的距離
word-spacing屬性控制文字間空格的距離
text-decoration屬性定義文本是否有下劃線
text-transform屬性控制英文的大小寫
text-align屬性定義文本的對齊方式
text-indent屬性定義文本首行的縮進
white-space屬性定義文本與文檔源代碼的關係
font-family定義使用什麼字體
font-size定義字體大小
font-style定義斜體字
font-variant定義小型的大寫字體
font-weight定義字體的粗細
list-style-type屬性定義列表的樣式
list-style-image屬性定義列表樣式的圖片
list-style-position屬性定義列表樣式的位置
list-style屬性統一定義列表樣式的幾個屬性
border-width屬性定義邊框的寬度
border-color屬性定義邊框的顏色
border-style屬性定義邊框的樣式
border屬性統一定義邊框樣式的幾個屬性

注：建議動手做示例練習

鼠標效果

cursor -- 定義鼠標樣式

[ ,]*: 根據用戶定義的資源顯示
auto: 正常鼠標
crosshair: 十字鼠標
default: 默認鼠標
pointer: 點狀鼠標
move: 移動鼠標
e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改變大小鼠標
text: 文字鼠標
wait: 等待鼠標
help: 求助鼠標
progress: 過程鼠標
inherit: 繼承

注：建議動手做示例練習

邊距屬性

padding margin都是邊距的含義，關鍵問題得明白是什麼相對什麼的邊距．padding是控件的內容相對控件的邊緣的邊距．margin是控件邊緣相對父空間的邊距．

padding屬性

padding：10px; 四邊統一內邊距
padding:10px 20px; 上下、左右內邊距
padding:10px 20px 30px; 上、左右、下內邊距
padding:10px 20px 30px 40px; 上、右、下、左內邊距

可能取的值

length 規定具體單位記的內邊距長度
% 基於父元素的寬度的內邊距的長度
auto 瀏覽器計算內邊距
inherit 規定應該從父元素繼承內邊距

瀏覽器兼容問題

所有瀏覽器都支持padding屬性
任何版本IE都不支持屬性值“inherit”

margin屬性

margin:10px; 四邊統一外邊距
margin:10px 20px; 上下、左右外邊距
margin:10px 20px 30px; 上、左右、下外邊距
margin:10px 20px 30px 40px; 上、右、下、左外邊距

常用網頁頂格設置：margin:0;

可能取的值

length 規定具體單位記的外邊距長度
% 基於父元素的寬度的外邊距的長度
auto 瀏覽器計算外邊距
inherit 規定應該從父元素繼承外邊距

瀏覽器兼容問題

所有瀏覽器都支持margin屬性
任何版本IE都不支持屬性值“inherit”

區別

margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。
padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離。

僞類

CSS僞類是CSS選擇符的一部分
僞類名稱的大小寫敏感敏感性依賴於文檔的語言，在HTML文檔中大小寫不敏感，在xml文檔中大小寫敏感
僞類的英文爲Pseudo-Classes

僞類可以用於文檔狀態的改變、動態的事件等，例如用戶的鼠標點擊某個元素、未被訪問的鏈接

當用戶鼠標移動到某個HTML元素上
離開HTML元素
點擊HTML元素

常用僞類

:link

適用於未被用戶訪問過的鏈接，語法如下：

:link
a:link
a.class:link

示例

a:link
{
  color: red;
}

a.fontColor:link
{
  color:red;
}
/* --------匹配class屬性值爲fontColor的鏈接樣式---------- */

:visited

適用於已被用戶訪問過的鏈接。語法示例同上(:link)

:hover

適用於光標（鼠標指針）指向一個元素，但此元素未被激活時。語法示例同上(:link)

:active

適用於一個元素被激活時的樣式，例如鼠標在此元素的區域內按下但還沒有釋放時。語法示例同上(:link)

:focus

適用於已獲取焦點的元素的樣式，例如：表單的input輸入框可以輸入文字時、接受鍵盤事件時。語法示例同上(:link)

:first-child

匹配其它元素的第一個子元素，例如：一個div中包括多個p元素，匹配第一個p元素可使用:first-child僞類。語法如下：

:first-child
E:first-child
E1>E2:first-child

示例

<p>
    <code>可以匹配樣式</code>
    <code>普通正常顯示</code>
</p>

<code>不可以匹配樣式</code>
<p>
    <h2>不可以匹配樣式</h2>
    <code>不可以匹配樣式</code>
    <code>普通正常顯示</code>
</p>

<style type="text/css">
  p > code:first-child
  {
    color:lime;
    background:red;
  }

</style>

僞元素（僞對象）

CSS僞元素是CSS選擇符的一部分
僞元素名稱的大小寫敏感敏感性依賴於文檔的語言，在HTML文檔中大小寫不敏感，在xml文檔中大小寫敏感
僞元素的英文爲Pseudo-Elements，由於僞元素表示的不是真正的元素，因此稱爲僞

常用的僞對象

::first-line定義段落的第一行
::first-letter定義段落的第一個字符
::before在元素的開始動態的插入內容
::after在元素的結尾動態的插入內容
::selection改變用戶鼠標選擇的內容的樣式

示例

/* -------- ::first-line僞元素可以和塊類元素（div、p）連用---------- */
p::first-line
{
  background:red;
  color:white;
}
/* -------- 首字母大寫特效----------- */
p::first-letter
{
  font-size: 4em;
  font-weight: bold;
  border: 1px solid lightblue;
  margin-right: 8px;
}
/* -------- 用戶鼠標已選擇內容的樣式--IE6、7、8 不支持--------- */
::selection
{
  color:lightblue;
  background:pink;
}

CSS註釋

CSS註釋的開始使用/*,結束使用*/

/* ----------文字樣式開始---------- */
/* 夢之都白色12象素文字 */
.dreamduwhite12px
{
  color:white;
  font-size:12px;
}

/* 夢之都黑色16象素文字 */
.dreamdublack16px
{
  color:black;
  font-size:16px;
}
/* ----------文字樣式結束---------- */

CSS 參考手冊

詹姆斯001

發佈了32 篇原創文章 · 獲贊 9 · 訪問量 1萬+

私信關注

CSS知識點

CSS

CSS聲明

如何使用CSS

行內樣式

內部樣式表

外部樣式表

外部引用link與@import區別

選擇器

標籤選擇器

類選擇器

ID選擇器

選擇器優先級

特殊選擇器

常用屬性

鼠標效果

邊距屬性

padding屬性

可能取的值

瀏覽器兼容問題

margin屬性

可能取的值

瀏覽器兼容問題

區別

僞類

常用僞類

僞元素（僞對象）

常用的僞對象

CSS註釋

外部引用`link`與`@import`區別