CSS样式规则

最新推荐文章于 2022-07-06 19:01:22 发布

静待花开︳

最新推荐文章于 2022-07-06 19:01:22 发布

阅读量367

点赞数 1

分类专栏： educoder Web前端文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_52184490/article/details/121915926

版权

educoder 同时被 2 个专栏收录

51 篇文章 9 订阅

订阅专栏

Web前端

35 篇文章 2 订阅

订阅专栏

第1关：CSS基础知识

1、CSS 指的是（ ) B.Cascading Style Sheets

2、下列选项中，（）是火狐浏览器前缀。 D.-moz-

3、下列选项中，（）属性可用来定义内联样式。 C.style

4、下列选项中，（）的CSS语法是正确的。 A.body{color:black;}

5、在以下的 HTML 中，哪个是正确引用外部样式表的方法？

B.<link rel="stylesheet" type="text/css" href="mystyle.css">

第2关：初识CSS

任务描述

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

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://www.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://www.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>

静待花开︳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS样式规则

第1关：CSS基础知识1、CSS 指的是（ ) B.Cascading Style Sheets2、下列选项中，（）是火狐浏览器前缀。 D.-moz-3、下列选项中，（）属性可用来定义内联样式。 C.style4、下列选项中，（）的CSS语法是正确的。 A.body{color:black;}...
复制链接

扫一扫