學(xué)習(xí)資料：
尚硅谷前端HTML5視頻_HTML & CSS 核心基礎(chǔ)教程（103集實(shí)戰(zhàn)教學(xué)，從入門到精通）
一、 列表
1 無序列表
<ul></ul>
使用li在ul中創(chuàng)建一個(gè)一個(gè)的列表項(xiàng)，一個(gè)li就是一個(gè)項(xiàng)
通過type屬性修改無序列表的項(xiàng)目符號(hào)：
- 可選值：
- disc：默認(rèn)值，是實(shí)心圓點(diǎn)
- square：實(shí)心方點(diǎn)
- circle：空心的圓
注意：默認(rèn)的項(xiàng)目符號(hào)我們一般都不使用，因?yàn)椴煌臑g覽器顯示結(jié)果不同。
-
去掉項(xiàng)目符號(hào)
在css里面設(shè)置：
ul{list-style:none} 如果需要設(shè)置項(xiàng)目符號(hào)，則可以采用為li設(shè)置背景圖片的方式來實(shí)現(xiàn)。
2 有序列表
有序列表和無序列表類似，只不過它使用ol代替ul，使用有序的序號(hào)作為項(xiàng)目符號(hào)
-
type屬性，可以指定序號(hào)的類型
可選值：
- 1：默認(rèn)值，使用阿拉伯?dāng)?shù)字
- a/A：采用小寫或大寫的字母
- i/I：采用小寫或大寫的羅馬數(shù)字
3 定義列表
用來對(duì)一些詞匯或內(nèi)容進(jìn)行定義，使用dl創(chuàng)建
dl標(biāo)簽中有兩個(gè)子標(biāo)簽：
-
dt：被定義的內(nèi)容 -
dd：對(duì)定義的內(nèi)容的描述，可有多個(gè)描述
列表之間可以嵌套，無序套有序，有序套無序。
二、單位
1 長度單位
像素px
- 像素是我們?cè)诰W(wǎng)頁中使用最多的一個(gè)單位
- 一個(gè)像素就相當(dāng)于我們屏幕中的一個(gè)小點(diǎn)
- 我們的屏幕就是由這些像素點(diǎn)構(gòu)成的
- 但是這些像素點(diǎn)是不能直接看見
- 不同顯示器一個(gè)像素的的大小也不同
- 顯示效果越好越清晰，像素就越小，反之像素越大
百分比
- 也可以將單位設(shè)置一個(gè)百分比的形式
- 瀏覽器根據(jù)父級(jí)元素的樣式來計(jì)算該值
- 好處：當(dāng)改變父級(jí)元素的值時(shí)，子級(jí)元素會(huì)自動(dòng)按照比例變化
- 在我們創(chuàng)建一個(gè)自適應(yīng)的頁面時(shí)，經(jīng)常使用百分比作為單位
em
- 和百分比類似，它是相當(dāng)于當(dāng)先元素的字體大小來計(jì)算的
- 1em = 1 font-size
- 使用em時(shí)，當(dāng)字體發(fā)生改變時(shí)，em也會(huì)隨之改變
- 當(dāng)設(shè)置字體相關(guān)的樣式時(shí)，經(jīng)常會(huì)使用em
2 顏色單位
顏色單詞
在css找那個(gè)可以直接使用顏色單詞來表示顏色，比較麻煩
RGB值
所謂的RGB值指的是通過紅綠藍(lán)三原色
通過這三種顏色的不同濃度來表示出不同的顏色
語法：rgb(紅色的濃度，綠色的濃度，藍(lán)色的濃度)
顏色的濃度需要一個(gè)0-255之間的值表示，0最淺，255最深
濃度也可以通過百分比來設(shè)置，0-100%
十六進(jìn)制
- 原理與第二種方法
RGB值原理一樣 - 只不過使用十六進(jìn)制數(shù)來代替，使用三組兩位的十六進(jìn)制數(shù)組來表示一個(gè)顏色
- 語法：#第一組二位數(shù)字第二組二位數(shù)字第三組二位數(shù)字
- 00表示沒有，相當(dāng)于rgb的0
- ff表示最大。相當(dāng)于rgb的100
三、字體樣式
1 字體大小
-
font-siz:像素值，瀏覽器文字默認(rèn)大?。?6px -
font-size設(shè)置的并不是文字本身的大小，在頁面中，每個(gè)文字都是處在一個(gè)看不見的框中的，我們?cè)O(shè)置的font-size實(shí)際是設(shè)置格的高度，并不是字體的大小 - 一般情況下文字都要比這個(gè)格要小一些，也有時(shí)比格大，根據(jù)字體的不同，顯示效果也不同
2 文字字體
font-family:字體名字當(dāng)采用某種字體時(shí)，如果瀏覽器支持則使用該字體，不過字體不支持，則使用默認(rèn)字體
該樣式可以同時(shí)指定多個(gè)字體：
font-family:arial,微軟雅黑多個(gè)字體之間使用
,隔開當(dāng)采用多個(gè)字體時(shí)，瀏覽器會(huì)優(yōu)先使用前面的字體，如果前面沒有適合的再嘗試下一個(gè)
瀏覽器使用的字體默認(rèn)是計(jì)算機(jī)中的字體，如果計(jì)算機(jī)中有，則使用，沒有就不使用。
計(jì)算機(jī)中的字體存儲(chǔ)位置：
C:/Windows/Fonts-
字體分類
- serif：襯線字體
- sans-serif：非襯線字體
- monospace：等寬字體
- cursive：草書字體
- fantasy：虛幻字體
這些是字體的大分類，當(dāng)設(shè)置為這些分類后，瀏覽器會(huì)自動(dòng)選擇指定的字體并應(yīng)用樣式。
- 一般將字體的大分類指定為font-family中的最后一個(gè)字體
3 斜體
-
font-style
設(shè)置文字的斜體
值：
- normal：默認(rèn)值，文字正常顯示
- italic：斜體
- oblique：傾斜，與italic效果一樣
4 文字粗細(xì)
-
font-weight
設(shè)置文本的粗細(xì)
值：
- normal：正常
- bold：加粗
- bolder：更粗
- lighter：更細(xì)
- 100-900之間的九個(gè)值：
- 但是由于一般用戶計(jì)算機(jī)中沒有這么多級(jí)別的字體，所以不是每個(gè)數(shù)值都有對(duì)應(yīng)的粗細(xì)
4 小型大寫字母
-
font-variant
可以用來設(shè)置小型大寫字母
值：
- normal：默認(rèn)，正常顯示
- small-caps：文本以小型大寫字母顯示
5 font屬性
-
font
在css中還為我們提供了一個(gè)樣式叫font
- 使用該樣式可以同時(shí)設(shè)置字體相關(guān)的所有樣式
- 語法：
font: 樣式一 樣式二 樣式三 ... - 不同樣式之間用空格隔開
- 例：
font: italic small-caps bold 60px - 順序要求：斜體、加粗、大小字母沒有順序要求，甚至可寫可不寫；如果不寫則使用默認(rèn)值，但是要求文字的大小各字體必須寫，而且字體必須是最后一個(gè)樣式，大小必須是倒數(shù)第二個(gè)樣式
6 文字大小寫轉(zhuǎn)變
-
text-transform
-
設(shè)置文字大小寫
值：
- none：默認(rèn)值，不作任何處理
- capitalize：單詞首字母大寫，通過空格來識(shí)別空格
- uppercase：所有字母大寫
- lowercase：所有字母小寫
-
7 文本修飾
-
text-decoration
-
文本修飾，給文件添加效果
值：
- none：默認(rèn)值，不添加修飾
- underline：添加下劃線
- overline：添加上劃線
- line-through：添加刪除線
-
去除超鏈接默認(rèn)的下劃線
a元素的默認(rèn)text-decoration值為underline，因此會(huì)自帶下劃線
要想去除要設(shè)置其text-decoration：
a{text-decoration:none)
-
四、段落樣式
1 行間距
css中并沒有直接設(shè)置行間距的參數(shù)，我們只能通過設(shè)置行高line-height開簡介設(shè)置行間距，行高越大行間距就越大。
單倍行距：
p {
font-size:20px;
font-height:40px;
}
值：
- 像素大小
- 百分?jǐn)?shù)，相對(duì)于字體去設(shè)置行高，單倍行距：
font-height:200% - 整數(shù)：字體的倍數(shù)，單倍行距：
font-height:2
在font參數(shù)中也可以設(shè)置行高
-
語法：
`font: 字體大小/行高
2 字間距和詞間距
- letter-spacing
- 字間距
- word-spacing
- 詞間距
3 文本對(duì)齊
text-align
-
設(shè)置對(duì)齊方式
值：
- left：文本靠左對(duì)齊
- right：文本靠右對(duì)齊
- center：文本居中對(duì)齊
- justify：兩端對(duì)齊
4 首行縮進(jìn)
-
text-indent
縮進(jìn)兩字：
- text-indent:32px
- text-indent:2em，跟隨字體大小
也可以為負(fù)值：可以將一些不想顯示的文字顯示起來
