Web(六)CSS3语法-CSS样式规则

news2025/10/31 16:58:28

第1关：CSS基础知识

第2关：初识CSS

编程要求

请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

1.按照要求的效果在标签中运用CSS样式，编辑唐诗“静夜思”

2.标题文本“静夜思”采用<h1>标签作用，标签中通过style属性为文本添加样式，添加顺序为：（1）字体设置为楷体；

（2）文本水平居中对齐；

（3）行间距设置为2

3.四句诗的文本采用<h2>标签作用，标签中通过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>

第3关：用内嵌式引入CSS样式

编程要求

请在右侧编辑器中的Begin - End区域内补充代码，为body标签添加样式规则，具体要求是：

1.为网页设置背景图，图像的url地址为https://data.educoder.net/api/attachments/1427381

2.设置背景图像的大小，使其保持纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

3.上述样式设置顺序：（1）设置背景图（2）设置背景图的大小

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>内嵌CSS样式</title>
  <style type="text/css">
    /* ********** BEGIN ********** */   
    body {
          background-image:url(https://www.educoder.net/api/attachments/1427381);
          background-size:cover;
    }
    /* ********** END ********** */   
    div {
        position:fixed;
           left:400px;
            top:100px;
           color:#ffffff;
       font-family:黑体;
        text-align:center;
    }   
  </style>
 </head>
 <body>
  <div>
   <h1>静夜思</h1>
   <h2>床前明月光</h2>
   <h2>疑是地上霜</h2>
   <h2>举头望明月</h2>
   <h2>低头思故乡</h2>
  </div>
 </body>
</html>

第4关：用外链式引入CSS样式

编程要求

请在右侧编辑器中的Begin - End区域内补充代码，为网页链接外部样式表，具体要求是： 1.为link标签设置href、type和rel属性 2.外部样式表的路径为：https://data.educoder.net/api/attachments/1433016 3.外部样式文件设置的样式可通过点击编辑器窗口左上角的“代码文件”查看

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>外链CSS样式</title>
     <!-- ********** BEGIN ********** -->
     <link href="https://www.educoder.net/api/attachments/1433016" type="text/css" rel="stylesheet"/>
    

     <!-- ********** END ********** -->
 </head>
 <body>
  <div>
   <h1>静夜思</h1>
   <h2>床前明月光</h2>
   <h2>疑是地上霜</h2>
   <h2>举头望明月</h2>
   <h2>低头思故乡</h2>
  </div>
 </body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/43863.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！