目錄:
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基础汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。