:使用CSS設置文本樣式-圖片素材模板推薦免费ppt模版下载-道格办公
投稿
  1. JustNews首頁
  2. 圖片素材模板推薦
  3. 使用CSS設置文本樣式

使用CSS設置文本樣式

作者: 道格資源 • • 圖片素材模板推薦 • 瀏覽量 749

使用CSS設置文本樣式可以通過字體樣式屬性來實現。下面是一些常見的CSS字體樣式屬性和它們的用法：1. 字體族（font-family）：用於設置文本的字體樣式。可以使用通用字體族名稱（如"serif"、"sans-serif"、"monospace"）或具體的字體名稱（如"Arial"、"Helvetica"）。例子：設置文本的字體為Arial。 ```css ```2. 字體大小（font-size）：用於設置文本的字體大小。可以使用絕對單位（如"px"、"pt"）或相對單位（如"em"、"

一、案例描述
1、 考核知識點
字體樣式屬性
2、 練習目標
Ø 掌握常見的CSS字體樣式屬性。
Ø 熟練運用CSS字體樣式屬性控製字體效果。
3、 需求分析
瀏覽網頁時會發現網頁中有各式各樣的字體，顏色也五顏六色。為了方便地控製網頁中的字體，CSS提供了一系列的字體樣式屬性，主要包括：font-size、font-family、font-weight、font-style、@font-face、word-wrap屬性。本案例通過使用以上屬性來控製字體的樣式，並對比不同的顯示效果。
4、 案例分析
1) 效果如圖3-9所示。

                   

圖3-1 CSS字體樣式屬性效果
2) 具體實現步驟如下：
a) 使用標記搭建頁面結構，並為每個標記定義不同的類。
b) 為第一個標記設置“微軟雅黑”字體、18像素、紅色、傾斜、加粗的的段落效果。
c) 為第二個<p>標記設置為服務器字體、24像素、藍色的段落效果。
二、案例實現
1、製作頁面結構
新建HTML頁面，具體代碼如下：
< code><!doctype html><html><head><meta charset< /span>='utf-8'> <title>CSS字體樣式屬性</ title></head><body><p class='part1'>我是設置為微軟雅黑、18像素、傾斜、加粗的紅色字體</p> <p class='part2' >我是使用@font-face屬性定義的服務器字體，顯示為24像素的藍色字體</ p></body></ html>

2、定義 CSS樣式

使用內嵌式CSS樣式表為頁面添加樣式，具體CSS代碼如下：

  • < li>
<style type='text/css'>@font-face{    font-family:ziti;           /*服務器字體名稱*/    src:url(font/FZJZJW.TTF);  /*服務器字體名稱*/  } .part1{ font-family:'微軟雅黑'; < span class='code-snippet_outer'>        font-size:18px;         color:red;         font-style:italic;         font-weight:bold;       }.part2{        font-family:ziti;     /*設置字體樣式*/< span class='code-snippet_outer'>     font-size:24px;     color:blue;      }</style< /span>>

保存後，在谷歌瀏覽器中預覽，效果如圖3-10所示。

圖3-1CSS字體樣式屬性效果

文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Styling%20text%20with%20CSS.html

贊 (810)
打賞 支付宝扫一扫 支付宝扫一扫
Lomu Real_c 專欄作者
48 196
single-end

相關推薦