Edu前端学习——CSS样式规则

是小鹿呀
173 阅读5分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

第1关：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>标记定义。例如：

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

通关知识

1、CSS 指的是（B)
A、Computer Style Sheets
B、Cascading Style Sheets
C、Creative Style Sheets
D、Colorful Style Sheets

2、下列选项中，（D）是火狐浏览器前缀。
A、-ms-
B、-o-
C、-webkit-
D、-moz-

3、下列选项中，（C）属性可用来定义内联样式。
A、font
B、class
C、style
D、styles

4、下列选项中，（A）的CSS语法是正确的。
A、body{color:black;}
B、body:color=black 
C、{body;color:black} 
D、{body:color=black(body)} 

5、在以下的 HTML 中，哪个是正确引用外部样式表的方法？（B）
A、<style src="mystyle.css">
B、<link rel="stylesheet" type="text/css" href="mystyle.css">
C、<stylesheet>mystyle.css</stylesheet>
D、<script src="mystyle.css">

第2关：初识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. 文本水平居中对齐。

效果如下：

css任务效果图

通关代码

<!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标签中,使用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地址为www.educoder.net/api/attachm…
  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中链接外部样式表文件

在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. 外部样式表的路径为：www.educoder.net/api/attachm…
  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>

创作不易，还请大家多多支持小鹿，给她一个点赞吧，谢谢啦

avatar
文章
阅读
粉丝