天學習下css文本幾個常用相關屬性，包括文本顏色（color）這個是非常常見的、文本間距（這里主要指letter-spacing和word-spacing）、文本對齊（text-align）以及文本修飾（text-decoration），以下是相應的CSS和HTML代碼示例。

1. 文本顏色（color）

使用color屬性可以設置文本的顏色。顏色值可以是顏色名（如red）、十六進制（如#FF0000）、RGB（如rgb(255, 0, 0)）、RGBA（如rgba(255, 0, 0, 0.5)）、HSL或HSLA等。

HTML:

<p class="text-color">這是一段紅色文本。</p>

CSS:

.text-color {
color: red; /* 或者使用其他顏色值，如 #FF0000, rgb(255, 0, 0) 等 */
}

2. 文本間距

• 字母間距（letter-spacing）：設置文本中字母之間的間距。
• 單詞間距（word-spacing）：設置文本中單詞之間的間距。

HTML:

<p class="letter-spacing">這是一個字母間距示例。</p>
<p class="word-spacing">這是 一個單詞間距 示例。</p>

CSS:

.letter-spacing {
letter-spacing: 2px; /* 字母間距增加2px */
}

.word-spacing {
word-spacing: 5px; /* 單詞間距增加5px */
}

3. 文本對齊（text-align）

使用text-align屬性可以設置文本的對齊方式，如左對齊（left）、右對齊（right）、居中對齊（center）或兩端對齊（justify）。

HTML:

<p class="text-left">左對齊文本。</p>
<p class="text-center">居中對齊文本。</p>
<p class="text-right">右對齊文本。</p>
<p class="text-justify">兩端對齊文本。這是一個較長的句子，用于展示兩端對齊的效果。</p>

CSS:

.text-left {
text-align: left;
}

.text-center {
text-align: center;
}

.text-right {
text-align: right;
}

.text-justify {
text-align: justify;
}

4. 文本修飾（text-decoration）

text-decoration屬性用于設置文本的裝飾線，如下劃線（underline）、上劃線（overline）、刪除線（line-through）或無裝飾線（none）。

HTML:

<p class="underline">下劃線文本。</p>
<p class="overline">上劃線文本。</p>
<p class="line-through">刪除線文本。</p>
<p class="no-decoration">無裝飾線文本。</p>

CSS:

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

.line-through {
text-decoration: line-through;
}

.no-decoration {
text-decoration: none;
}

以上就是關于CSS中文本相關屬性的詳細解釋及代碼示例。

演示效果

TML全局屬性是所有HTML元素共有的屬性。它們可以應用于所有元素，盡管它們可能對某些元素沒有影響。

HTML屬性

HTML元素可以設置屬性

屬性可以在元素中添加附加信息

屬性一般描述于開始標簽

屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性和屬性值對大小寫不敏感。不過，萬維網聯盟在其HTML4推薦標準中推薦小寫的屬性/屬性值。而新版本的(X)HTML要求使用小寫屬性。

大多數HTML元素支持的屬性：

class：為html元素定義一個或多個類名（classname）(類名從樣式文件引入)

id：定義元素的唯一id

style：規定元素的行內樣式（inlinestyle）

title：描述了元素的額外信息(作為工具條使用)

HTML超鏈接及其屬性

HTML使用標簽<a>來設置超文本鏈接。超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。默認情況下，鏈接將以以下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。

訪問過的鏈接顯示為紫色并帶有下劃線。

點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

如果為這些超鏈接設置了CSS樣式，展示樣式會根據CSS的設定而顯示。

在標簽<a>中使用了href屬性來描述鏈接的地址。

實例

<a href="https://www.kaikeba.com/">訪問開課吧</a>1復制代碼類型：[html]

上面這行代碼顯示為：訪問開課吧

點擊這個超鏈接會把用戶帶到開課吧的首頁。

使用target屬性，你可以定義被鏈接的文檔在何處顯示。

實例

<ahref="https://www.kaikeba.com/"target="_blank">訪問開課吧</a>  

target="_blank":在新窗口中打開被鏈接文檔。  

target="_self":	默認，在相同的框架中打開被鏈接文檔。  

target="_parent":在父框架集中打開被鏈接文檔。  

target="_top":	在整個窗口中打開被鏈接文檔。  

target=framename:在指定的框架中打開被鏈接文檔。  1234567891011復制代碼類型：[html]

HTML圖像標簽及其屬性

在HTML中，圖像由<img>標簽定義。<img>是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。

要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

定義圖像的語法是：

<imgsrc="url"alt="some_text">  1復制代碼類型：[html]

URL指存儲圖像的位置。

alt屬性用來為圖像定義一串預備的可替換的文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

height（高度）與width（寬度）屬性用于設置圖像的高度與寬度。屬性值默認單位為像素。

<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120">  1復制代碼類型：[html]

提示:指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。

開課吧廣場-人才學習交流平臺