一、 CSS全稱爲“層疊樣式表 (Cascading Style Sheets)”：
它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。
使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的文字有着統一的字體、字號或者顏色等。<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識CSS樣式</title>
<style type="text/css">
p{ /*標籤名字*/
font-size:20px;/*設置文字字號*/
color:red;/*設置文字顏色*/
font-weight:bold;/*設置字體加粗*/
}
</style>
</head>
<body>
<p>專注服務互聯網工程師快速成爲技術高手！</p>
</body>
</html>
二、添加註釋：
1. 在html中添加註釋： <!--註釋-->2. 在css中添加註釋： /*註釋*/
三、CSS 樣式代碼插入的形式來看基本可以分爲以下3種：內聯式、嵌入式和外部式三種：
1. 內聯式css樣式：直接寫在現有的HTML標籤中：
<p style="color:red;font-size:12px">這裏文字是紅色。</p>
2. 嵌入式樣式：嵌入式css樣式必須寫在<style></style>之間，並且一般情況下嵌入式css樣式寫在<head></head>之間：
<style type="text/css">
span{
color:red;
}
</style>
3. 外部式css樣式：把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”爲擴展名，在<head>內（不是在<style>標籤內）使用<link>標籤將css樣式文件鏈接到HTML文件內，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標籤位置一般寫在<head>標籤之內。
4. 三種方法的優先級：
內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下，內聯式 > 嵌入式/外部式。
嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面。
其實總結來說，就是--就近原則（離被設置元素越近優先級別越高）。
四、選擇器：
1. 每一條css樣式聲明（定義）由兩部分組成，形式如下：
選擇器{
樣式;
}
2. 標籤選擇器：
p{font-size:12px;line-height:1.6em;}
3. 類選擇器：
1、英文圓點開頭
2、其中類選器名稱可以任意起名（但不要起中文噢），使用方法：
第一步：使用合適的標籤把要修飾的內容標記起來，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"爲標籤設置一個類，如下：
<span class="stress">膽小如鼠</span>
第三步：設置類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個英文圓點*/
4. ID選擇器：
#setGreen{
color:green;
}
<span id="setGreen">id選擇器</span>
5. 類選擇器與ID選擇器的區別：
1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。我們可以爲一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<span class="stress bigsize">三年級</span>
6. 子選擇器：即大於符號(>),用於選擇指定標籤元素的第一代子元素。
.food>li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
</ul>
7. 包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：
.first span{color:red;}
總結：>作用於元素的第一代後代，空格作用於元素的所有後代。
8. 通用選擇器 : 是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面代碼使用html中任意標籤元素字體顏色全部設置爲紅色：
* {color:red;}
9. 關於僞選擇符：到目前爲止，可以兼容所有瀏鑑器的“僞類選擇符”就是 a 標籤上使用 :hover 了（其實僞類選擇符還有很多，尤其是 css3 中，但是因爲不能兼容所有瀏覽器，
本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標籤上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現在比較常用的還是 a:hover 的組合。
a:hover{color:red;}
10. 分組選擇符：當你想爲html中多個標籤元素設置同一個樣式時，可以使用分組選擇符","。
h1,span{color:red;}
<h1>標題</h1>
<span>強調樣式</span>
五、一些特性：
1. 繼承：CSS的某些樣式是具有繼承性的，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比如下面代碼：如某種顏色應用於p標籤，這個顏色設置不僅應用p標籤，還應用於p標籤中的所有子元素文本，這裏子元素爲span標籤。
p{color:red;}
<p>三年級時，我還是一個<span>膽小如鼠</span>小學生。</p>
注意有一些css樣式是不具有繼承性的。
2. 特殊性：多個樣式修飾同一個標籤的時候是由權值來決定的。
標籤的權值爲1，類選擇符的權值爲10，ID選擇符的權值最高爲100。例如下面的代碼：
p{color:red;} /*權值爲1*/
p span{color:green;} /*權值爲1+1=2*/
.warning{color:white;} /*權值爲10*/
p span.warning{color:purple;} /*權值爲1+1+10=12*/
#footer .note p{color:yellow;} /*權值爲100+10+1=111*/
注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解爲繼承的權值最低。
3. 層疊：在html文件中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。（就近原則）
4. 重要性：在做網頁代碼的時，有些特殊的情況需要爲某些樣式設置具有最高權值，怎麼辦？這時候我們可以使用!important來解決。
p{color:red!important;}
p{color:green;}
<p class="first">這裏是文本說明。</p>
