學習筆記，僅供參考，有錯必糾
文章目錄
CSS
文本外觀屬性
color:文本顏色
color屬性用於定義文本的顏色，其取值方式有如下3種：
- 預定義的顏色值，如red, green, blue等
- 十六進制，如#FFFFFF, #29D794等
- RGB代碼，如rgb(255, 0, 0)或rgb(100%, 0%, 0%)
letter-spacing
letter-spacing屬性可以增加或減少字符間的空白（字符間距），其屬性值可爲不同單位的數值，允許使用負值，默認爲normal，例如：
p { letter-spacing: 5px; }
h2 { letter-spacing: -3px; }
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本佈局</title>
<style>
.datam {
/*可以控制字符的間距， 中文一個漢字就代表一個字符，英文一個字母代表一個字符*/
letter-spacing: 10px;
}
</style>
</head>
<body>
<p class="datam">
數據挖掘是指從大量的數據中通過算法搜索隱藏於其中信息的過程。數據挖掘通常與計算機科學有關，並通過統計、在線分析處理、情報檢索、機器學習、專家系統
</p>
<p>
數據挖掘是指從大量的數據中通過算法搜索隱藏於其中信息的過程。數據挖掘通常與計算機科學有關，並通過統計、在線分析處理、情報檢索、機器學習、專家系統
</p>
</body>
</html>
頁面：
word-spacing
word-spacing屬性增加或減少英文單詞之間的間隔，對中文字符無效。和letter-spacing類似，其屬性值可爲不同單位的數值，允許使用負值，默認爲normal，例如：
p { word-spacing:30px; }
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本佈局</title>
<style>
.datam {
word-spacing: 20px;
}
</style>
</head>
<body>
<p class="datam">
Anhui University of Finance and Economics
</p>
<p>
Anhui University of Finance and Economics
</p>
</body>
</html>
頁面：
- 注意事項
雖然該屬性對中文字符無效，但是如果中文字符之間有空格，它會把中文字符當成單詞，依然放大中文字符之間的間距，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本佈局</title>
<style>
.datam {
word-spacing: 20px;
}
</style>
</head>
<body>
<p class="datam">
安徽 財經 大學
</p>
<p>
安徽 財經 大學
</p>
</body>
</html>
頁面：
line-height
line-height屬性用於設置行間距，也就是行與行之間的距離，即字符的垂直間距。line-height常用的屬性值單位有3種，分別爲像素px, 相對值em和百分比%，實際工作中使用最多的是像素px，例如：
p { line-height:90%; }
行高也可以在font屬性中和字體大小寫在一起：
p { font: 20px/1.5em "黑體"; }
上面的一段CSS代碼表示字體大小爲20px，行高爲30px(1.5*20px)，它和下面這段CSS代碼顯示的效果是一樣的：
p { font: 20px/150% "黑體"; }
- 行高是啥？
行高即2個0.5倍行距加上文字頂部到文字底部的距離，圖示：
- CSS中的行高是啥？
按照CSS中的定義，行高就是兩行文本基線之間的距離，即2個0.5倍行距加上文字頂部到文字底部的距離，它與前面我們定義的行高的含義是等同的，圖示：
- 行高示例
如果我們定義行高爲100px，文本大小爲20px，那麼它在頁面中應該是這樣呈現的：
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style>
* {
padding: 0; margin: 0;
/* 內邊距和外邊距設置爲0 */
}
p.demo {
height: 100px;
/*高度設置爲100px*/
line-height: 100px;
/*行高設爲100px*/
text-align: center;
/*文字橫向居中*/
font-size: 40px;
background-color: silver;
}
.wrap {
font: 16px "黑體";
background-color: green;
}
.wrap p {
background-color: red;
font: 20px/1.5em "宋體";
/* 此時行高是：30px= 20*1.5 */
}
</style>
</head>
<body>
<p class="demo">
ARE YOU OK?
</p>
<div class="wrap">
<div>我是父div的文本內容</div>
<p>
我是子段落標籤的文本
</p>
我是父div的文本內容
</div>
</body>
</html>
頁面：
test-decoration
test-decoration屬性用於設置文本的下劃線，上劃線，刪除線等裝飾效果，test-decoration後可以賦多個值，用於給文本添加多種顯示效果。
- 屬性值
- none
- underline
- overline
- line-through
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本裝飾</title>
<style>
.txt-underline {
text-decoration: underline;
}
a {
text-decoration: none;
}
.txt-linethrough {
text-decoration: line-through;
}
#top-line {
text-decoration: overline;
}
</style>
</head>
<body>
<div>
<a href="#">我是超級鏈接</a>
<span class="txt-underline">
我是下劃線
</span>
<span class="txt-linethrough">
我是刪除線
</span>
<span id="top-line">
我是頂線
</span>
</div>
</body>
</html>
頁面：
text-align
text-align屬性用於設置文本內容的水平對齊方式。
- 屬性值
- left(左對齊)
- right(右對齊)
- center(居中對齊)
text-indent
text-indent屬性用於設置段落首行文本的縮進，只能設置於塊級標籤。其屬性值可爲px、em、百分比%等等，允許使用負值，建議使用em作爲設置單位，例如：
p { text-indent: 50px; }
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首行縮進</title>
<style>
h1 {
text-indent: -9999px;
/*一般用於 網站的h1標題logo的seo的優化*/
}
p {
text-indent: 2em;
/*首行縮進*/
}
</style>
</head>
<body>
<h1><a href="#">我是logo</a></h1>
<p>
需要是發明之母。近年來，數據挖掘引起了信息產業界的極大關注，其主要原因是存在大量數據，可以廣泛使用，並且迫切需要將這些數據轉換成有用的信息和知識。獲取的信息和知識可以廣泛用於各種應用，包括商務管理，生產控制，市場分析，工程設計和科學探索等
</p>
<p>
數據挖掘是通過分析每個數據，從大量數據中尋找其規律的技術，主要有數據準備、規律尋找和規律表示三個步驟。數據準備是從相關的數據源中選取所需的數據並整合成用於數據挖掘的數據集；規律尋找是用某種方法將數據集所含的規律找出來；規律表示是儘可能以用戶可理解的方式（如可視化）將找出的規律表示出來。數據挖掘的任務有關聯分析、聚類分析、分類分析、異常分析、特異羣組分析和演變分析等。
</p>
</body>
</html>
頁面：
我們再看一下，沒有設置text-indent屬性值爲-9999px時的頁面：
white-space
使用HTML製作網頁時，不論源代碼中有多少空格，在瀏覽器中只會顯示一個字符的空白。在CSS中，使用white-space屬性，可以設置空白符的處理方式。
- 屬性值
- normal(常規，文本中的空格、空行無效，滿行或到達區域邊界後自動換行)
- pre(預格式化，按文檔的書寫格式保留空格、空行原樣顯示。)
- nowrap(空格空行無效，強制文本不能換行，除非遇到換行標記
<br>，內容超出元素的邊界也不換行，若超出瀏覽器頁面則會自動增加滾動條 )
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本空白符處理</title>
<style>
div {
background-color: green;
height: 200px;
width: 200px;
border: 1px solid red;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
</style>
</head>
<body>
<div class="normal">
normal：
數據挖掘是通過分析每個數據，
從大量數據中尋找其規律的技術，
主要有數據準備、規律尋找和規律表示三個步驟。
</div>
<div class="nowrap">
nowrap:
數據挖掘是通過分析每個數據，
從大量數據中尋找其規律的技術，
主要有數據準備、規律尋找和規律表示三個步驟。
</div>
<div class="pre">
pre:
數據挖掘是通過分析每個數據，
從大量數據中尋找其規律的技術，
主要有數據準備、規律尋找和規律表示三個步驟。
</div>
</body>
</html>
頁面：
word-break
word-break屬性會指定非CJK腳本的斷行規則，CJK腳本是中國，日本和韓國（“中日韓”）腳本。
- 屬性值
- normal(使用瀏覽器默認的換行規則，不允許在單詞內換行)
- break-all(允許在單詞內換行)
- keep-all(只能在半角空格或連字符處換行)
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>換行</title>
<style>
div {
background-color: green;
height: 150px;
width: 150px;
border: 1px solid red;
}
.break-all {
word-break: break-all;
}
.keep-all {
word-break: keep-all;
}
</style>
</head>
<body>
<div class="normal">
normal：
This is the student office of Anhui University of Finance and economics OKOKOKOKOKOKOKOKOK
</div>
<div class="break-all">
break-all:
This is the student office of Anhui University of Finance and economics OKOKOKOKOKOKOKOKOK
</div>
<div class="keep-all">
keep-all:
This is the student office of Anhui University of Finance and economics OKOKOKOKOKOKOKOKOK
</div>
</body>
</html>
頁面：
