一、CSS概念：

什么是CSS,CSS說白了就是給頁面添加樣式,讓整個頁面變的好看起來的一種東西,用來定義網頁外觀，如字體、背景、顏色等

二、在頁面中使用css的3種常用方式

1.行內樣式

就是在一個標簽內使用 style 屬性,僅為某一個標簽添加樣式

例如

文字

2.內嵌式

就是將樣式寫在

ul{

list-style:none;

}

3.外鏈式

三種方式的優先級: 行內樣式最高,其他方式則取決于放置的先后順序,后面的會覆蓋前面的

三、基本語法

1. CSS語法

選擇器：?? 負責圈定范圍，要修改的元素的集合

聲明?? ：? 由屬性和屬性名組成，中間用冒號隔開(屬性名:屬性值)，用于設定具體的樣式

格式?? ：? 選擇器{屬性1:值; 屬性2:值; 屬性3:值 ....}

2. CSS注釋

樣式里面注釋就一種? /*注釋 */

html中的注釋?

3. 單位

3.1 長度單位

em ?? ??? ???????? 倍數? 相對于默認字體大小16px

px?? ??? ??? ?像素 pixel 屏幕上顯示的最小單位(推薦)

%?? ??? ??? ?百分比?? 設置font-size 相對于默認字體大小16px? 設置寬度高度相對于父元素寬度

pt?? ??? ??? ?標準長度單位?? ?1pt=1/72英寸?? ? 用于印刷業， 非常簡單易用

PPI(DPI) 每英寸像素點數 pixel(dot) per inch 表示清晰度、精度

cm/mm 厘米/毫米

附公式：px = pt * DPI /72

3.2 顏色單位

① 英文單詞? red? green? yellow .....

② 十六進制 #rrggbb?? 00-ff

③ rgb? 數字? 百分比? rgb(0~255, 0~255, 0~255)

④ rgb(0%~100%,0%~100%,0%~100%)

四?? ??? ?選擇器

1. HTML選擇器

標簽名{ }

2. ID選擇器

#ID名{ }

一個頁面一個ID名只能給一個元素

3. CLASS選擇器

.class名{ }

4. 關聯選擇器

選擇器 選擇器{ }

5. 組合選擇器

選擇器,選擇器,選擇器....{ }

6. 偽元素選擇器(IE6 僅支持a標簽)

選擇器:hover??? 鼠標懸停在上面(重用)

選擇器:active?? ?鼠標點擊的時候

選擇器:visited?? ?鼠標點擊過后

選擇器:link?? ??? ?開始狀態

選擇器補充：

1. 元素選擇符

通配符選擇符*{

padding:0;}

類型選擇符

ID選擇符

類選擇符

2. 關系選擇符

包含選擇符??? E F

子選擇符????? E>F

相鄰選擇符??? E+F

兄弟選擇符??? E~F

3. 屬性選擇符

E[attr]

E[attr=""]

E[attr^=""]

E[attr$=""]

E[attr*=""]

E[attr~=""]

E[attr|=""]

4. 偽類選擇符

E:link??????? 鼠標沒有放上去時

E:visited???? 訪問完后

E:hover?????? 鼠標放上去時

E:active????? 點擊時

E:focus?????? 獲取焦點時

E:lang(fr)

E:not(s)????? 除了

E:root

E:first-child

E:last-child

E:only-child

E:nth-child(n)

E:nth-last-child(n)

E:first-of-type

E:last-of-type

E:only-of-type

E:nth-of-type(n)

E:nth-last-of-type(n)

E:checked

E:disabled

E:enabled

E:target

5. 偽對象選擇符

E::first-letter

E::first-line

E::after

E::before

E::input-placeholder? (加私有前綴)

E::selection

五 ?? ?CSS常見屬性和值

1. 字體屬性

font?? ??? ??? ??? ??? ?設置字體所有的屬性?? font:[font-style] || [font-weight] || [font-variant] ?

font-family?? ??? ???? 設置字體庫(黑體 宋體 微軟雅黑.....)

font-size?? ??? ??? ?設置大小(px em % pt in cm mm)

font-style? ??? ??? ?設置字體風格?? ?值： normal(正常 默認)?? italic(斜體)?? oblique(斜體)

font-weight?? ? ?? ???? 設置字體粗細?? ?值：?? ? normal(默認)? bold(粗)? bolder(更粗)? lighter(細)?? 100-900(數值大于600是加粗)

font-variant?? ? ?? ?設置字體變形?? normal? small-caps(小寫變大寫)

2. 顏色屬性

color?? ?設置字體顏色(四種表示顏色的方法)

3. 背景屬性

background

綜合寫法

background: [color] [image] [repeat] [position] [attachment]

background-color?? ??? ??? ??? ?設置背景顏色?? ?顏色單位

background-image?? ??? ??? ??? ?設置背景圖片?? url('地址')

background-repeat?? ??? ??? ??? ?設置背景圖片平鋪方式?? ??? ??? ?repeat(默認值)?? ??? ?no-repeat?? repeat-x?? repeat-y

background-attachment?? ??? ?設置背景圖片附加信息?? ??? ??? ?值： ?? ?scroll(默認)?? ??? ?fixed

background-position?? ??? ??? ?設置背景圖片位置?? ??? ??? ??? ??? ?left/right/center/number px top/center/bottom/number px

4. 文本屬性

letter-spacing? 字母與字母之間的間距

word-spacing?? ?單詞與單詞之間的間距

text-decoration 對文本劃線的控制 overline? 上劃線? underline? 下劃線 line-through 中劃線? none 沒有線

text-align????? 文本的水平對齊方式? left? right??? center justify

vertical-align? 文本的垂直對齊方式,不太常用,一般文本的垂直對齊我們使用的是行高=框的高度 ?? ?baseline | sub | super | top | text-top | middle | bottom | text-bottom | |

text-indent???? 首行縮進

line-height 重要 文本的垂直對齊方式

word-wrap?????? 當一個單詞到達邊際時沒顯示完的處理方式

normal 溢出? break-word 換行顯示

text-transform? 大小寫轉換? none capitalize 首字母大寫? uppercase 全部大寫 lowercase 全部小寫

5. 邊框屬性

綜合寫法

border :邊框寬度 邊框樣式 邊框顏色

border :10px solid red

[ border-width ]： 設置或檢索對象邊框寬度。

[ border-style ]： 設置或檢索對象邊框樣式。

[ border-color ]： 設置或檢索對象邊框顏色。

border-left:

border-left-style:

border-left-color:

border-left-width:

border-right:

border-top:

border-bottom:

6. 鼠標光標屬性

cursor?? ?設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

屬性值?? auto?? pointer? move? crosshair? wait? help?? text? not-allowed

7. 列表屬性

[ list-style-type ]： 設置或檢索對象的列表項所使用的預設標記

[ list-style-image ]： 設置或檢索作為對象的列表項標記的圖像

[ list-style-position ]： 設置或檢索作為對象的列表項標記如何根據文本排列

list-style?? 綜合寫法

list-style：[ list-style-image ] || [ list-style-position ] || [ list-style-type ]

一般給一個列表中的列表項添加圖片使用的是背景圖片的方式

8. 表格屬性? width? height border.....

1)table-layout? 固定每列的寬度

屬性值

auto： 不固定

fixed： 固定

2)border-collapse 設置或檢索單元格的邊框是否合并

屬性值

separate： 邊框獨立? 默認值? 不合并

collapse： 相鄰邊被合并? 合并

3)border-spacing：單元格的邊框與邊框之間的距離

只有border-collapse的屬性值是separate：的時候,border-spacing屬性才能生效

4)caption-side：top | right | bottom | left

設置或檢索表格的caption標題在哪個方向顯示

5)empty-cells 當單元的內容為空是,是否顯示邊框

屬性值有兩個 show 默認值顯示 hide 不顯示

總結

以上是生活随笔為你收集整理的外链引入css有哪些方式_HTML+CSS基础(三) CSS的引入方式和CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

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