EduCoder-Web程序设计基础-html5— CSS样式规则- 第4关:用外链式引入CSS样式

任务描述

本关任务:采用外链式方法为网页元素添加样式。
效果如下:
内嵌式效果

相关知识

为了完成本关任务,你需要掌握:在HTML的头部通过link标签链接外部样式表文件。

在HTML中链接外部样式表文件
在HTML标签中,使用link标签来链接CSS样式文件。
示例如下:

link标签属性有:

href:取值为外部样式文件的路径
type:设置外部文档的类型。取值为text/css时,表示外部文档的类型为CSS样式表;取值为text/javascript时,表示外部文档的类型为javascript脚本
rel:设置当前文档与引用外部文档的关系。取值为stylesheet,表示定义一个外部样式表。

编程要求

请在右侧编辑器中的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>

猜你喜欢

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