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

今日學習內容

目錄

長度單位

? ? ? ? ?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的簡寫

字體分類

行間距

行高

文本樣式

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;

---

長度單位

? ? ? ? 1:像素 px

? ? ? ? ?屏幕上的一個個小點，正常情況下，我們看不到的，要放到最大

? ? ? ? ?也是最常用的長度單位

? ? ? ? 2:百分比 % ?

? ? ? ? ?設置的百分比，是父元素內容區長度的百分比，是相對單位

? ? ? ? 3、em

? ? ? ? ?相對單位，相對于當前元素的字體大小設置長度，若當前元素沒有設置字體大小，

? ? ? ? ?就會繼承祖先元素的字體大小，直到繼承html的默認字體大小，

? ? ? ? ?html默認的字體大小是16px

? ? ? ? ?也就是1em=1個font-size

? ? ? ? 4、rem ?

? ? ? ? ? 相對單位， 只相對于根元素根標簽的字體大小進行設置

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

? ? ? ? ? 多用于移動端的布局

顏色單位：

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

? ? ?只適用一些簡單的顏色

? 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:使用十六進制的rgb值來表示顏色，原理和上邊RGB原理一樣

? ? ? 0-9,abcdf

? ? ? ff ?相當于255 ?表示最大

? ? ? 00 ?相當于0 ? ?表示最小

? ? ? 如果兩兩重復，可以截取一位，例如：#ff0000,簡寫#f00

? 5:HSL值 ?HSLA值

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

字體樣式

1:color ?

設置字體顏色,也可以設置其他顏色

2:font-size? ?

字體大小設置

3:font-family? ? ?

可以指定文字的字體

4:@font-face? ?

可以使用自定義的字體

例

第一步：自定好字體 */

? ? ? @font-face {

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

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

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

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

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

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

5.font-style ?

設置文字斜體 ?

可選值

• ? ? ? ? ? ? ? ? ?normal ?默認值，正常顯示
• ? ? ? ? ? ? ? ? ?italic ?設置斜體
• ? ? ? ? ? ? ? ? ?oblique ?設置斜體（不常用）

6.font-weight

設置文字的加粗

可選值：

• ? ? ? ? ? ? ? ? bold ? 加粗
• ? ? ? ? ? ? ? ? bolder ?加粗
• ? ? ? ? ? ? ? ?100-900之間數值 ?100最細， 900最粗

7.font-variant

設置一個小型大寫字母 ?

可選值：

• ? ? ? ? ? ? ? ? normal ? ?默認值 ?正常顯示
• ? ? ? ? ? ? ? ? small-caps ? 設置小型大寫字母

?8.font的簡寫

? ? ? ? ?1、字體大小，字體必須要設置

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

? ? ? ? ?3、字體大小后可設置行高

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

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

字體分類

在網頁中將字體分成5大類：

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

? ? ? 可以將字體設置為這些大的分類,當設置為大的分類以后，

? ? ? 瀏覽器會自動選擇指定的字體并應用樣式

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

行間距

1，行高? 文字占有的實際高度

? ? ? ? line-height 設置行高

? ? ? ? ? ?可選值：

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

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

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

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

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

? ? ? ? ? ?上間距和下間距平分空白的區域

3、 font中也可以指定行高

文本樣式

1: text-transform

可以用來設置文本的大小寫

? ? 可選值：

• ? ? ? ?none ? 默認值，正常顯示
• ? ? ? ?capitalize ?首字母大寫
• ? ? ? ?lowercase ? 設置字母小寫
• ? ? ? ?uppercase ? 設置字母大寫

* 2: text-decoration ?

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

? ? ?可選值：

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

3: letter-spacing

可以指定字符間距

4: word-spacing

可以設置單詞之間的距離

* 5: text-align

用于設置文本的對齊方式

? ? 可選值：

• ? ? ? ?left ?默認值 ?靠左對齊
• ? ? ? ?right ?靠右對齊
• ? ? ? ?center ?居中對齊

注意：對行內標簽不起作用，需要轉換為塊標簽?

* 6: text-indent

設置首行縮進

? ? 一般常用單位是em

7: white-space:?

設置網頁如何處理空白

8: text-overflow(設置單行省略號)

文本溢出包含元素時發生的事情

?/* 設置單行文本省略號 */

? ? ? ? width: 300px;

? ? ? ? /* 設置文本不換行 */

? ? ? ? white-space: nowrap;

? ? ? ? /* 設置多余文本省略號的形式出現 */

? ? ? ? text-overflow: ellipsis;

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

? ? ? ? overflow: hidden;

* 9:vertical-align

?設置元素垂直對齊的方式

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

設置文本陰影

? ? ? ? 水平位移距離 ?必填 ?可正可負

? ? ? ? 垂直位移距離 ?必填 ?可正可負

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

? ? ? ? 陰影顏色 ? 可選 ?默認是字體的顏色

今日學習筆記到此結束

總結

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

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