暑期实践——8.5

最新推荐文章于 2024-11-01 16:54:21 发布

YY__111

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/YY__111/article/details/132134694

版权

第7章使用CSS修饰网页元素

一、文本控制

font-family：设置字体的类别；

font-size：设置字体的大小；

font-weight：设置字体的粗细；

font-style：设置字体的倾斜；

color：设置文本的颜色；

background-color：设置文本的背景颜色；

text-decoration：设置添加到文本的修饰效果；

1、设置字体的类别

语法：

font-familiy：字体名称

案例1

<html>
<head>
<meta charset="utf-8">
<title>字体设置</title>
   <style type="text/css">
       h1{
           font-family: 黑体；
       }
       p{
           font-family: Arial,"Times New Roman";
       }
   </style>
</head>

<body>
   <h1>客服中心简介</h1>
   <p>欢迎进入光影世界客户服务中心！客服中心通过提高自身的品牌、形象、员工素质等综合服务水平，减少顾客消费的时间、费用、体力和经理，使顾客获得更高的价值。</p>
</body>
</html>

2、设置字体的尺寸

语法：

font-size：绝对尺寸 | 相对尺寸

案例2

<html>
<head>
<meta charset="utf-8">
<title>字体设置</title>
   <style type="text/css">
       h1{
           font-family: 黑体；
       }
       p{
           font-family: Arial,"Times New Roman";
           font-size: 16pt;
       }
   </style>
</head>

<body>
   <h1>客服中心简介</h1>
   <p>欢迎进入光影世界客户服务中心！客服中心通过提高自身的品牌、形象、员工素质等综合服务水平，减少顾客消费的时间、费用、体力和经理，使顾客获得更高的价值。</p>
</body>
</html>

3、设置字体的粗细

语法：

font-weight：bold | number | normal | lighter | 100-900

案例3

<html>
<head>
<meta charset="utf-8">
<title>字体设置</title>
   <style type="text/css">
       h1{
           font-family: 黑体；
       }
       p{
           font-family: Arial,"Times New Roman";
       }
       .one{
           font-weight: bold;
           font-size: 30px;
       }/*设置字体为粗体*/
       .two{
           font-weight: 400;
           font-size: 30px;
       }/*设置字体为400粗细*/
       .three{
           font-weight: 900;
           font-size: 30px;
       }/*设置字体为900粗细*/
   </style>
</head>

<body>
   <h1>客服中心简介</h1>
   <p>欢迎进入<span class="one">光影世界</span>客户服务中心！<span class="two">客服中心</span>通过提高自身的品牌、形象、员工素质等综合服务水平，减少<span class="three">顾客</span>消费的时间、费用、体力和经理，使顾客获得更高的价值。</p>
</body>
</html>

4、设置字体的倾斜

语法：

font-family：normal || italic || oblique

案例3

<html>
<head>
<meta charset="utf-8">
<title>字体设置</title>
   <style type="text/css">
       h1{
           font-family: 黑体；
       }
       p.italic{
           font-family: Arial,"Times New Roman";
           font-style: italic;
       }
   </style>
</head>

<body>
   <h1>客服中心简介</h1>
   <p class="italic">欢迎进入光影世界客户服务中心！客服中心通过提高自身的品牌、形象、员工素质等综合服务水平，减少顾客消费的时间、费用、体力和经理，使顾客获得更高的价值。</p>
</body>
</html>