忽而一劍金石碎，綠梢下，勿回首，天下無處不可游

今日學(xué)習(xí)內(nèi)容

目錄

長(zhǎng)度單位

? ? ? ? ?1:像素 px

2:百分比 % ?

3、em

4、rem ?

顏色單位：

字體樣式

1:color ?

2:font-size? ?

3:font-family? ? ?

4:@font-face? ?

5.font-style ?

6.font-weight

7.font-variant

8.font的簡(jiǎn)寫

字體分類

行間距

行高

文本樣式

1: text-transform

* 2: text-decoration ?

3: letter-spacing

4: word-spacing

* 5: text-align

* 6: text-indent

7: white-space:?

8: text-overflow

* 9:vertical-align

* 10: text-shadow: h-shadow v-shadow blur color;

---

長(zhǎng)度單位

? ? ? ? 1:像素 px

? ? ? ? ?屏幕上的一個(gè)個(gè)小點(diǎn)，正常情況下，我們看不到的，要放到最大

? ? ? ? ?也是最常用的長(zhǎng)度單位

? ? ? ? 2:百分比 % ?

? ? ? ? ?設(shè)置的百分比，是父元素內(nèi)容區(qū)長(zhǎng)度的百分比，是相對(duì)單位

? ? ? ? 3、em

? ? ? ? ?相對(duì)單位，相對(duì)于當(dāng)前元素的字體大小設(shè)置長(zhǎng)度，若當(dāng)前元素沒有設(shè)置字體大小，

? ? ? ? ?就會(huì)繼承祖先元素的字體大小，直到繼承html的默認(rèn)字體大小，

? ? ? ? ?html默認(rèn)的字體大小是16px

? ? ? ? ?也就是1em=1個(gè)font-size

? ? ? ? 4、rem ?

? ? ? ? ? 相對(duì)單位， 只相對(duì)于根元素根標(biāo)簽的字體大小進(jìn)行設(shè)置

? ? ? ? ? 也就是1rem=html的1個(gè)font-size，只能在html中修改

? ? ? ? ? 多用于移動(dòng)端的布局

顏色單位：

? 1:在CSS可以直接使用顏色的單詞來表示不同的顏色

? ? ?只適用一些簡(jiǎn)單的顏色

? 2:使用RGB值來表示不同的顏色

? ? R ?G ?B ?

? ? 0-255 ?

? ? 語法：rgb(red, green, blue)

? 3:RGBA

? ?語法：rgba(red, green, blue,a)

? ?透明度：0-1之間 ?

? ? rgba(red, green, blue,0) ?完全透明

? ? ?transparent ?完全透明 ?

? 4:使用十六進(jìn)制的rgb值來表示顏色，原理和上邊RGB原理一樣

? ? ? 0-9,abcdf

? ? ? ff ?相當(dāng)于255 ?表示最大

? ? ? 00 ?相當(dāng)于0 ? ?表示最小

? ? ? 如果兩兩重復(fù)，可以截取一位，例如：#ff0000,簡(jiǎn)寫#f00

? 5:HSL值 ?HSLA值

• ? ? 亮度
• ? ? 色相
• ? ? 飽和度
• ? ? 透明度

字體樣式

1:color ?

設(shè)置字體顏色,也可以設(shè)置其他顏色

2:font-size? ?

字體大小設(shè)置

3:font-family? ? ?

可以指定文字的字體

4:@font-face? ?

可以使用自定義的字體

例

第一步：自定好字體 */

? ? ? @font-face {

? ? ? ? /* 你給字體起的名字 */

? ? ? ? font-family: "meiyangyang";

? ? ? ? /* 引入字體的路徑 */

? ? ? ? src: url(./字體/ZCOOLKuaiLe-Regular.ttf);

?第二步：用自定義的字體 */

? ? ? ? font-family: 'meiyangyang';

5.font-style ?

設(shè)置文字斜體 ?

可選值

• ? ? ? ? ? ? ? ? ?normal ?默認(rèn)值，正常顯示
• ? ? ? ? ? ? ? ? ?italic ?設(shè)置斜體
• ? ? ? ? ? ? ? ? ?oblique ?設(shè)置斜體（不常用）

6.font-weight

設(shè)置文字的加粗

可選值：

• ? ? ? ? ? ? ? ? bold ? 加粗
• ? ? ? ? ? ? ? ? bolder ?加粗
• ? ? ? ? ? ? ? ?100-900之間數(shù)值 ?100最細(xì)， 900最粗

7.font-variant

設(shè)置一個(gè)小型大寫字母 ?

可選值：

• ? ? ? ? ? ? ? ? normal ? ?默認(rèn)值 ?正常顯示
• ? ? ? ? ? ? ? ? small-caps ? 設(shè)置小型大寫字母

?8.font的簡(jiǎn)寫

? ? ? ? ?1、字體大小，字體必須要設(shè)置

? ? ? ? ?2、字體大小必須在倒數(shù)第二位，字體必須在倒數(shù)第一位

? ? ? ? ?3、字體大小后可設(shè)置行高

? ? ? ? ? ?語法：字體大小/行高

? ? ? ? ? ?例：20px/40px

字體分類

在網(wǎng)頁中將字體分成5大類：

• ? ? ? ? ? serif ?['serif]（襯線字體）
• ? ? ? ? ? sans-serif（非襯線字體）
• ? ? ? ? ? monospace （等寬字體）
• ? ? ? ? ? cursive ['k?:siv]（草書字體）
• ? ? ? ? ? fantasy ?['f?nt?si]（虛幻字體）

? ? ? 可以將字體設(shè)置為這些大的分類,當(dāng)設(shè)置為大的分類以后，

? ? ? 瀏覽器會(huì)自動(dòng)選擇指定的字體并應(yīng)用樣式

? ? ? 一般會(huì)將字體的大分類，指定為font-family中的最后一個(gè)字體 ,用來兜底

行間距

1，行高? 文字占有的實(shí)際高度

? ? ? ? line-height 設(shè)置行高

? ? ? ? ? ?可選值：

? ? ? ? ? ? ?a：直接跟大小 ? 例如40px ?50px

? ? ? ? ? ? ?b：直接跟數(shù)值，是字體大小的倍數(shù) ? ?例如1，2，3，4，

? ? ? ? ? ? ?c：可以跟百分比，是字體大小的百分比 ?

2、單行文本在父元素中垂直居中

? ? ? ? ?行高=上間距+字體大小+下間距

? ? ? ? ? ?上間距和下間距平分空白的區(qū)域

3、 font中也可以指定行高

文本樣式

1: text-transform

可以用來設(shè)置文本的大小寫

? ? 可選值：

• ? ? ? ?none ? 默認(rèn)值，正常顯示
• ? ? ? ?capitalize ?首字母大寫
• ? ? ? ?lowercase ? 設(shè)置字母小寫
• ? ? ? ?uppercase ? 設(shè)置字母大寫

* 2: text-decoration ?

[d?k?'re??(?)n] 可以用來設(shè)置文本的修飾

? ? ?可選值：

• ? ? ? ? none ?默認(rèn)值 正常顯示
• ? ? ? ? underline ?下劃線
• ? ? ? ? overline ? 上劃線
• ? ? ? ? line-through ?刪除線

3: letter-spacing

可以指定字符間距

4: word-spacing

可以設(shè)置單詞之間的距離

* 5: text-align

用于設(shè)置文本的對(duì)齊方式

? ? 可選值：

• ? ? ? ?left ?默認(rèn)值 ?靠左對(duì)齊
• ? ? ? ?right ?靠右對(duì)齊
• ? ? ? ?center ?居中對(duì)齊

注意：對(duì)行內(nèi)標(biāo)簽不起作用，需要轉(zhuǎn)換為塊標(biāo)簽?

* 6: text-indent

設(shè)置首行縮進(jìn)

? ? 一般常用單位是em

7: white-space:?

設(shè)置網(wǎng)頁如何處理空白

8: text-overflow(設(shè)置單行省略號(hào))

文本溢出包含元素時(shí)發(fā)生的事情

?/* 設(shè)置單行文本省略號(hào) */

? ? ? ? width: 300px;

? ? ? ? /* 設(shè)置文本不換行 */

? ? ? ? white-space: nowrap;

? ? ? ? /* 設(shè)置多余文本省略號(hào)的形式出現(xiàn) */

? ? ? ? text-overflow: ellipsis;

? ? ? ? /* 裁剪多余的 */

? ? ? ? overflow: hidden;

* 9:vertical-align

?設(shè)置元素垂直對(duì)齊的方式

* 10: text-shadow: h-shadow v-shadow blur color;

設(shè)置文本陰影

? ? ? ? 水平位移距離 ?必填 ?可正可負(fù)

? ? ? ? 垂直位移距離 ?必填 ?可正可負(fù)

? ? ? ? 模糊半徑 ? 可選 ?

? ? ? ? 陰影顏色 ? 可選 ?默認(rèn)是字體的顏色

今日學(xué)習(xí)筆記到此結(jié)束

總結(jié)

以上是生活随笔為你收集整理的前端剑法第三式————碎岩的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。