IT課程 CSS基礎 022_文本、字體、鏈接

文本

CSS文本控制可以幫助我們更好地展示網頁中文本的信息，並提高網頁的視覺效果。

縮進

用於設置文本的首行縮進，適用於段落首行縮進的場景，避免在行內元素上使用。屬性可以接受絕對值或相對值，絕對值單位包括像素 (px)、英寸 (in)、厘米 (cm)、毫米 (mm) 等，相對值單位包括 em、rem、vw、vh 等。

示例：

1
p {
2
  text-indent: 2em;
3
}

效果：示例效果

書寫模式

CSS 中的書寫模式是指文本的排列方向，包括水平、垂直和混合模式。實際上設定的是頁面上塊級元素的顯示方向——要麼是從上到下，要麼是從右到左，要麼是從左到右。而這決定了文本的方向。

horizontal-tb: 塊流向從上至下。對應的文本方向是橫向的。
vertical-rl: 塊流向從右向左。對應的文本方向是縱向的。
vertical-lr: 塊流向從左向右。對應的文本方向是縱向的。

示例：

1
body {
2
  writing-mode: vertical-rl;
3
}

效果：示例效果當我們切換書寫模式時，我們也在改變塊和內聯文本的方向。horizontal-tb書寫模式下塊的方向是從上到下的橫向的，而 vertical-rl書寫模式下塊的方向是從右到左的縱向的。因此，塊維度指的總是塊在頁面書寫模式下的顯示方向。而內聯維度指的總是文本方向。

這張圖展示了在水平書寫模式下的兩種維度。

這張圖片展示了縱向書寫模式下的兩種維度。

文本方向

使用 direction 屬性設置文本的閱讀方向，從左到右（ltr）、從右到左（rtl）。適用於多語言網站，根據文本語言設定閱讀方向，有些語言（如阿拉伯語）是橫向書寫的，但是是從右向左。

示例：

1
html {
2
  direction: rtl;
3
}

效果：

示例效果

文本修飾

使用 text-decoration 屬性設置文本的劃線修飾效果。

none：無劃線
overline：上劃線
underline：下劃線
line-through：刪除線

示例：

1
<p style="text-decoration: none;">沒有文本劃線</p>
2
<p style="text-decoration: overline;">我有上劃線</p>
3
<p style="text-decoration: underline;">我有下劃線</p>
4
<p style="text-decoration: line-through;">我有刪除劃線</p>

效果：示例效果

文本對齊

設置文本的水平對齊方式。

left：文本左對齊，這是大多數語言中的默認值。
center：文本水平居中
right：文本右對齊
justify：文本兩端對齊，通過在每行之間增加額外的空白來填充。因文本排列和容器寬度（文本較短、缺少空格、行數過少、語言單一），在某些情況下，可能不容易看到兩端對齊的效果。
justify-all（不太常見）：類似於 justify，但不僅僅在行末增加額外空白，而是在行首和行末均勻分布。
start：視瀏覽器的文本方向而定，表示文本在起始端（通常是左端）對齊。
end：視瀏覽器的文本方向而定，表示文本在結束端（通常是右端）對齊。

示例：

1
<p style="text-align: left;">這段文本向左對齊</p>
2
<p style="text-align: right;">這段文本向右對齊</p>
3
<p style="text-align: center;">這段文本居中對齊</p>

效果：示例效果

行高

使用 line-height 屬性，可設置文本行與行之間的高度。根據字體大小和設計需求調整行高，可提高可讀性。

示例：

1
<p>這是普通行高 <br>這是普通行高</p>
2
<p style="line-height: 3;">看看這段話的行高 <br>看看這段話的行高</p>

效果：示例效果

間距

設置文本內容之間的間距。

letter-spacing 設置字母、中文、數字之間的間距。
word-spacing 設置單詞、詞語之間的間距（空格兩邊的字符）。

示例：

1
<p style="letter-spacing: 10px;">看看我的文本間距CSS</p>
2
<p style="word-spacing: 10px;">看看 我的文本間距 CSS 123</p>

效果：示例效果

換行

控制文本在換行時的方式。

word-wrap：主要用於控制長單詞或 URL 的換行方式，更適合使用英文的場景。

normal（默認值）：按照正常的換行規則，不允許在單詞內換行。
break-word：允許在單詞內換行，即可以強制將長單詞或 URL 換行顯示。

示例：

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    word-wrap: normal;
7
}
8
.example2{
9
    word-wrap: break-word;
10
}

1
    <p class="base example1">看看 我    怎麼換行 HelloCSS Hello-CSS</p>
2
    <p class="base example2">看看 我    怎麼換行 HelloCSS Hello-CSS</p>

效果：示例效果

white-space：用於控制元素內部空白字符的處理方式，包括空格、換行符等。

normal（默認值）：正常處理空白字符，合併連續的空白字符，並根據換行符進行換行。
nowrap：不允許文本換行，忽略換行符。
pre：保留空白字符，但不合併連續的空白字符，文本按照源代碼格式顯示。
pre-line：保留換行符，合併連續的空白字符，其他空白字符按照正常規則處理。
pre-wrap：保留空白字符，合併連續的空白字符，保留換行符。

示例：

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    white-space: normal;
7
}
8
.example2{
9
    white-space: nowrap;
10
}
11
.example3{
12
    white-space: pre;
13
}

1
    <p class="base example1">看看 我    怎麼換行 HelloCSS Hello-CSS</p>
2
    <p class="base example2">看看 我    怎麼換行 HelloCSS Hello-CSS</p>
3
    <p class="base example3">看看 我    怎麼換行 HelloCSS Hello-CSS</p>

效果：示例效果

陰影

可以為文本添加一個或多個（用逗號分隔）陰影效果，以增強文本的可讀性或創建獨特的設計效果。

h-shadow：水平陰影的位置。可以為正值（向右偏移）或負值（向左偏移）。
v-shadow：垂直陰影的位置。可以為正值（向下偏移）或負值（向上偏移）。
blur：可選。表示陰影的模糊程度，值越大越模糊。可以省略。
color：陰影的顏色。可以是具體的顏色值，也可以是關鍵字或 RGBA 值。

示例：

1
<p style="text-shadow: 2px 2px black;">看看我的陰影</p>
2
<p style="text-shadow: 1px 1px 1px red;">看看我的陰影</p>
3
<p style="text-shadow: 3px 3px 5px darkgrey;">看看我的陰影</p>
4
<p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">看看我的陰影</p>

效果：示例效果

轉換

用於控制文本的大小寫轉換效果。

none：默認值，保持文本的原始大小寫形式。
capitalize：將每個單詞的首字母轉換為大寫。
uppercase：將文本全部轉換為大寫。
lowercase：將文本全部轉換為小寫。

示例：

1
<p style="text-transform: none;">看看我是如何轉換的 hello CSS</p>
2
<p style="text-transform: capitalize;">看看我是如何轉換的 hello CSS</p>
3
<p style="text-transform: uppercase;">看看我是如何轉換的 hello CSS</p>
4
<p style="text-transform: lowercase;">看看我是如何轉換的 hello CSS</p>

效果：示例效果

文本溢出

在 CSS 中，可以使用 overflow 屬性來處理文本溢出。

visible：文本不會溢出，會完全顯示出來。
hidden：文本溢出時，會被隱藏。
scroll：文本溢出時，會顯示滾動條，用戶可以滾動文本來查看全部內容。
auto：文本溢出時，會根據元素的寬度和高度來決定是否顯示滾動條。

示例：

1
.base{
2
    white-space: nowrap;
3
    background: #d7d8d9;
4
    width: 120px;
5
}
6
.example1{
7
    overflow: visible;
8
}
9
.example2{
10
    overflow: hidden;
11
}
12
.example3{
13
    overflow: scroll;
14
}
15
.example4{
16
    overflow: auto;
17
}

1
    <p class="base example1">看看我的文本內容有沒有溢出</p>
2
    <p class="base example2">看看我的文本內容有沒有溢出</p>
3
    <p class="base example3">看看我的文本內容有沒有溢出</p>
4
    <p class="base example4">看看我的文本內容有沒有溢出</p>

效果：

示例效果

字體

如何控制和定義字體是網頁設計中重要的一部分。

字體系列

通過 font-family 屬性來定義字體。font-family 可以指定一個字體，建議提供多個備選字體，瀏覽器將會按照優先級逐個嘗試這些字體，直到找到合適的可用字體為止。如果字體名稱中包含空格、特殊字符或中文字符，建議使用引號括起來。可使用Web 字體服務，注意字體版權。

示例：

1
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p>
2
<p style="font-family: Gabriola; ">hello CSS hello CSS</p>

效果：

示例效果

大小

CSS 中字體大小可以使用 font-size 屬性來設置。用於設置文本字體的大小。字體大小可以使用絕對值或相對值來指定。使用絕對值時，字體大小的大小是固定的，不會隨著屏幕分辨率的變化而變化。絕對值單位包括：像素 (px)、英寸 (in)、厘米 (cm)、毫米 (mm) 等。使用相對值時，字體大小的大小是相對於父元素的字體大小的。相對值單位包括： em、rem、vw、vh 等。使用關鍵字指定字體大小，可以提高可讀性和一致性。關鍵字包括：xx-small、x-small、small、medium、large、x-large、xx-large。

示例：

1
body {
2
  font-size: 16px;
3
}

響應式設計：

字體大小在響應式設計中應該是相對的，以確保在不同屏幕尺寸和設備上都能提供良好的閱讀體驗。

無障礙性：

確保字體大小足夠大，以滿足無障礙性標準。建議在正文中使用至少 16px 的字體大小。

字體單位選擇：

使用相對單位（em、rem、%）可以更好地適應用戶瀏覽器中設置的字體大小偏好，增加網站的可訪問性。

行高設置：

根據字體大小適當設置行高，以提高文本的可讀性。通常，行高可以設置為字體大小的 1.4 到 1.6 倍。

粗細

CSS 中字體粗細可以使用 font-weight 屬性來設置。

normal: 默認字體粗細。
bold: 加粗字體。
bolder: 相對於父元素更粗的字體。
lighter: 相對於父元素更細的字體。
數字值：使用數字值來設置字體的粗細，數字值範圍通常從 100 到 900。

示例：

1
<div style="font-weight: normal;">默認字體粗細</div>
2

3
<div style="font-weight: bold;">
4
    加粗字體
5
    <div style="font-weight: bolder;">相對於父元素更粗的字體</div>
6
</div>
7

8
<div style="font-weight: 700;">
9
    使用數字值加粗的字體
10
    <div style="font-weight: lighter;">相對於父元素更細的字體</div>
11
</div>

效果：示例效果

樣式

CSS 中字體樣式可以使用 font-style 屬性來設置。

normal: 默認字體樣式。
italic: 斜體字體樣式，使用字體文件中專門設計的斜體效果。
oblique: 傾斜字體樣式，類似斜體，字體文件沒有專門設計的斜體效果，它能強制對正常字體進行傾斜變型。

示例：

1
<div style="font-style: normal;">默認字體樣式 123 ABC</div>
2
<div style="font-style: italic;">斜體樣式 123 ABC</div>
3
<div style="font-style: oblique;">傾斜樣式 123 ABC</div>

效果：示例效果

顏色

CSS 中字體顏色可以使用 color 屬性來設置。

預定義顏色名稱：例如，red、green、blue 等。
十六進制顏色值：例如，#FF0000、#00FF00、#0000FF 等。
RGB、RGBA 顏色值：例如，rgb(255, 0, 0)、rgba(0, 255, 0, 0.5) 等。
HSL、HSLA 顏色值：例如，hsl(0, 100%, 50%)、hsla(120, 100%, 50%, 0.7) 等。

示例：

1
<div style="color: blue;">字體顏色</div>
2
<div style="color: #ff6a00;">字體顏色</div>
3
<div style="color: rgba(0, 128, 0);">字體顏色</div>
4
<div style="color: rgba(0, 128, 0, 0.5);">字體顏色</div>
5
<div style="color: hsla(0, 100%, 50%);">字體顏色</div>
6
<div style="color: hsla(0, 100%, 50%, 0.7);">字體顏色</div>
7
<div style="color: transparent;">字體顏色</div>

效果：示例效果

鏈接

在 CSS 中，可以使用 color 屬性為鏈接（超鏈接）設置字體顏色。

設置鏈接顏色

a - 設置全局鏈接顏色
a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻

示例：

1
/* 全局鏈接 */
2
a {
3
  color: #3498db; /* 藍色 */
4
}
5

6
/* 未訪問的鏈接 */
7
a:link {
8
    color: #3498db; /* 藍色 */
9
}
10

11
/* 已訪問的鏈接 */
12
a:visited {
13
    color: #884dff; /* 紫色 */
14
}
15

16
/* 鼠標懸停時的鏈接 */
17
a:hover {
18
    color: #ff6600; /* 橙色 */
19
}
20

21
/* 鏈接被點擊時的顏色 */
22
a:active {
23
    color: #ff0000; /* 紅色 */
24
}

設置鏈接下劃線

示例：

1
a {
2
    text-decoration: none; /* 去掉下劃線 */
3
}
4

5
a:hover {
6
    text-decoration: underline; /* 鼠標懸停時顯示下劃線 */
7
}

文本

縮進

書寫模式

文本方向

文本修飾

文本對齊

行高

間距

換行

陰影

轉換

文本溢出

字體

字體系列

大小

粗細

樣式

顏色

鏈接

設置鏈接顏色

設置鏈接下劃線

評論