目錄:
1.CSS的引入方式
2.CSS選擇器
3.字體樣式
4.文本樣式
5.邊框樣式
6.列表樣式
7.表格樣式
8.圖片樣式
9. 背景樣式
10.超鏈接樣式
11.盒子模型
12.浮動佈局
13.定位佈局
14.後續補充

1. CSS的引入方式

1.1外部樣式表

意思是把HTML和CSS放在放在不同的文件裏，然後用link標籤來引入CSS文件

格式及說明：

<link rel="stylesheet" type="text/css" href="文件路徑" />

link標籤放在HTML的head標籤裏
rel屬性和取值都是固定的，表示引用一個樣式表文件(即CSS文件)
type屬性和取值也都是固定的，表示這是一個標準的CSS文件
herf是指CSS文件路徑

1.1內部樣式表

就是把HTML代碼和CSS代碼放在同一個HTML文件

格式及說明：

<style type="text/css">
    ……
</style>

CSS代碼放在style標籤中，然後style標籤放在head標籤內
屬性type和屬性值text/css是固定不變的，表明是標準的CSS

例子：

1.3行內樣式表

同樣的把HTML和CSS的文件放在同一個文件裏，但是此時的style不是在head標籤的內部

直接一個例子：

2. CSS選擇器

2.1元素的id和class

id和class都是標籤最基本的兩個屬性，id屬性的屬性值具有唯一性，在一個頁面，相同的id只能出現一次，class屬性是爲同一個頁面的不同元素設置相同的class，然後使相同的class具有相同的CSS樣式注意每一個標籤的id名字都不能重複，不管是不是同一種標籤，所以id選擇器一次只能選擇一個標籤。id和class的命名必須是以字母開頭，包含數字字母下劃線或者橫線

2.2元素選擇器

意思就是相同的標籤具有相同的屬性

2.3id選擇器

爲元素設置id屬性，然後針對設置的id元素定義CSS樣式

舉個例子：

注意id選擇器id名的前面必須加上前綴#否則無法生效

2.4class選擇器

我們可以對相同或者不同的元素定義相同的class屬性，然後針對相同的class元素，使用同一CSS代碼進行操作

舉個例子：

注意class名前必須加上.前綴不然無法生效

2.5後代選擇器

後代選擇器就是選擇元素內部中某一元素的所有元素，包括子元素或者其他的後代元素

例子：

2.6通配符選擇器

通配符可以選擇body標籤裏邊所有的標籤

*+{
   }

一般通配符選擇器都用於清除默認樣式：
很多標籤都有一些默認的盒子樣式比如body，div等都有默認的內外邊框需要清除可以用下面代碼進行清除默認樣式

*{
margin:0;
padding:0;
   }

2.7羣組選擇器

指同時對幾個選擇器進行操作

舉例：

2.8交集選擇器

就是一個class屬性裏邊有多個class的值，比如

我們可以看到

  p.box1.box2{
    		
    	background: green;
    }

這行代碼p標籤內class值既有box1又有box2的標籤，那麼就對應<p class="box1 box2">

2.9兄弟選擇器

直接看代碼

cc會被標註成紅色
.aaa+p代表的意思是選中和.aaa緊挨着的p元素，如果不是緊挨着就不會被選中
如果是.aaa~p就是選中.aaa後邊的所有的p標籤

3.字體樣式

3.1字體樣式屬性

3.2字體類型

font-family：我們往往會使用不同的字體，比如宋體，微軟雅黑。

格式及說明：

font-family: 字體1, 字體2, ... , 字體N;

font-family可以指多種字體，指多種字體的時候按從左到右的順序進行排序
如果不定義此屬性那麼默認是宋體
如果字體類型是由多個單詞組成那麼需要加上雙引號
定義多種字體的意思，每個人的電腦的字體有可能不一樣，有可能有些字體安裝，有可能有些字體沒安裝，比如 p{font-family:Arial,Verdana,Georgia;}意思是p標籤內優先使用Arial字體，如果電腦沒有那麼再考慮Verdana,依次類推

3.3字體大小

font-size：屬性值分爲兩種，一種是關鍵字small,medium,large 依次加大，另一種直接是像素值

3.4字體粗細

font-weight：屬性值分爲兩種，一種是100~900的數值依次加粗，還有一種關鍵字lighter，bold,bolder依次加粗

介紹完這三種屬性後，我們會發現，如果一個一個屬性的寫，那麼顯得麻煩，這裏就可以用到font的複合屬性

font-size: 20px;
line-height: 400%;//行高，後邊會講
font-family:“宋體”;

上邊這三行等價於

font:20px/400% “宋體”;

這裏注意行高屬性在書寫時必須在文字自號後邊。

3.5字體風格

font-style：屬性值爲italic時爲斜體，屬性值爲oblique時也爲斜體

既然都是斜體，那麼有什麼區別呢，可以這麼理解：
有些字體有italic屬性，但是有些字體卻沒有italic屬性。oblique是讓沒有italic屬性的字體也有斜體的效果

3.6字體顏色

color：介紹兩種屬性值，一種是關鍵字red，green等，一種是十六進制的RGB值。

RGB其實就是是通過三種顏色(紅綠藍)不同的濃度來表示不同的顏色，濃度在0~255之間

例如：

color:rgb(255,0,0)表示紅色

表示成十六進制就是：

color:#ff0000就表示紅色
color:#000000就表示黑色
color:#ffffff就表示白色

4.文本樣式

4.1文本樣式屬性

屬性	說明
text-indent	首行縮進
text-align	水平對齊
text-decoration	文本修飾
text-transform	大小寫轉換
line-height	行高
letter-spacing,word-spacing	字母間距詞間距

4.2首行縮進

text-indent：屬性值爲像素值
例子：

4.3水平對齊

text-align：有三個屬性值分別爲left(左對齊)，center(居中對齊)，right(右對齊)

4.4文本修飾

text-decoration：常用的屬性值爲underline(下劃線)，line-through(中劃線)，overline(頂劃線)

舉例;

一般的，我們的超鏈接都會有下劃線

那麼只要我們把text-decoration屬性值變成none就行了

4.5大小寫

text-transform：有三個屬性值uppercase(轉換成大寫)，lowercase(轉換成小寫)，capitalize(只將每個英文單詞的首字母變成大寫)

4.6行高

line-height：屬性值就是像素值或百分比(百分比是和字號比較200%就是字號的兩倍)
這裏有一個妙用讓行高等於盒子高讓文字在盒子內居中對齊

4.7間距

1.letter-spacing：字間距(如果有英文的話，把每一個英文的單詞看出一個字)，屬性值爲自定義像素值
2.word-spacing：單詞間距(只針對英文)，屬性值爲自定義像素值

5.邊框樣式

5.1邊框樣式屬性

5.2整體樣式

1.border-width：定義邊框的寬度取值是一個像素值
2.border-style：通常屬性值有兩個dashed(虛線)，solid(實線)

舉個例子，我們爲div添加邊框

比如我們給一個圖片添加邊框

其實div裏邊的CSS代碼可以等價於border:1px solid red,這是CSS裏邊的簡寫形式

5.3局部樣式

每個邊框都可以自己設置自己的width,style和color,舉個例子：

6.列表樣式

6.1列表項符號

6.2list-style-type有序列表的屬性取值

屬性值	說明
decimal	阿拉伯數字(也是默認值)
lower-roman	小寫羅馬數字
upper-roman	大寫羅馬數字
lower-alpha	小寫英文字母
upper-alpha	大寫英文字母

例子：

6.3list-style-type無序列表的屬性取值

屬性值	說明
disc	實心圓(默認值)
circle	空心圓
square	實心正方形

例子：

6.4去除列表項符號

list-style-type

例子：

6.5列表項圖片

list-style-image：ulr(圖片路徑)：我們可以自定義列表項符號

7.表格樣式

7.1表格標題的樣式

caption-side：兩個屬性值，第一個top(默認值)表示標題子頂部，第二個屬性值botton,表示標題在底部

例子：

7.2表格邊框合併

border-collapse：由於表格之間是有空隙的，所以可以使用這個屬性進行邊框合併，屬性值常用的有兩個，separate(邊框分開，有空隙也是默認值)，collapse(邊框合併，無空隙)

例子：

當我們不合並的時候:

合併後

7.3表格邊框間距

border-spacing：屬性值爲像素值

例子：

圖片樣式

8.1圖片大小

1.width：設置圖片寬度，屬性值爲自定義像素值
2.heigth：設置圖片高度，屬性值爲自定義像素值

8.2圖片邊框

8.3圖片對齊

text-align：水平對齊，常用屬性值有三個，left(左對齊，默認)，center(居中對齊)，right(右對齊)

8.4文字環繞

float：常用屬性值有兩個，一個是left(向左浮動)，right(向右浮動)

例子：

9.背景樣式

9.1背景樣式屬性

屬性	說明
background-image	定義背景圖片的地址
background-repeat	定義圖片地址重複，橫向或者縱向重複
background-position	定義背景圖片位置
background-attachment	定義背景圖片固定

9.2背景顏色

background-color：一般我們兩種屬性值，第一種是英文值，一種是十六進制的RGB值

9.3背景圖片樣式

background-image：屬性值爲url(圖片地址)

例子：

注意：我們要想使用圖片當背景，必須設置標籤的寬高，否則圖片無法正常顯示

9.4背景圖片重複

background-repeat：repeat在水平方向和垂直方向同時平鋪(默認值)，repeat-x只在水平方向平鋪，repeat-y：只在垂直方向平鋪，no-repeat不平鋪

9.5背景圖片的位置

background-position：屬性值有兩種一種是像素值，一種是關鍵字

1.像素值

我們需要同時設置水平和垂直方向的屬性值，例子：

40px是水平方向圖片與網頁最左端的距離，20px是與最頂端與圖片的距離

2.關鍵字

屬性值	說明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

9.6背景圖片的固定

background-attachment：scroll(隨標籤一起滾動)，fixed(固定不動)

10.超鏈接樣式

10.1超鏈接僞類

一般情況下我們的超鏈接在鼠標點擊後前後有不同的樣式：

默認情況下，字體爲藍色，帶有下劃線
鼠標點擊時，字體爲紅色，帶有下劃線
鼠標點擊後，字體爲紫色，帶有下劃線

我們可以使用超鏈接僞類來定義超鏈接點擊之後的不同時期的樣式，超鏈接僞類如下：

僞類	說明
a:link	定義元素未訪問的樣式
a:visited	定義a元素訪問後的樣式
a:hover	定義鼠標經過a的樣式
a:active	定義鼠標點擊激活之後的樣式

這裏的text-decoration:none是去掉下劃線的操作

10.2深入hover

很多朋友可能都以爲hover只限用於a標籤,其實不是，他其實適用於任何標籤

例如，用於div標籤，當我們把鼠標放在div區域上

再比如我們鼠標到爲img標籤時爲圖片添加一個邊框：
下面是我們鼠標沒有放在上邊的效果

我們鼠標放在上邊的效果：

10.3鼠標樣式

cursor：這個屬性代表瀏覽器鼠標樣式，一般常用的屬性值有三種，一種是默認的default，一種是pointer(手裝),一種是text(大寫的I裝)

當然我們也可以自定義鼠標的樣式語法：

cursor:url(圖片地址)，屬性值：屬性值和上邊的一樣

11.盒子模型

11.1盒模型簡介

盒模型也叫框模型包含五個部分：寬度(針對內容區)，高度(針對內容區)，內邊距，邊框，外邊距

屬性	說明
content	內容區，可以是我文本或者圖片
padding	內邊距，用於定義內容和邊框之間的距離
margin	外邊距，用於定義當前元素與其他元素之間的距離
border	邊框，用於定義元素的邊框
width	內容區的寬度
height	內容區的高度

這裏我們有幾個個注意點

我們常提到的盒子的寬度其實是width+padding+boreder，並不只是width
這裏我們設置的width和heigth都是內容區,我們設置的背景顏色是針對整個盒子而言，所以在我們設置一個盒子的寬高後再設置內邊距就會使盒子變大，因爲內容區大小不會，變得是整個盒子的大小`

11.2內聯元素和塊元素在盒子模型中的用處和區別：

區別：

塊元素能設置寬高，而內聯元素不能設置寬高，內聯元素用內容撐起寬高
內聯元素可以設置內邊距，在水平方向可以影響佈局，在垂直方向不影響佈局(影響佈局就是元素會不會影響其他元素在網頁中的位置)

內聯函數和塊元素的相互轉換：

display: 內聯函數和塊元素的相互轉換所用屬性
屬性值：
inline(將一個元素當作一個內聯元素顯示)
block(將一個元素當作一個塊元素顯示)
inline-block(使一個元素既有塊元素的特點又有內聯元素的特點即既可以設置寬高又不會獨佔一行)
none:不顯示元素，並且元素不會在頁面繼續佔有位置

11.3內邊距外邊距

padding：內邊距
margin：外邊距

設置內邊距(外邊距也適用)的六種方式
padding可以分別設置上下左右的內邊距

分別設置：上邊距：padding-top:10px，右邊距：padding-right:20px，下邊距：padding-bottom:30px 左邊距：padding-left:40px
四值法：podding ：10px 20px 30px 40px(按照上右下左的順序)
三值法：padding :10px 20px 30px(上下不同左右相同,中間代表左右邊距)
二值法：padding:10px 20px(上下相同左右相同時第一個值代表上下邊距，第二個值代表左右邊距)
一值法：padding :10px(上下左右邊距都相同時)
覆蓋法：padding:10px，padding-right:20px(先設置所有的，再單獨設置右邊距，覆蓋原來的)

外邊距的水平方向還有一個特別的屬性值auto

auto一般用於設置水平方向，當只給左或者右方向設置margin那麼就會在這個方向有最大的外邊距，如果左右都設置auto那麼就會水平居中

舉個例子，讓子盒子在父盒子裏邊水平和垂直都居中

12.浮動佈局

12.1正常文檔流

正常文檔流就是將頁面從上到下將頁面分成一行一行的，其中塊元素獨佔一行，相鄰的行內元素在每一行從左到右依次排滿，正常文檔流就是默認情況下頁面元素的佈局情況

看一段代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div></div>
    <span></span><span></span>
    <p></p>
    <span></span><i></i>
    <img />
    <hr />
</body>
</html>

作爲正常文檔流，那麼它的佈局就是

12.2脫離文檔流

脫離文檔流就是指脫離正常的文檔流，正常文檔流就是我們沒有用浮動或者定位去改變默認的HTML文檔的結構，換句話說，改變正常文檔流有兩種方法，浮動或者定位，這裏我們主講浮動

浮動的意義在於使塊元素脫離文件流
屬性值：float
屬性值：
none：默認值
left：元素脫離文檔流向頁面左側浮動
right：元素會立刻脫離文檔流向頁面的右側浮動

關於浮動的注意點：

當一個元素脫離文檔流後它下邊的元素會立刻向上移動
元素浮動以後，會盡量向頁面的左上或右上漂浮直到遇到父元素的邊框或者其他浮動塊元素
如果浮動元素上邊是一個沒有浮動的塊元素，則浮動的元素不會超過塊元素，即浮動元素不會超過他上邊的兄弟元素最多一邊齊
浮動元素會遮住不浮動元素的內容區，但是如果內容區有文字那麼文字不會被遮住
不管是內聯元素還是塊元素只要被設置爲浮動其高度和寬度都會被內容撐開

對於第四點：

12.3高度塌陷問題：

高度塌陷問題的產生
1.在文檔流中如果不給父親設置高度，那麼父親的高度默認是被子元素撐開的即：

如果我們爲子元素設置向左浮動就會導致父親高度的塌陷從而導致整個網頁的佈局被打亂
即：

第一種解決方法：
1.開啓元素的BFC屬性：
開啓後有元素有如下屬性：
(1)父元素的垂直邊距不會和子元素重疊(子元素設置margin比父親的margin大的時候，父親不會受子類的移動而發生移動)
(2)元素不會被浮動元素所覆蓋
(3)可以包含浮動的元素
2.開啓BFC的方法：
(1)設置父元素浮動(這種方法對打亂的網頁佈局不會產生效果)

(2)爲父元素設置同等高度，雖然可以但是如果子元素的高度發生改變就父元素就需要同等的改變
(3)將overflow設置一個非visible的值

第二種解決方案：
先介紹一個清除其他元素對當前元素參生的影響：
屬性clear:
屬性值：
none：默認值不清除浮動
left：清除左側浮動對當前元素參生的影響
right：清除右側浮動對當前元產生的影響
both：清除兩側元素對當前元素影響最大的
比如有三個盒子：

如果對紅色的元素設置左浮動藍色設置右浮動那麼就有:

設置clear的both屬性(本質就是右側浮動影響大)：

最終方案
(1)可以爲高度塌陷的父元素內加一個div元素並且清除浮動帶來的影響就very perfect
但是由於相當於多了一個盒子所以並不是最完美的解決方法

(2)通過after僞類向元素的最後添加一個空白的塊元素然後對齊進行清除浮動
對於僞類裏邊的內容：
centent:必須要添加，這一項表示添加內容，當屬性值什麼都不加的時候就表示僅僅加了空的盒子(和加一個div相同)
display：表示是添加的是一個塊裝元素
clear：清除浮動的影響

定位佈局

13.1定位佈局簡介

1.定位佈局：

作用：將指定元素放在指定的頁面的位置
屬性：position
屬性值有static(默認值)，relative(相對定位)，absolue(絕對定位)，.fixed(固定定位)

13.2相對定位

position:relative：設置相對定位的時候需要用left,right,top,bottom四個屬性設置偏移量
這裏注意設置的偏移量會向相反方向移動
幾個注意事項：

開啓定位後不設置偏移量就不會發生任何變化
相對定位是相對於文檔流中原來的位置來定位
相對定位的元素不會脫離文檔流
相對定位會使元素提升一個層級(每個元素都有一個層級，當兩個元素重合時層級高的元素會蓋住層級低的元素)
相對定位不會改變元素的性質塊元素還是塊元素內聯還是內聯

例子：

當我們設置相對定位後：

13.2絕對定位

position:absolue：設置絕對定位的時候需要用left,right,top,bottom四個屬性設置偏移量

注意事項：

開啓絕對定位後會使文檔脫離文檔流
開啓絕對定位後不設置偏移量元素得到位置不會發生變化
開啓絕對定位後相當於離他最近的開啓了定位的元素進行定位的如果祖先元素沒有開啓定位(相對定位絕對定位都行)則會相當於瀏覽器窗口進行定位(與瀏覽器最左上角對齊)
絕對定位會使元素提升一個層級
絕對定位會改變元素的性質(內聯元素變成塊元素，塊元素的寬高被內容撐開)

舉個例子：

當我們添加絕對定位的代碼後：

4.fixed：固定定位

position:absolue設置絕對定位的時候需要用left,right,top,bottom四個屬性設置偏移量
固定定位是一種絕對定位，但他們的不同點爲：

固定定位永遠都會相對於瀏覽器窗口進行定位
固定定義會固定在瀏覽器窗口的某個位置，不會隨網頁的滾動而滾動

舉例：

14.後續補充

14.1CSS繼承性和重疊性

繼承性和重疊性是css層疊式的兩個特性
(1)css繼承性：
後代元素能夠繼承祖先元素的文字樣式(包含字體大小加粗顏色等)，不能繼續盒子的樣式
(2)層疊性：
如果多種選擇器選擇一個目標那麼誰權重大聽誰的
權重：id選擇器>類選擇器>標籤選擇器
計算權重的方法：數基礎選擇器個數id個數，類的個數，標籤個數
依次比較，誰先大聽誰的，比如id一樣，那麼聽類的個數大的，如果類的個數也一樣，那麼比標籤個數，如果標籤也一樣那麼就比較先後順序，聽順序靠後的。
如果沒選中目標標籤則需要靠繼承，依靠就近原則，如果距離相同就比較權重，權重相同看先後順序，聽順序靠後的
!important：直接把權重提升到最大
直接在一個屬性後邊加上!important
!important不能在就近原則中使用，當import所處標籤是爺字輩還有一個爹字輩時會聽爹字輩加粗樣式

14.2：visibility和overflow

1.設置元素隱藏和顯示屬性
屬性：visibility
屬性值：
visible：默認值代表元素默認會在頁面顯示
hidden：元素隱藏不顯示，但是會繼續佔有

2.父元素處理子元素移除部分
屬性：overflow
屬性值：
visible(默認值不會做出任何處理)
hidden(溢出的部分會被修剪不會顯示)
scorll(爲父元素加滾動條,不管子元素有沒有溢出都會自動添加滾動條)
auto(需要添加水平滾動條就添加水平滾動條，需要垂直就添加垂直滾動條，不需要就不加)

女朋友擔心我的CSS基礎，我用這一篇博客征服了她

1. CSS的引入方式

1.1外部樣式表

1.1內部樣式表

1.3行內樣式表

2. CSS選擇器

2.1元素的id和class

2.2元素選擇器

2.3id選擇器

2.4class選擇器

2.5後代選擇器

2.6通配符選擇器

2.7羣組選擇器

2.8交集選擇器

2.9兄弟選擇器

3.字體樣式

3.1字體樣式屬性

3.2字體類型

3.3字體大小

3.4字體粗細

3.5字體風格

3.6字體顏色

4.文本樣式

4.1文本樣式屬性

4.2首行縮進

4.3水平對齊

4.4文本修飾

4.5大小寫

4.6行高

4.7間距

5.邊框樣式

5.1邊框樣式屬性

5.2整體樣式

5.3局部樣式

6.列表樣式

6.1列表項符號

6.2list-style-type有序列表的屬性取值

6.3list-style-type無序列表的屬性取值

6.4去除列表項符號

6.5列表項圖片

7.表格樣式

7.1表格標題的樣式

7.2表格邊框合併

7.3表格邊框間距

圖片樣式

8.1圖片大小

8.2圖片邊框

8.3圖片對齊

8.4文字環繞

9.背景樣式

9.1背景樣式屬性

9.2背景顏色

9.3背景圖片樣式

9.4背景圖片重複

9.5背景圖片的位置

9.6背景圖片的固定

10.超鏈接樣式

10.1超鏈接僞類

10.2深入hover

10.3鼠標樣式

11.盒子模型

11.1盒模型簡介

11.2內聯元素和塊元素在盒子模型中的用處和區別：

11.3內邊距外邊距

12.浮動佈局

12.1正常文檔流

12.2脫離文檔流

12.3高度塌陷問題：

定位佈局

13.1定位佈局簡介

13.2相對定位

13.2絕對定位

14.後續補充

14.1CSS繼承性和重疊性

14.2：visibility和overflow