html5 中常用的文本標籤![在這裏插入圖片描述]()
css的字體樣式屬性用於定義文本的字體系列、大小、風格等、***css常用自體樣式屬性***如下表：
font 屬性用於對字體樣式進行綜合設置，字體合寫語法如下：
css3@font-face規則
—font-face是css3 的新特性，用於定義服務器字體。通過@font-face規則，開發者便可以使用用戶計算機未安裝的字體。
—@font-face 規則的語法格式如下：
**YourWebFontName:**自定義的字體名稱，最好使用下載的默認字體（x我愛在回來的字體叫什麼字體，這裏就填什麼字體名）
source：此值指的是自定義的字體的存放路徑，可以是相對路徑，也可以是絕對路徑。
**format:**此值指的是自定義的字體格式，主要用來幫助瀏覽器識別，其值中要有一下幾種類型：truetype、opentype、truetype-aat、embedded-opentype、svg等；
css文本外觀屬性
—css的文本外觀屬性用於設計顏色、字間距、字母間距、水平對齊、文本裝飾、陰影等。
1.color (文本顏色）：
- red,green ,blue :預定義的顏色值
- ff0000,#ff6600,@29d672:十六進制顏色值，也是最常用定義顏色的方式
- rgba(255,0,0,0.5): r:紅色值 ；g :綠色值; b:藍色值, rgb的取值可以試試正整數也可以是百分數：a:透明度，取值0~1之間。
2.letter-spacing：字間距用於定義字符與字符間的空白
- normal:normal爲默認值
- 0.5em
- 30px
-注：其屬性值可爲不同單位的數值，允許使用負值
3.word-spacing（單詞間距） 用於增加或減少單詞見得空白（即字間隔）
- normal:normal爲默認值
- 0.5em
- 30px
-注：其屬性值可爲不同單位的數值，允許使用負值
4.line-height（行間距） 用於定義行與行之間的距離
- 5px
- 3em
- 150%
- 屬性值的單位有三種，分別爲像素px，相對值em和百分比%，實際工作中使用最多的是像素
5.text-transform(英文文本轉換)
- none:不轉換（默認值）
- capitalize:首字母大寫
- uppercase：全部字符轉換爲大寫
- lowercase:全部字符轉換爲小寫
6.text-decoration(文本裝飾)
- none:沒有裝飾（默認值）
- underline:設置文本下劃線
- overline：設置文本上劃線
- line-through:設置文本刪除線
7.text-align（水平對齊方式）
- left：左對齊（默認值）
- right：右對齊
- center：居中對齊
8.text-indent(首行縮進)
- 2em
- 50px
- 30%
- 用於設置首行文本縮進，其屬性值可謂不同單位的數值、em字符寬度的倍數、或相對於瀏覽器寬口寬度的百分比%，允許使用負值，建議使用em作爲設置單位。
9.white-space(空白符處理）
- normal:常規（默認值），文本中的空格、空行無效，滿行（到達區域邊界）後自動換行
- pre 預格式化，按文檔的書寫格式保留空格、空行原樣顯示。
- nowrap:合併所有空白符爲一個空白符，強制文本不能換行，除非遇到換行標記
.內容超出元素的邊界也不換行。若超出瀏覽器的頁面則會自動增加滾動條。
10.text-overflow(標示對象溢出文本）
- clip:修剪溢出文本，不顯示省略標記“…”
- ellipsis：用省略標記"…"標示被修剪文本，省略標記插入的位置是最後一個字符。需要結合overflow:hidden使用
text-shadow爲文本添加陰影效果
css層疊性、繼承性和重要性
CSS層疊性
就是在HTML文件中對於同一個標籤元素可以有多個CSS樣式存在，當有相同權重的樣式存在時，會根據這些CSS樣式的前後順序來決定，處於最後面的CSS樣式會被應用，示例代碼如下:
css的繼承性
其實CSS中的某些樣式是具有繼承性的，它允許樣式不僅應用於某個特定HTML標籤，而且應用於其後代。CSS繼承性的示例代碼如下所示:
<style>
p{color:pink;}
</style>
<p>小紅是一個<span>膽小如 鼠</span>的女孩。</p>
p標籤設置爲粉色，“膽小如鼠”四個字也爲粉色的原因是
標籤的顏色設置被它的後代標籤繼承了。
css重要性
在某個樣式設置後面添加！important 代表該樣式具有最高權值，！imortant 要寫在分號“；”的前面。
示例代碼：
<style>
p{color:red !important;}
p{color:green;}
</style>
<p>小紅是一個膽小如虎的女孩</p>
注：“小紅是一個膽小如虎的女孩”應顯示爲紅色
css優先級
1.樣式優先級
-
CSS優先級即是指CSS樣式在瀏覽器中被解析的權重不同。
-
多重樣式( Multiple Styles) :如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素,就是使多重樣式的情況。一般情況下,優先級如下所示:
-
![在這裏插入圖片描述]()
2.選擇器的優先級 -
css選擇器的優先級如下所示。
-
![在這裏插入圖片描述]()
web字體圖標
應用步驟：
1.在頁面引入font-awesome.min.css文件
2.爲頁面元素添加相應的class，例如“”,會在頁面顯示如下圖所示的圖標
3.每個圖標都有對應的class，可到 https://fontawesome.dashgame.com/ 查看相關的圖標
鏈接屬性
- 在實際開發中連接有四種狀態，具體如下：
- 1.a: link:超鏈接的初始狀態。
- 2.a:hover：把鼠標放上去時懸停的狀態。
- 3.a:active：鼠標點擊時
- 4.a:visited：是訪問過後的狀態
改變超鏈接的示例代碼如下：
/*對全站有鏈接的文字顏色樣式爲color:#33;並無下劃線*/
a{color:#333;text-decoration:none; }
/*對鼠標放到超鏈接上文字顏色樣式變爲color:#CC3300 並文字鏈接加下劃線text decoration:underline;*/
a:hover {color:#CC3300;text-decoration:underline;}