:使用CSS设置文本样式-图片素材模板推荐免费ppt模版下载-道格办公
投稿
  1. JustNews首页
  2. 图片素材模板推荐
  3. 使用CSS设置文本样式

使用CSS设置文本样式

作者: 道格办公 • • 图片素材模板推荐 • 浏览量 750

使用CSS设置文本样式可以通过字体样式属性来实现。下面是一些常见的CSS字体样式属性和它们的用法： 1. 字体族（font-family）：用于设置文本的字体样式。可以使用通用字体族名称（如"serif"、"sans-serif"、"monospace"）或具体的字体名称（如"Arial"、"Helvetica"）。 例子：设置文本的字体为Arial。 ```css font-family: Arial, sans-serif; ``` 2. 字体大小（font-size）：用

一、案例描述
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页面，具体代码如下：
<!doctype html><html><head><meta charset='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代码如下：

<style type='text/css'>@font-face{    font-family:ziti;           /*服务器字体名称*/    src:url(font/FZJZJW.TTF);  /*服务器字体名称*/  }.part1{        font-family:'微软雅黑';         font-size:18px;         color:red;         font-style:italic;         font-weight:bold;       }.part2{        font-family:ziti;     /*设置字体样式*/     font-size:24px;     color:blue;      }</style>

保存后，在谷歌浏览器中预览，效果如图3-10所示。

图3-1CSS字体样式属性效果

文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/Styling%20text%20with%20CSS.html

赞 (810)
打赏 支付宝扫一扫 支付宝扫一扫
Lomu Real_c 专栏作者
48 196
single-end

相关推荐