HTML+CSS之CSS格式化排版 (7)

最新推荐文章于 2023-02-28 14:25:48 发布

VIP文章 4K_WarCraft

最新推荐文章于 2023-02-28 14:25:48 发布

阅读量1.1k

点赞数 1

分类专栏：四、前端学习

本文链接：https://blog.csdn.net/w369033345/article/details/53643350

版权

摘要：本文继续学习CSS格式化排版的相关知识。

1 文字排版--字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:"Microsoft Yahei";}

或

body{font-family:"微软雅黑";}

注意：第一种方法比第二种方法兼容性更好一些。

因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。

[html]view plaincopy 
   
print?
 <!DOCTYPE HTML>  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
 <title>认识html标签</title>  
 <style type="text/css">  
 body{font-family:"Microsoft Yahei";}/*设置字体为“微软雅黑”*/  
   
 </style>  
 </head>  
 <body>  
     <h1>勇气</h1>  
     <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>  
     <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>  
 </body>  
 </html>  

2 文字排版--字号、颜色

可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：

body{font-size:12px;color:#666}

[html]view plaincopy 
   
print?
 <!DOCTYPE HTML>  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
 <title>字号、颜色</title>  
 <style type="text/css">  
 body{font-size:12px;color:#666;}  
 .stress{font-size:20px;color:red;}  
 </style>  
 </head>  
 <body>  
     <h1>勇气</h1>  
     <p>三年级时，我还是一个<span class="stress">胆小如鼠</

最低0.47元/天解锁文章

4K_WarCraft

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS之CSS格式化排版 (7)

摘要：本文继续学习CSS格式化排版的相关知识。1 文字排版--字体我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。body{font-family:"宋体";}这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为
复制链接

扫一扫