CSS样式规则

最新推荐文章于 2023-12-01 23:08:44 发布

糯米小辣条

最新推荐文章于 2023-12-01 23:08:44 发布

阅读量779

点赞数 3

分类专栏： Web practice of Educoder

本文链接：https://blog.csdn.net/m0_47174730/article/details/111197346

版权

Web practice of Educoder 专栏收录该内容

38 篇文章

订阅专栏

第1关：CSS基础知识
任务描述
本关任务：完成一组CSS相关的概念题。
相关知识
为了完成本关任务，你需要掌握：1.什么是CSS？，2.CSS的特点，3.浏览器前缀，4.CSS样式规则，5.引入CSS样式的方法。
什么是CSS
CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web文档添加样式的简单机制，是一种表现HTML或XML等文件外观样式的计算机语言，是一种网页排版和布局设计的技术。
CSS的特点
纯CSS布局与结构式HTML相结合能帮助设计师分离外观与结构，和传统的表格布局相比，具有以下特点：
网页载入更快
降低流量费用
修改设计时效率高
更容易被搜索引擎收录
浏览器对CSS3的支持及浏览器前缀
CSS3是2010年推出的新标准，在选择器方面，除了IE9以下的浏览器版本，其他浏览器已全部支持CSS3选择器；在属性方面除了CSS的Transforms 3D还没有浏览器支持以外，Chrome和Safari对CSS3的其他属性全部支持，其次支持较好的是Opera和Firefox。
但是，一些CSS3的样式，各家浏览器的语法规则还有差异。为了让设计人员设计的一个效果被各个浏览器识别，通常可在样式代码前添加浏览器前缀。
常用的浏览器前缀如下：
-ms-：IE浏览器前缀
-moz-：火狐浏览器前缀
-webkit-:苹果、微软和谷歌浏览器前缀
-o-：欧朋浏览器前缀
CSS的样式规则
CSS 样式设置由选择器和声明两部分组成：
选择器：用于指明样式作用的对象
声明：用于定义样式的格式，由属性和值组成，两者以“:”分隔
例如：

body{color:blue }

该样式的作用的对象是标签选择器body,定义的样式属性为color，取值为blue
引入CSS样式的方法
在网页中应用CSS样式有内联式、内嵌式、外链式和外导式4种方法。
内联式：通过标记的style属性直接把CSS样式添加到HTML的标签中。
例如：<span style="color:red; font-weight:bold;">内联样式</span>

内嵌式：将CSS代码集中写在HTML文档的头部标签中。并用

<style type="text/css">
  span{color:red;
       font-weight:bold;}
</style>

外链式：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。例如：

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

外导式：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过@import url(“外部样式表相对路径”)语句将外部样式表文件链接到HTML文档中。例如：

<style type="text/css">
  @import url("style.css");
</style>

开始你的任务吧，祝你成功！
参考答案：
在这里插入图片描述

第2关：初识CSS
任务描述
本关任务：在指定标签中添加CSS样式。
效果如下：

相关知识
为了完成本关任务，你需要掌握：在标签中添加CSS样式属性
在标签中添加CSS样式
在HTML标签中,使用style属性来添加CSS样式，其取值由属性和值组成，两者以冒号“:”分隔，多个属性之间用分号“；”分隔。
示例如下：

<span style="color:red;font-weight:bold;">内联样式</span>

常用的文本样式属性有：
color：设置文本的颜色
font-family：设置文本的字体
font-size：设置文本的字号大小
text-align：文本水平对齐方式
line-height：设置文本的行间距
编程要求
请在右侧编辑器中的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样式
任务描述
本关任务：采用内嵌式方法为网页元素添加样式。
效果如下：
在这里插入图片描述
相关知识
为了完成本关任务，你需要掌握：在HTML的头部添加CSS样式属性
在HTML头部添加CSS样式
在HTML标签中,使用style标签来添加CSS样式，其方法是将CSS代码集中写在HTML文档的头部的style标签中。
示例如下：

 <style type="text/css">
    body{background-image:url(背景图的路径);
      background-size:cover;}
   div{position:fixed;
        left:500px;
         top:200px;
         color:red
   }
 </style>

常用的背景样式属性有：
background-color：设置元素的背景颜色
background-image：设置元素的背景图像，取值格式为url(背景图像的路径)
background-size：设置元素的背景图像大小。取值为cover时，会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小；取值为contain时，会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小；取值为长度值，第一个参数设置宽度，第二个参数设置高度，两个参数之间空格分隔。
background-repeat：设置元素的背景平铺方式。取值为no-repeat表示不平铺；取值为repeat-x表示横向平铺；取值为repeat-y表示纵向平铺；取值为repeat表示双向平铺。
编程要求
请在右侧编辑器中的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样式
任务描述
本关任务：采用外链式方法为网页元素添加样式。
效果如下：
在这里插入图片描述
相关知识
为了完成本关任务，你需要掌握：在HTML的头部通过link标签链接外部样式表文件。
在HTML中链接外部样式表文件
在HTML标签中,使用link标签来链接CSS样式文件。
示例如下：

<link href="CSS文件的路径" type="text/css" rel="stylesheet"/>

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/1427381
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>