標籤：line styles border 方向 技術 外鏈 百分比 啟用 置中
一：CSS（Cascading Style Sheets的縮寫），翻譯為“層疊樣式表”或者“階層式樣式表”，簡稱樣式表。
作用：它主要是用來給HTML網頁來設定外觀或者樣式。
外觀或者樣式：HTML網頁中的文字的大小、顏色、字型，網頁的背景顏色、背景圖片！
書寫CSS文法規範：
二：CSS的書寫方式
CSS代碼應該書寫在什麼地方！
書寫方式分為三種：嵌入式、外鏈式、行內式。
①嵌入式：將CSS代碼嵌入到HTML檔案中，嵌入式是通過HTML中的<style>標籤將CSS代碼嵌入到HTML網頁中！
文法規則：
<style type=”text/css”>
/*書寫CSS代碼*/
選取器{屬性:值;屬性:值;}
</style>
如果我們使用的是HTML5的文檔 type屬性可以省略不寫！
注意：<style></style>它可以出現在HTML中的任何地方，但是一般情況我們只會將它放置在head標籤裡面
②外鏈式：外鏈式是指單獨寫一個以.css為副檔名的檔案，然後在<head></head>標籤中使用<link />標籤，將這個css檔案連結到html檔案中
注意：css檔案不能單獨的運行，它必須要依賴於HTML檔案！
文法規則：
<link rel="stylesheet" href="css檔案的地址">
③行內式：將CSS代碼書寫在HTML標籤的style屬性中。style是一個通用屬性，每一個標籤裡面都擁有這個屬性！
文法格式：
<標籤名 style=”屬性:值;屬性:值;”></標籤名>
總結：
使用嵌入式的方式來書寫CSS代碼，它只能作用於當前的HTML檔案
使用外鏈式的方式來書寫CSS代碼，它可以作用於多個HTML檔案
三：注釋
格式：
/* 注釋的內容 */
四：選取器
選取器是指通過一定的文法規則選取到對應的HTML標記，然後給這個對應的HTML標記設定樣式
選取器分為四大類：基本選取器、複合選取器、偽類別選取器、屬性選取器。
基本選取器：
---------------------------------------------------------------------------------------------------------------------------------------------------------
複合選取器：
---------------------------------------------------------------------------------------------------------------------------------------------------------
偽類別選取器：
偽類別選取器是用來給超級連結的不同狀態來設定樣式。
超級連結的不同狀態
正常狀態 超級連結沒有被訪問 :link
訪問過後狀態 超級連結已經被訪問 :visited
滑鼠放上狀態 滑鼠放在超級連結上面，但是並沒有將滑鼠的左鍵按下去 :hover
啟用狀態 滑鼠左鍵已經按下去了，但是並沒有將滑鼠的左鍵彈出 :active
偽類別選取器都是帶有冒號“:”
注意：
超級連結的不同狀態它其實是有順序。也就是說偽類別選取器設定其實是有順序。
如果不按照偽類別選取器的順序，那麼樣式就會失效。
---------------------------------------------------------------------------------------------------------------------------------------------------------
屬性選取器：
屬性選取器它是與標籤的屬性名稱和屬性值有關。
屬性選取器是通過標籤的屬性名稱和屬性值來匹配元素。
五：尺寸樣式屬性
六：文本與字型屬性
文字屬性：
屬性名稱 |
值 |
含義 |
color |
#ff0000或red或rgb(3,5,8) |
給文本設定顏色 |
text-align |
left(居左)、right(居右)、center(置中) |
設定文本的水平對齊方向 |
text-decoration |
none(去掉文本修飾線)、underline(底線),、overline(上劃線) 、line-through(刪除線) |
設定文本修飾線 |
text-transform |
capitalize、uppercase 、lowercase |
大小寫轉換或者首字母大寫 |
Line-height |
固定值或百分比 |
設定行高 |
text-indent |
px或者em |
設定首行縮排 允許負值 |
letter-spacing |
px |
設定字元間距 |
word-spacing |
px |
設定單詞間距 |
---------------------------------------------------------------------------------------------------------------------------------------------
字型屬性：
屬性名稱 |
值 |
功能 |
font-style |
normal(正常)、(italic)斜體 |
設定文本為斜體 |
font-weight |
normal(正常)、bold |
設定文字粗細 |
font-size |
如12px、14px 記得加單位 |
給文本設定大小 |
font-family |
微軟雅黑、楷體、宋體….. |
給文本設定字型 |
font |
舉例：font:italic bold 14px “微軟雅黑” |
簡寫屬性 能夠同時給文本設定斜體、加粗、大小、字型 每一個值之間需要使用空格 並且一定要有順序 |
七：列表樣式屬性
這裡的列表指的是：無序列表和有序列表
因為在整個網頁布局中無序列表是使用的最多的。
CSS知識點梳理（一）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
