Web(六)CSS3语法-文本外观样式

野性酷女 2023-09-30 17:21 124阅读 0赞

## 第1关：文本外观样式相关的概念 ##

![44c808643ab6435096760ce25064d7f1.png][]

##    第2关：CSS-文本空间的设置 ##

具体要求

1.补充p标签样式，将标签内文字首行缩进为2em，行高设置为28px

2.补充类名为blue的样式，将对应文字的颜色添加下划线的效果。

<!doctype html>
 <html><head>
 <meta charset="utf-8">
 <title>美食专题栏目</title>
 
 <style type="text/css">
 p{ 
 	font-size:16px;
 	font-family:微软雅黑;
 	text-indent:2em;
 line-height:28px;
 
 
 
 	}
 .blue{color:#33F;
 class:blue;
 text-decoration:underline;
 
 }
 .red{color:#F00;}
 .money{font-size:16px;}
 
 </style>
 
 </head>
 <body>
 <img src="https://data.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" />
 
 
 	导语：臭豆腐是长沙有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...【详情】
 
 
 	火宫殿臭豆腐：价格18元
 
 
 </body>
 </html>

## 第3关：搜索页面的结构设计 ##

具体要求

1.给标签`<h2>`添加类名为header的属性

2.对文本“—CSS教程”使用``标签作用，不设置类名

3.对第一个`...`中的文本“CSS”使用``标签作用，其类名设置为"red"

4.对第二个`...`中的文本“[www.dreamdu.com/css/wh...”使用\`][www.dreamdu.com_css_wh...]\`标签作用，其类名设置为"green"

5.对第二个`...`中的文本“百度快照”使用``标签作用，其类名设置为"gray"

6.对第二个`...`中的文本“85%好评”使用``标签作用，其类名设置为"gray"

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>搜索页面</title>
 </head>
 <body>
 
 <h2 class="header">
 	什么是CSS?—CSS教程
 </h2>
 
 猴子提示: 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是CSS了,现在就开始学习CSS吧 ...
 
 
 	www.dreamdu.com/css/wh...百度快照85%好评
 
 
 </body>
 </html>

## 第4关：搜索页面的样式设计-文本外观样式的应用 ##

具体要求

1.设置body标签样式，将标签内文字的字号大小设置为14px，文字的颜色值设置为\#333，字体设置为"微软雅黑"

2.设置em标签样式，将标签内文字的字体风格font-style设置为normal

3.设置类名为header的样式，将对应文字的字号大小设置为18px，文字的颜色值设置为\#D52D2D，字体粗细font-weight设置为normal，并对文字添加下划线效果

4.运用后代选择器对h2标签中em标签的文本设置样式，将对应文字的颜色值设置为\#2525D3，并对文字添加下划线效果

5.设置类名为red的样式，将对应文字的颜色值设置为\#D52D2D

6.设置类名为green的样式，将对应文字的颜色值设置为\#167A16

7.设置类名为gray的样式，将对应文字的颜色值设置为\#595959，并对文字添加下划线效果。

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>搜索页面</title>
 
 <style type="text/css">
 body{
 font-size:14px;
 color:#333;
 font-family:微软雅黑;
 } 
 em{
 font-style:normal;
 } 
 .header{ 
 	font-size:18px;
 color:#D52D2D;
 font-weight:normal;
 text-decoration:underline;
 }
 .header em{ 
 	color:#2525D3;
 text-decoration:underline;
 }
 .red{
 color:#D52D2D;
 }
 .green{
 color:#167A16;
 }
 .gray{
 color:#595959;
 text-decoration:underline;
 	
 	
 }
 
 </style>
 
 </head>
 <body>
 <h2 class="header">
 	什么是CSS?—CSS教程
 </h2>
 
 猴子提示: 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是CSS了,现在就开始学习CSS吧 ...
 
 
 	www.dreamdu.com/css/wh...-百度快照-85%好评
 
 </body>
 </html>

[44c808643ab6435096760ce25064d7f1.png]: https://img-blog.csdnimg.cn/44c808643ab6435096760ce25064d7f1.png
[www.dreamdu.com_css_wh...]: http://www.dreamdu.com/css/wh...%E2%80%9D%E4%BD%BF%E7%94%A8%60