基礎語法規則

CSS 規則由兩個主要的部分構成：

1.選擇器:通常是需要改變樣式的 HTML 元素
2.一條或多條聲明：由一個屬性和一個值組成。
每個屬性有一個值。屬性和值被冒號分開。

選擇器：

分組：用逗號可以將需要分組的選擇器分開。
繼承：從父元素繼承屬性，如head繼承body   

<br />
引用：

<!-- 引用外部資源 MyCss.css -->
<link rel="stylesheet" href="MyCss.css" type="text/css">

註釋

CSS註釋與HTML中不同 可以用 /*..*/的方式來註釋.
<br />

CSS選擇器

ID選擇器和類選擇器區別：

1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。

<br />
子元素選擇器和後代選擇器的區別：

子元素選擇器‘>‘作用於元素的第一代後代，後代選擇器（空格）作用於元素的所有後代。

1、派生選擇器

通過依據元素在其位置的上下文關系來定義樣式，可以使標記更加簡潔。
li strong{ color: red; }

2、id選擇器

為標有 id 的 HTML 元素指定特定的樣式, id 選擇器以“#”來定義，而id選擇器經常與id選擇器配合使用
註意：id 屬性值只能在每個 HTML 文檔中出現一次。

CSS：#div a{ color:red; }
HTML:<p id="div">what a <a href="">fuck</a></p>
//只有fuck顯示red效果

3.類選擇器

.divclass { color: red; } 在某個元素中含有class=divclass則意味著要遵守前面這個代碼的規則，即含有divclss類。
註：第一個字符不能用數字。
經常與id選擇器配合使用

CSS：.divclass a{ color:green; }
HTML:<p class="divclass">brain fuck<a href="">er</a></p>
//只有er顯示green效果

多類選擇器:

class="p1 p2"   //HTML
.p1.p2{ font-style: italic }
 //這樣P3既有了p1\p2的屬性 還有屬於自己的字體屬性

4.屬性選擇器

1、[title]{}這是為帶有title屬性的元素設置樣式
2、[title=te]{}這是為title=te的元素設置樣式

5、元素選擇器

像h1{}、a{}等，這些文檔的元素就是最基本的選擇器。

6、選擇器分組

就是對多個元素進行分組同時進行樣式設置，如h1,h2,h3{}
還有一個通配符*的使用,用通配符的時候就是設置整個頁面的內邊距和外邊距,若想要某個例外，則對該元素單獨進行設置、覆蓋即可。
類與標簽的分組使用，例.first,#second span{}

7、後代選擇器

後代選擇其可以選擇作為某元素後代的元素。比如對p中的strong的子標簽進行設置，p strong{}

8、子元素選擇器

與後代選擇器相比,子元素選擇器只能選擇作為某子元素的元素，例h1>strong{}

9、相鄰兄弟選擇器

相鄰兄弟選擇器可以選擇緊接在另一個元素後的元素,且二者有相同的父級元素,例h1+p{}
兄弟選擇器多用於列表,具有相同的父級元素 ul li+li{}

10、偽類選擇器

兼容性最好的也最常用的一個列子：a:hover{}即表示鼠標劃過時顯示的樣式

<br /><br />

CSS基本樣式

CSS 背景

設置背景圖片的時候默認是重復的，所以此時可以用background-repeat屬性來設置圖片是否重復：background-repeat:no-repeat

no-repeat 表示不能重復，repeat 可重復，repeat-x 表示 x 軸重復，repeat-y 表示 y 軸重復

為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。還可以使用長度值和百分數值。

背景關聯如果網頁比較長，那麽當網頁向下滾動時，背景圖像也會隨之滾動。當網頁滾動到超過圖像的位置時，圖像就會消失。 我們可以通過background-attachment屬性防止這種滾動。通過這個屬性，可以聲明圖像相對於可視區是固定的fixed，因此不會受到滾動的影響.

<br />

CSS3背景

CSS鏈接

鏈接的四種狀態：

a:link --普通的、未被訪問的鏈接
a:visited --用戶已訪問的鏈接 
a:hover --鼠標指針位於鏈接的上方 
a:active --鏈接被點擊的時刻

四個屬性設置要遵循的順序問題： a:hover 必須位於 a:link 和 a:visited 之後 a:active 必須位於 a:hover 之後
修改都對應屬性的background-color即可改變鏈接背景顏色
下劃線：在text-decoration裏面將傳址改為none即可

CSS列表

list-style-type屬性可以控制列表前面的標記類型，其值有circle\square\upper-roman\lower-alpha
<br />
列表項圖片,用list-style-image，下載的圖標放入工程文件夾：

<ul class="img1"></ul>
ul.img1{list-style-image:url("4.ico")}

簡寫列表樣式，即把所有列表屬性設置放在一個聲明中：
如li {list-style : url(example.gif) square}

CSS表格

border-collapse ---設置是否把表格邊框合並為單一的邊框。

border-spacing ---設置分隔單元格邊框的距離。

caption-side --- 設置表格標題的位置。

empty-cells ---設置是否顯示表格中的空單元格。

table-layout ---設置顯示單元、行和列的算法。

CSS輪廓

outline,也有color,width,style等屬性

<br /><br />

CSS 樣式代碼插入

從的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。
1、內聯式：樣式在開始標簽中，並且要寫在style=“"雙引號中，多條樣式代碼用分號隔開。<p style="color:red; font-size:20px">
2、嵌入式：寫在當前的文件中,把CSS代碼寫在<style type="text/css">之中 span{...}
3、外部式：單獨把css內容寫在另外的文件內。

就近原則（離被設置元素越近優先級別越高），由此他們的優先級：內聯式 > 嵌入式 > 外部式

CSS尺寸

涉及屬性：

height --  設置元素的高度。
line-height --設置行高,normal,百分比
max-height-- 設置元素的最大高度。 
max-width --設置元素的最大寬度。 
min-height --設置元素的最小高度。 
min-width --設置元素的最小寬度。 
width --設置元素的寬度。

CSS導航欄

導航欄分為：垂直導航欄和水平導航欄。
我們要用CSS實現導航欄前面的圓點消失，顏色改變，下劃線去掉。

ul{ list-style:none };
a:link,a:visited{ text-decoration:none }
//還可以設置背景顏色和展示(block)
a:active,a:hover{ background-color: }
//給導航欄加個鼠標移動到上面時,改變背景顏色:

水平顯示：在li標簽中改變顯示方式 li{ display:inline}
這樣它們會在一行顯示，生成水平導航欄。

CSS圖片

透明度opacity: 範圍0-1，而1表示完全透明;

繼承屬性

如我為p標簽設置樣式，則p標簽下的子標簽都會繼承p的屬性。

如果我們為同一個元素設置不同的css樣式時就需要判斷優先級—— 即權值來確定先啟用哪個標簽。
權值規則：繼承：0.1 ；標簽：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*/

當優先級想當時就涉及到一個“層疊”的規則，即後面的會覆蓋前面的。
但是如果我需要某些在前面的內容突出顯示，即凸顯它的重要性 則需要在屬性設置後，分號前加入!important

格式化排版

字體：font-family:"Microsoft Yahei"
字號：font-size
顏色:color

1、英文命令顏色，如`color:red`   
2、RGB顏色 `p{ color:rgb(133,45,200) }`或者改成百分比   
3、十六進制顏色（最普遍）：
將RGB的每一項0-255變成十六進制00-ff，ex: color:#00ffff

indent單位em，設置該樣式縮進
長度值：
1、像素px
2、em,為相對之前的px單位,如font-size設置為14px則1em=14px.另外當font-size單位為em時計算標準以其父元素的font-size為基礎

元素分類

html中的標簽元素大體被分為三種不同的類型：
1、塊狀元素: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
2、內聯元素(又叫行內元素):<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3、內聯塊狀元素:<img>、<input>

<br />
塊狀元素：display:block
特點：1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

內聯元素：display:inline
特點：1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

內聯塊狀元素：display:inline-block
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。

CSS盒子模型

盒子的組成包括： margin(外邊距);border(邊框);padding(內邊距);content(內容)。
正文框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其後的任何元素。
外邊距可以是負值，且很多情況下需要這樣使用
<br />
padding 屬性定義元素邊框與元素內容之間的空白區域，他不允許是負值。他還可以進行單邊的內邊距設置,如h1{ padding:10px; }，也可以按照上、右、下、左的順序設置各邊內邊距。也可以通過padding-top\right\bottom\left 來設置單邊邊距。
<br />
border:順序同上，可以用border-top-width這樣的類型設置單邊。
圍繞著內容補白的線。邊框三屬性：粗細、樣式和顏色。
border:2px solid red
border-style：常見樣式有：虛線(dashed)\點線（dotted)\實線（solid)
border-color
border-width:thin|mediun|thick,常用的還是像素單位
<br />
margin默認值是0。還有一個值復制規則，是對稱復制的，允許為外邊距指定少於 4 個值：

如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。

外邊框會自動合並，這是一個疊加的概念。比如兩個外邊框都是距離100px的文本上下相鄰時本應會變為200px，由於疊加作用會變為100px。

CSS 布局

流動（flow)模型是默認的網頁布局，默認下塊狀元素寬度都是100%，內聯元素則為從左到右水平分布顯示。
浮動涉及屬性：

left:元素向左浮動
right:元素向右浮動 
none:不浮動
inherit:從父級繼承浮動的屬性
clear:用於去掉向各方向的浮動屬性(包括繼承來的屬性)    

<br />
層模型，CSS有三種基本定位機制：

1、普通流：元素按照其在 HTML 中的位置順序決定排布的過程
2、浮動：浮動的框可以向左或向右移動，
直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
3、絕對定位：使元素位置與文檔流無關，使其不占據空間

定位屬性：

position:top,left,right,bottom 這四個屬性使元素向對應的方向偏移
overflow：設置元素溢出其區域發生的事情
clip：設置元素的顯示形狀,多用於圖片
vertical-align：設置元素的垂直對齊方式
z-index：設置元素的堆疊順序

position屬性:

relative:相對定位，相對偏移前的位置
absolute:絕對定位，可能會產生重疊
fixed：固定定位，相對的是網頁窗口
static

當兩塊區域產生重疊時，就可以是用z-index設置重疊優先次序，次序大的排在上面

相對某個元素進行偏移：relative和absolute組合使用。
前提：1、參照定位的元素必須是相對定位的前輩元素且必須加入position:relative2、定位元素加入position:absolute後就可以實現偏移定位了

縮寫

盒子模型：縮寫易只，只寫一個代表四個數據，寫兩個則為對稱。
顏色縮寫：如#336699，可以改為#369
字體縮寫：縮寫時font-size和line-height之間要加入斜杠"/"，例：
body{ font:12px/1.5em "宋體",sans-serif }

居中篇

當被設置元素為 塊狀元素 時，text-align:center就不起作用了。這
時還分為定寬塊狀元素與不定寬塊狀元素。
定寬塊狀元素:width為固定值，可以通過“左右margin值”為auto來實現居中。
不定寬塊狀元素：塊狀元素width不固定。它的居中方法有三：
1、加入table標簽，它有長度自適應性。（還可以將有些文本設置為display:table)
2、設置display:inline，變為行內元素。再用text-align:center時間居中
3、position:relative,利用相對固定，再把left變為50%

CSS入門基礎 基礎語法規則