CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML内容在浏覽器内的顯示樣式，如文字大小、顔色、字型加粗等。
CSS文法：
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下，p是選擇符，大括号裡面是聲明，聲明由屬性和值組成，冒号分割，最後一行可以沒有分号（但一般會加上）
p{
font-size:12px;
color:red;
}
CSS樣式基礎知識：
1，内聯式：
<p style="color:red">這裡文字是紅色。</p>
2，嵌入式：嵌入式必須寫在<style>之間，<style>一般寫在head裡
<style type="text/css">
span{
color:red;
}
</style>
3，外聯式，也叫外部式：把css代碼寫一個單獨的外部檔案中，這個css樣式檔案以“.css”為擴充名（在css檔案中的寫法和在style裡面是一樣的），在<head>内（不是在<style>标簽内）使用<link>标簽将css樣式檔案連結到HTML檔案内；另外：1、css樣式檔案名稱以有意義的英文字母命名，如 main.css。2、rel="stylesheet" type="text/css" 是固定寫法不可修改。3、<link>标簽位置一般寫在<head>标簽之内。
<link href="base.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
三種CSS樣式的使用方法優先級為内聯式 > 嵌入式 > 外部式；即越近優先級越高。
CSS選擇器：
每一條css樣式聲明（定義）由兩部分組成，形式如下：
選擇器{
樣式;
} //選擇器确定樣式作用于哪些元素
1，标簽選擇器：html代碼中的标簽。如<html>、<body>、<h1>、<p>、<img>；
2，類選擇器：文法是：.類選器名稱{css樣式代碼;}要注意的是：1，英文名，前面加“.”，2，用“class”屬性為标簽添加類
.stress{color:red;}
<span class="stress">XXXX</span>
3，ID選擇器：類似于類選擇器，前面不是“.”而是“#”，另外标簽中加的是 id = “xx”;
<span id="setGreen">XXX</span>
//類選擇器和ID選擇器的差別是，ID選擇器隻能在HTML文檔中使用一次，類選擇器可以重複使用；
4，子選擇器：即大于符号(>),用于選擇指定标簽元素的第一代子元素；如下，隻有food類下，第一代子标簽且為li标簽的内容會加邊框
.food>li{border:1px solid red;}
5，包含選擇器：也叫後代選擇器，即加入空格,用于選擇指定标簽元素下的後輩元素。如：
.first span{color:red;}
//包含選擇器和子選擇器的差別：>作用于元素的第一代後代，空格作用于元素的所有後代。
6，通用選擇器：它使用一個（*）号指定，它的作用是比對html中所有标簽元素，如下使用下面代碼使用html中任意标簽元素字型顔色全部設定為紅色：
* {color:red;}
7，僞類選擇符：可以給标簽的某種狀态添加樣式，如下可以當滑鼠劃過a标簽的時候變為紅色。暫時隻有a标簽上hover可以相容所有浏覽器，其他的僞類選擇符不能全部相容
a:hover{color:red;}
8，分組選擇符：為html中多個标簽元素設定同一個樣式時，可以使用分組選擇符（，）
h1,span{color:red;}
CSS的繼承，層疊和特殊性
1，繼承：CSS的某些樣式是具有繼承性的，繼承是一種規則，它允許樣式不僅應用于某個特定html标簽元素，而且應用于其後代。比如下面代碼：如某種顔色應用于p标簽，這個顔色設定不僅應用p标簽，還應用于p标簽中的所有子元素文本，這裡子元素為span标簽。但是border就隻能應用于p标簽，不會應用于其子标簽。
p{color:red;
border:1px solid red;}
2，特殊性：有的時候我們為同一個元素設定了不同的CSS樣式代碼，那麼元素會啟用權重最高的；權值的規則：
标簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。繼承的權值為0.1；
//内聯樣式表的權值最高 1000
3，層疊：如果在html檔案中對于同一個元素有多個css樣式存在并且這多個css樣式具有相同權重值，會根據這些css樣式的前後順序來決定，處于最後面的css樣式會被應用
4，重要性：有些特殊的情況需要為某些樣式設定具有最高權值，這時候可以使用!important；注意：!important要寫在分号的前面
p{color:red!important;}
p{color:green;}
CSS格式化排版
1，字型：下面兩種都可，第一種相容性更好，如果設定了系統中沒有的字型，會使用浏覽器預設字型
body{font-family:"Microsoft Yahei";}
body{font-family:"微軟雅黑";}
2，字号、顔色：
body{font-size:12px;color:#666}
3，粗體：
p span{font-weight:bold;}
4，斜體：
p a{font-style:italic;}
5，下劃線：
p a{text-decoration:underline;}
6，删除線：
.oldPrice{text-decoration:line-through;}
7，縮進：比如每個段落前縮進兩個文字的空白
p{text-indent:2em;}
8，行間距（行高）：
p{line-height:1.5em;}
9，中文字間距、字母間距：
h1{letter-spacing:50px;}
10，對齊：将塊狀元素裡的文本、圖檔設定對齊，
h1{text-align:center;}
h1{text-align:left;}
h1{text-align:right;}
元素分類：
在CSS中，html中的标簽元素大體被分為三種不同的類型：塊狀元素、内聯元素(又叫行内元素)和内聯塊狀元素。
常用的塊狀元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内聯元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内聯塊狀元素有：<img>、<input>
塊狀元素：
1、每個塊級元素都從新的一行開始，并且其後的元素也另起一行。
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一緻），除非設定一個寬度。
設定display:block可以将元素顯示為塊級元素。
a{display:block;}
内聯元素：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設定；
3、元素的寬度就是它包含的文字或圖檔的寬度，不可改變
塊狀元素也可以通過代碼display:inline将元素設定為内聯元素
div{display:inline;}
内聯塊狀元素：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設定
display:inline-block可以設定為内聯塊狀元素；
盒模型：
所有的塊标簽都具備盒子模型的特征
1，邊框：盒子模型的邊框就是圍繞着内容及補白的線，這條線你可以設定它的粗細、樣式和顔色(邊框三個屬性)。有兩種寫法
div{border:2px solid red;}
div{ border-width:2px;
border-style:solid;
border-color:red;}
可以單獨設定某一條邊框的屬性：
div{border-bottom:1px solid red;}
div{border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;}
2,寬度和高度：盒模型寬度和高度和我們平常所說的物體的寬度和高度了解是不一樣的，css内定義的寬（width）和高（height），指的是填充以裡的内容範圍。是以一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+内容寬度+右填充+右邊框+右邊界
3，填充：元素内容與邊框之間是可以設定距離的，稱之為“填充”（padding）。填充也可分為上、右、下、左(順時針)。如下代碼：
div{margin:20px 10px 15px 30px;}//同樣也可以分開寫
4，邊界：元素與其它元素之間的距離可以使用邊界（margin）來設定。邊界也是可分為上、右、下、左。如下代碼：
div{margin:20px 10px 15px 30px;}//同樣可以分開寫
CSS布局模型：
在網頁中，元素有三種布局模型：
1，流動模型（Flow）：流動（Flow）是預設的網頁布局模式。也就是說網頁在預設狀态下的 HTML 網頁元素都是根據流動模型來分布網頁内容的。流動布局模型具有2個比較典型的特征：第一點，塊狀元素都會在所處的包含元素内自上而下按順序垂直延伸分布，因為在預設狀态下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。第二點，在流動模型下，内聯元素都會在所處的包含元素内從左到右水準分布顯示。
2，浮動模型 (Float)：給塊狀元素設定樣式的時候，float:left;或者float:right可以實作浮動模型，塊狀元素可以并排顯示，float之後不再是塊狀元素，必須設定寬高
3，層模型（Layer）：讓html元素在網頁中精确定位，由于網頁大小的活動性，層布局沒能受到熱捧。但是在網頁上局部使用層布局還是有其友善之處的。分為三種定位：
1)絕對定位：如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，這條語句的作用将元素從文檔流中拖出來，然後使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于浏覽器視窗;以下實作右移100像素下移50像素
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
2)相對定位：如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性确定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然後相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性确定，偏移前的位置保留不動。如下代碼實作相對于以前位置向下移動50px，向右移動100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
3)固定定位：fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐标是視圖（螢幕内的網頁視窗）本身。由于視圖本身是固定的，它不會随浏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動浏覽器視窗的螢幕位置，或改變浏覽器視窗的顯示大小，是以固定定位的元素會始終位于浏覽器視窗内視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。以下代碼可以實作相對于浏覽器視圖向右移動100px，向下移動50px。并且拖動滾動條時位置固定不變。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
4）Relative與Absolute的組合使用：使用position:absolute可以實作被設定元素相對于浏覽器（body）設定定位，也可以被設定為相對于其他元素設定定位；1、參照定位的元素必須是相對定位元素的前輩元素：2、參照定位的元素必須加入position:relative;3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。
<div id="box1"><!--參照定位的元素-->
<div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>
#box1{
width:200px;
height:200px;
position:relative;
}
#box2{
position:absolute;
top:20px;
left:30px;
}
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)