EduCoder-Web程序设计基础-html5— CSS样式规则- 第2关:初识CSS

任务描述

本关任务:在指定标签中添加CSS样式。
效果如下:
css任务效果图

相关知识

为了完成本关任务,你需要掌握:在标签中添加CSS样式属性

在标签中添加CSS样式
在HTML标签中,使用style属性来添加CSS样式,其取值由属性和值组成,两者以冒号“:”分隔,多个属性之间用分号“;”分隔。
示例如下:
内联样式
常用的文本样式属性有:

color:设置文本的颜色
font-family:设置文本的字体
font-size:设置文本的字号大小
text-align:文本水平对齐方式
line-height:设置文本的行间距

编程要求

请在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
1.按照要求的效果在标签中运用CSS样式,编辑唐诗“静夜思”
2.标题文本“静夜思”采用

标签作用,标签中通过style属性为文本添加样式,添加顺序为:
(1)字体设置为楷体;
(2)文本水平居中对齐;
(3)行间距设置为2
3.四句诗的文本采用

标签作用,标签中通过style属性为文本添加样式,添加顺序为:
(1)字体设置为楷体;
(2)文本水平居中对齐。

测试说明

补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。

越努力越幸运,祝你成功!

代码示例

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>初识CSS样式</title>
  </head>
  <body>
   <div style="background-image:url(https://www.educoder.net/api/attachments/1426624);width:360px;height:260px;">
   
    <!-- ********* Begin ********* -->
        <h1 style="font-family:楷体;text-align:center;line-height:2;" >静夜思</h1>
        <h2 style="font-family:楷体;text-align:center;">床前明月光</h2>
           
         <h2 style="font-family:楷体;text-align:center;">疑是地上霜</h2>
         <h2 style="font-family:楷体;text-align:center;">举头望明月</h2>
         <h2 style="font-family:楷体;text-align:center;">低头思故乡</h2>
        
        
    <!-- ********* End ********* -->
    </div>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_51402180/article/details/121799672