html5學習筆記 —— 二、文本類網頁設計

html5 中常用的文本標籤在這裏插入圖片描述

css的字體樣式屬性用於定義文本的字體系列、大小、風格等、***css常用自體樣式屬性***如下表:
在這裏插入圖片描述
font 屬性用於對字體樣式進行綜合設置,字體合寫語法如下:
在這裏插入圖片描述
[email protected]規則
—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;}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章