【软件测试】5_基础知识 _CSS

文章目录

一、web标准-w3c
二、CSS定义和使用
- [2.1 定义和作用](#2.1 定义和作用)
- [2.2 基本使用步骤（重要）](#2.2 基本使用步骤（重要）)
三、体验CSS
四、CSS选择器（重要）-设置样式
- [4.1 简单选择器](#4.1 简单选择器)
- - [4.1.1 简单选择器权重](#4.1.1 简单选择器权重)
- [4.2 类名选择器](#4.2 类名选择器)
- [4.3 id选择器](#4.3 id选择器)
- [4.4 简单选择器总结](#4.4 简单选择器总结)
- [4.5 类名与 id 名---命名规则](#4.5 类名与 id 名—命名规则)
五、html元素分类
六、布局标签补充
七、元素类型转换
八、CSS特性总结（重要）
九、复合选择器
- [9.1 为什么需要复合选择器](#9.1 为什么需要复合选择器)
- [9.2 常见的复合选择器](#9.2 常见的复合选择器)
- - [9.2.1 后代选择器](#9.2.1 后代选择器)
  - [9.2.2 并列选择器](#9.2.2 并列选择器)
- [9.3 复合选择器权重](#9.3 复合选择器权重)
十、CSS文件存放位置
- [10.1 CSS代码3种写法](#10.1 CSS代码3种写法)
- - [10.1.1 内嵌 CSS](#10.1.1 内嵌 CSS)
  - [10.1.2 外链 CSS](#10.1.2 外链 CSS)
  - [10.1.3 行内 CSS](#10.1.3 行内 CSS)
- [10.2 CSS代码注意事项](#10.2 CSS代码注意事项)
十一、H5新增的音频标签
十二、视频标签
十三、CSS3.0
- [13.1 常见的文字样式](#13.1 常见的文字样式)
- [13.2 文字阴影](#13.2 文字阴影)
- - [13.2.1 字体样式缩写](#13.2.1 字体样式缩写)
  - [13.2.2 文字阴影](#13.2.2 文字阴影)
- [13.3 过渡属性](#13.3 过渡属性)

一、web标准-w3c

所谓的 web 标准指的就是一系列规范网页书写的要求，它是由 W3C 组织制定，在它里面要求网页的结构、样式、行为三者相分离。

1、结构：就是通过 HTML 标签搭建的网页的结构。

2、样式：就是通过 CSS 对当前的网页结构进行修饰和美化。

3、行为：通过 JS 让网页可以理解用户的一些操作。从而用户与网页之间产生交互。

二、CSS定义和使用

2.1 定义和作用

CSS在国内被称之为：级联样式表、层叠样式表、样式表。
CSS作用：修饰当前网页中的 HTML 元素。

2.2 基本使用步骤（重要）

1、CSS 与 HTML可以看做是二门互相独立的语言，此时如果想用 CSS 来操作 HTML ，那么就需要先将二者建立关系。

2、此时在 HTML 当中就准备了一个叫 style 的标签( 它是一个双标签 )，在这个标签对之间就可以用来书写我们的 CSS 代码。常见的存放位置可以是 head 标签里 title 标签下。

3、通过 CSS 的选择器找到我们想要操作的元素然给它设置样式( 写在 style 标签之中 )

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS使用步骤</title>
    
     <!--style标签是html当中准备好的专门用来存放CSS代码块的
     type类型里的text/css，这句话的作用就是告诉浏览器将来在解析这里代码的时候按CSS的语法来解析
     -->
    <style type="text/css">
        /* CSS的注释写法 */
        /* style标签对之间的区域就可以用来书写CSS代码 */
        /* CSS使用核心思想：通过具体的CSS选择器找到某一个或者多个html元素，然后对其进行设置 */
    </style>

</head>
<body>

</body>
</html>

如果你看到类似"废弃过时"的警告或错误，它可能来自于一个HTML验证器或一个lint工具，它可能因为type="text/css"被认为是不必要的冗余代码而发出警告。

解决方法：

简化代码：你可以从<style>标签中移除type="text/css"属性，因为它在大多数现代浏览器中是不必要的。

三、体验CSS

常见的CSS元素属性：width定义元素宽度单位是 px， height 定义高度，background-color设置背景颜色。
CSS 代码书写的固定语法:

css 复制代码

选择器{ CSS 代码 }

建议大家在开发阶段将 CSS 样式分行写，且每行的结尾用 ; 结束。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体验CSS</title>
    <style >
        /* CSS的基本语法：
         选择器{
               在这对大括号之间书写CSS样式设置
         }
         需求：给p元素设置宽度200px，高200px，背景颜色绿色
          */
        p{
           width: 200px;
            height: 200px;
            background-color: green;

        }
    </style>

</head>
<body>
<p>我是p标签</p>
</body>
</html>

四、CSS选择器（重要）-设置样式

1、定义

所谓的 CSS 选择器就是 CSS 中已经定义好的用来选中某些元素的固定语法。它的作用就是选中我们想要设置样式的元素。

2、CSS 选择器的分类

在 CSS 中有很多种选择器，我们人为的分成二大类：简单选择器 + 复合选择器。

4.1 简单选择器

① 标签名选择器：通过具体的 HTML 标签名称来选择元素。【会将当前网页中所有叫该名字的标签都选中】

② 类名选择器：通过标签类名来选择元素

③ Id 选择器：通过 id 名称选择元素。

4.1.1 简单选择器权重

权重：不同类型的 CSS 选择器在对同一个元素进行样式设置的时候，出现的控制能力不同的现象。
对于简单选择器来说，权重从大到小排序： id 选择器 > 类名选择器 > 标签名选择器。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器权重现象</title>
    <style >
        div{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        #two{
            background-color: salmon;

        }
    </style>
</head>
<body>
<!--需求：将p标签的CSS样式设置为相同，宽 100px  高 100px  -->
<p class="one" id="two">我是标兵</p>
</body>
</html>

4.2 类名选择器

1、为什么需要类名选择器

一个完整的网页需要很多标签组合在一起进行编写实现，因为 HTML 标签的种类有限，所以同名的一个标签有可能会在一个网页中出现多次。此时如果想对这些同名的标签分别设置不相同的样式，那么直接使用标签名选择器就没有办法实现。这种情况下我们就可以使用类名选择器。

2、类名选择器的基本使用步骤

① 定义 HTML 网页结构，然后在我们想选中的元素身上设置 class 属性。

② 将我们想要一起选中的元素们身上设置相同的 class 属性值( 类名 )

③ 此时我们只需要在 style 标签中按着固定的语法来调用我们的类名: .类名

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style >
        .aa{
            width: 100px;
            height: 100px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
<!--需求：将h4和p标签的CSS样式设置为相同，宽 100px  高 100px  绿色背景，文字白色-->
<h4 class="aa">学习</h4>
<p class="aa">锻炼</p>
<a href="#">下课</a>
</body>
</html>

4.3 id选择器

1、为什么需要 id 选择器

如果我们只想从一堆元素当中选中其中的某一个元素，那么就可以使用 id 选择器。这个 id 就和人的身份证号是一样的。

2、Id 选择器使用

①在我们想要选中的元素身上设置一个 id 属性。

②给这个 id 属性设置一个值，称为 id 名。

③在 style 当中通过固定的语法来进行调用： #id名{ }

④注：要求在一个网页当中不能出现同名的 id 值【虽然有效果但也不能这么做】

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style >
        #aa{
            width: 100px;
            height: 100px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
<!--需求：对第三个p标签进行样式设置-->
<p >第一个p标签</p>
<p >第二个p标签</p>
<p id="aa">第三个p标签</p>
</body>
</html>

4.4 简单选择器总结

1、标签名选择器和类名选择器默认可以一次性选中多个元素，id 名选择器一次只能选中一个元素。

2、一个标签的身上可以既具有类名又具有 id 名，且这二个属性值是可以相同的。

3、允许一个标签的身上同时设置多个类名，要求多个类名之间用空格隔开。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style >
        .aa{
            width: 100px;
            height: 100px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
<!--需求：将h4和p标签的CSS样式设置为相同，宽 100px  高 100px  绿色背景，文字白色-->
<h4 class="aa bb">学习</h4>   <!--允许一个标签的身上同时设置多个类名，要求多个类名之间用空格隔开-->
</body>
</html>

4、关于 id 选择器要求一个页面当中同一个 id 名称只能出现一次。

4.5 类名与 id 名---命名规则

1、名称不能是纯数字或者以数字开头( 但是我们经常会以数字结尾 ) 。

2、名称不能使用中文（虽然有效但绝对不能用）。

3、名称不能以特殊字符开头或者包含特殊字符（！@#￥%......&* ）。但是特殊字符（ - _ ）除外，可以使用。

4、起名字时要做到见名知意。

五、html元素分类

在 HTML 当中本身定义了很多的元素，这些元素默认在网页上展示的时候会存在自已默认的状态，例如：有些元素默认情况下宽高属性不起作用，有些元素默认情况下都独占一行显示。这种现象我们就称之为元素展示类型，为了记忆我们人为的将元素展示类型分为三种：
块元素、行内元素、行内块元素。

1、块元素：当同时存在多个块元素的时候，每个块元素都会独占一行显示，且默认情况下它的宽高属性可以起作用。

2、行内块元素：当同时存多个行内块元素的时候，这些元素会显示在一行，默认情况下它的宽高属性起作用。

3、行内元素：当同时存在多个行内元素的时候，这些元素都会显示在一行，如果一行放不下自动折行；默认情况下它的宽高属性不起作用。

4、注：不需要去死记哪些元素是行内，哪些是块，哪些是行内块。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素默认展示状态</title>
    <style>
       .one{
           color: white;
           width: 150px;
           height: 150px;
           background-color: seagreen;
       }
    </style>
</head>
<body>
<h4 class="one">标题4</h4>
<p class="one">段落p1</p>
<p class="one">段落p2</p>
<a class="one" href="">A标签</a>
<a class="one" href="">B标签</a>
</body>
</html>

六、布局标签补充

1、div 标签，它是 HTML 当中定义好的一个双标签( DIV+CSS )。我们人为的认为它是一个体积最大的标签。

2、span 标签，它也是一个双标签，主要用来放文字，我们人为的认为这体积很小。

3、段落标签里不能包裹标题，因为浏览器不能正常解析。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素默认展示状态</title>
    <style>
       .one{
           color: white;
           width: 150px;
           height: 150px;
           background-color: seagreen;
       }
    </style>
</head>
<body>
<h4 class="one">标题4</h4>
<p class="one">段落p1</p>
<p class="one">段落p2</p>
<a class="one" href="">A标签</a>
<a class="one" href="">B标签</a>

<!--div是我们网页布局中经常使用到的一个标签，从某种感觉上我们会认为它是html当中体积最大的一个标签。（在它里面可以放很多的其它标签）-->
<div>我是div</div>
<!--span标签是一个布局常用标签，它里面一般用来放文字，我们人为人为这个标签非常小-->
<span>我是小土豆</span>

</body>
</html>

七、元素类型转换

在我们进行网页布局过程中往往会遇到一些"特殊的模块"，对于这种模块来说我们之前的一些常见标签在使用的时候就会显示 "语义" 有些不对应，所以我们可以使用相应的标签进行强制的类型转换，从而让它可以展示成设计稿上的样子。
在 CSS 当中有一个 display 属性，可以设置不同的值来完成元素类型的转换。

1、转成块元素：

html 复制代码

display: block;

2、转成行内块元素：

html 复制代码

display: inline-block;

3、转成行内元素：

html 复制代码

display: inline;

··························································································

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素展示类型转换</title>
    <style>
   /*需求：将span这个行内元素强行的变成块元素。为了实现这个需求，CSS当中本身定义了display的属性。
   display有几个常见的值：
   block  块元素
   inline-block  行内块元素
   inline   行内元素
   */
       span{
           width: 800px;
           height: 150px;
           background-color: seagreen;

           display: inline;
       }
    </style>
</head>
<body>

<div>我是div1</div>
<div>我是div2</div>
<span>我是小土豆1</span><span>我是小土豆1</span>

</body>
</html>

八、CSS特性总结（重要）

1、在权重相同 的情况下，同一个元素后写的 CSS 样式会覆盖先写的 CSS 样式。【覆盖性：同一个元素的同一个属性被设置了多个样式】

2、CSS 的定义存在继承的特点，子元素会继承父元素的一些样式【继承性】

①不是所有的 CSS 属性都可以被继承。
②不是所有类型的元素都会去继承祖先元素的样式( 继承一般发生在块元素的身上)
③继承指的就是子元素可以使用祖先元素的一些样式

3、不同选择器对同一个元素的 CSS 控制能力存在着强弱。【优先级】

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性</title>
    <style>    
      div{
           width: 200px;
           height: 200px;
           background-color: seagreen;
       }
      p{
          background-color: pink;
      }
      span{
          background-color: blue;
      }
    </style>
</head>
<body>
<div>
    <p>我是p元素</p>
    <span>我是span</span>
</div>
</body>
</html>

九、复合选择器

9.1 为什么需要复合选择器

在实际的网而制做过程中往往会出现很多结构层级嵌套很深的现象，而这种结构模块又很多，大家使用的标签名称又一样。所以此时我们就可以通过复合选择器，将这些简单选择器进行组合，从而让我们选择元素变得简单。

9.2 常见的复合选择器

9.2.1 后代选择器

这种选择器就是以某一个元素为起点 ，将它做为祖先然后不停的向下进行穿透查找，去选择它下面的后代元素。

html 复制代码

起点元素 后代元素......{}
div span{}
div p span{}
·······································
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        /*
        以div作为起点，将它当做一个祖先元素，然后去查找它后代里 标签名字叫span的元素
         */
      div span{
          width: 200px;
          height: 100px;
          color: blue;
      }
    </style>
</head>
<body>
<div>
    <p>
        <span>我是孙子辈span</span>
    </p>
    <span>我是儿子辈span</span>
</div>
</body>
</html>

注：

1、后代选择器当中的每个部分都可以采用任意的简单选择器代替。

2、不同的部分之间要用空格隔开。

3、 ... 就表示可以不停的向下层查找。

9.2.2 并列选择器

就是将多个选择器使用逗号进行连接，表示同时选中这些元素，然后设置相同的样式。
其中每个部分的选择器都可以由任意类型的选择器构成。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并列选择器</title>
    <style>
        h4,p{
            width: 100px;
            height: 100px;
            background-color: seagreen;
    </style>
</head>
<body>
<!--将h4和p标签的样式设置为相同-->
<h4>我是h4</h4>
<p>我是p</p>
<a href=""></a>
</body>
</html>

9.3 复合选择器权重

1、简单选择器: id 名 > class 名 > element 名

2、复合选择器：需要在大家明白的就是复合选择器由多个其它类型选择器组合而成，为了方便比较，我们人为的给每个简单选择器都定义了一个数值，分别是： Id(100) 、class(10) 、ele(1)，这三个数值我们也称之为权重值，有了它们之后只需要将当前选择器中出现的权重值进行相加求，最终的结果就是该选择器的权重。数值越大的权重越大。

id(100)：id选择器的权重值为100。
class(10)：类名选择器的权重值为10。
ele(1)：标签名选择器的权重值为1。

3、切记权重比的就是不同选择器对同一个元素的控制力比较（区别继承的影响）

十、CSS文件存放位置

10.1 CSS代码3种写法

CSS 代码可以被我们放在很多的地方，习惯性的有三种写法：内嵌 CSS 、外链 CSS、行内CSS 。

10.1.1 内嵌 CSS

指的就是将 CSS 代码写在 html 网页中。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并列选择器</title>
    <style>
        h4,p{
            width: 100px;
            height: 100px;
            background-color: seagreen;
    </style>
</head>
<body>
<!--将h4和p标签的样式设置为相同-->
<h4>我是h4</h4>
<p>我是p</p>
<a href=""></a>
</body>
</html>

10.1.2 外链 CSS

指的就是就将 CSS 代码写在外部的独立 CSS 文件中。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外链CSS</title>
<!--如果我们采用外链CSS的方式，那么需要在当前的html页面当中引入具体的想要使用外部CSS文件，
并且在head标签中添加link单标签即可，如下：

rel属性及它的值不要省略，表示当前引入的是一个样式表文件，
-->
    <link rel="stylesheet" type="text/css" href="12.css" />
<!--href中添加外部CSS文件的路径，如果是相对路径，那么相对的是当前html页面的相对路径，
比如：html和css文件在同一个目录下，那么相对路径就是12.css，-->
</head>
<body>
<div></div>
</body>
</html>

12.CSS 文件

css 复制代码

div{
    width: 100px;
    height: 100px;
    background-color: red;
}

10.1.3 行内 CSS

指的就是将 CSS 代码写在具体的 HTML 标签身上。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内CSS</title>

</head>
<body>
<!--
   有时候为了快速的修改某个元素的css样式，我们可以选择直接将要设置的样式直接写在标签的身上；
   此时，只需要将style当做div标签身上的一个属性来使用。
   -->
<!--背景颜色为红色、文本颜色为白色、宽度为200像素、高度为200像素，以及外边距为上、下100像素的自动居中。-->
<div style="background-color: red;color: white;width: 200px;height: 200px;margin: 100px auto;">我是div标签</div>

</body>
</html>

10.2 CSS代码注意事项

1、依据浏览器渲染页面原理，我们选将 CSS 代码写在 HTML 文件靠前的位置。

2、使用外链 CSS 写法的时候，外部独立的 CSS 文件当中不需要写 style 标签，同时还需通过 link 标签将某个 CSS 文件引入到具体的 HTML 文件当中。【其中，rel 属性不要省略。】

php+HTML 复制代码

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

3、对于上述的三种 CSS 文件存放位置来说，行内 CSS 的权重是最高，但是外链与内嵌并不存在谁一定大于谁的现象( 权重 )，它的控制能力完全取决于各自所使用的选择器权重。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS存放不同位置时的权重</title>
    <style>
        div{
            color: red!important;   
        }
    </style>

    <link rel="stylesheet" href="13.css">
    
</head>
<body>
<div style="color: blue">我是div标签</div>
</body>
</html>

4、如果想要直接将某一个样式的权提至最高，我们只需要在该句 CSS 代码的最后设置 !important .

php+HTML 复制代码

P{color:red!important;}

十一、H5新增的音频标签

html 复制代码

<audio autoplay controls loop> 
	降级的说明性文字 
	<source src="格式 1 路径" /> 
	....... 
</audio> 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5新增的音频标签</title>
</head>
<body>
<!--在课上我们的H5指的是HTML5这个新的语言标准。
在HTMl5当中就定义了一个叫audio的标签，可以直接引入一段声音资源到我们的网页当中。

1、默认情况下，引入的声音资源是不会自动播放的。
2、HTML5中的audio标签，可以设置autoplay属性，自动播放。【现在的浏览器不支持】
3、controls 属性，可以设置音频的播放控件。controls = "controls"，可以省略写为controls。
4、loop 属性，可以设置音频循环播放。
5、目前。没有哪一种音频格式可以兼容所有的浏览器。
因此我们在引入声音资源的时候，就需要尽可能多的引入不同的格式，从而兼顾所有的浏览器。
为了解决这个问题，html5当中就定义了一个新的标签叫source
-->

<!--<audio src="yinyue.mp3" autoplay = "autoplay" controls loop></audio>-->

<audio >

    <source src="yinyue.mp3" type="audio/mpeg">
    <source src="yinyue.ogg" type="audio/ogg">
</audio>

</body>
</html>

1、audio 是一个双标签，用来定义一个声音资源模块。

2、autoplay 用来设置自动播放。

3、controls 调用当前设备的播放控制。

4、loop 设置当前音频循环播放。

5、默认 audio 里的文字不显示，只有在当前浏览器不支持这个标签的时候会显示文字。

十二、视频标签

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频标签</title>
</head>
<body>

<video src="小鱼.mp4" controls="controls" width="400px" height="300px" autoplay="autoplay" loop="loop">
    <source src="小鱼.mp4" type="video/mp4">
    <source src="小鱼.ogg" type="video/ogg">
    <source src="小鱼.webm" type="video/webm">
    您的浏览器不支持video标签
</video>

</body>
</html>

十三、CSS3.0

13.1 常见的文字样式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见的文字样式</title>

    <style>
        div{
            /*1、行高：一行文字的高度
             要求：设置div里面的文字在div当中垂直方向居中显示。div的高度是200px
             */
            width: 200px;
            height: 200px;
            line-height: 200px;
            background-color: orange;
            text-align: center;  /*2、文字对齐方式：设置文本在当前盒子div中水平对齐的方式 */
            color: blue;  /*3、文字颜色：设置文本的颜色 */
            font-size: 30px;  /*4、文字大小：设置文本的大小 */
            font-weight: 100;  /*5、文字粗细：设置文本的粗细 */
            font-family: 微软雅黑; /*6、文字字体：设置文本的字体 */
        }
    </style>
</head>
<body>

<div>学习向上</div>

</body>
</html>

1、行高：line-height, 当我们将行高的大小设置成当前元素的高度时，可以实现单行文本在当前元素中垂直方向居中显示的效果。

2、水平对齐方式：text-align: left | center | right ，分别表示设置文字在当前盒子当中水平的对齐。

3、字体大小：font-size，单位是 px ，一般情况下浏览器都会有一个最小的显示字体。

4、字体粗细：font-weight,可以设置关键字，或者数值( 100-900 ). 关键字有 normal表示正常，还有 bold 表示加粗。

5、字体名称：font-family ，一般常用的就是 "微软雅黑"和"黑体"

6、字体颜色：color，可以设置颜色单词，还可以是十六进制的数字。

13.2 文字阴影

13.2.1 字体样式缩写

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式缩写</title>
    <style>
        div{
            color: #fff;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            text-align: center;
            background-color: orange;

            /*font是一个符合属性的写法，它的后面可以放置很多个单独的文字样式，中间用空格隔开
            
            Font: 文字粗细 大小/行高 字体名称;
            */
            font: normal 20px/200px "微软雅黑";
        }
    </style>
</head>
<body>
<div>文字样式</div>
</body>
</html>

13.2.2 文字阴影

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体阴影</title>
    <style>
        div{
            text-align: center;
            font:bold 40px/100px "微软雅黑";
            /*  阴影：组与组之间用逗号隔开，组内用空格隔开；
            每个阴影由四个值组成，分别是：水平偏移量，垂直偏移量，阴影的模糊半径，阴影的颜色  
			text-shadow: x y r color; 
            */
            text-shadow: 10px 10px 10px red, -10px -10px 10px blue;

        }
    </style>
</head>
<body>
<div>文字阴影</div>
</body>
</html>

1、x 表示阴影在水平方向的偏移量，可以设置负值，正负不表示大小，只表示方向。水平向右为正，向左为负，单位是 px。

2、y 表示阴影在垂直方向的偏移量，垂直向上为负，向下为正。

3、r 表示阴影的模糊程度，数值越大阴影越模糊，单位 px 。

4、color 表示阴影的颜色。

5、CSS3.0 允许一段文字有多层阴影，多层之间用逗号隔开；每一层内，不同参数之间用空格隔开。

13.3 过渡属性

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡属性</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /*
              transition: all 2s;
              transition:表示过渡属性，
              all:表示所有的属性，单独指定的属性，例如：background-color,width,height
              2s:表示过渡时间
              */
            /*transition: all 2s;*/

            /*linear 1s 延时1s*/
            transition: height 2s linear 1s;

        }
        /* :hover 就是一个选择器
          div:hover 选中的就是div元素被鼠标移上时的状态
          */
        div:hover{
            background-color: blue;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<!--过渡：一个元素本身默认有一种样式的显示，然后当用户执行一些操作的时候，（例如鼠标移动上去）
它的样式会变成另外一种显示，而过渡的作用就是让这个元素的样式在默认和最终展示之间有一个中间的变化过程。
-->
<div>文字过渡</div>
</body>
</html>

过渡属性的作用就是在元素的默认样式与最终样式变化之间产生一个过程。在 Css3.0 中新增了一个属性叫 transition

html 复制代码

transition: all 2s linear 0s;

注：

1、第一个参数的作用是设置元素身上的哪些属性产生过渡，一般用 all 表示所有的属性都过渡。

2、第二个参数的作用设置过渡需要时长，单位是 s 不要省略。

3、第三个参数的作用设置过渡的动画形式，linear 表示匀速。

4、第四个参数设置当前过渡等待多久之后才会执行( 延时 )。即使为 0 ，单位也不能省。

5、:hover 选择某个元素被鼠标移上时的状态。

6、transition 这个属性既可以添加在元素默认状态，也可以添加在鼠标移上状态，区别就是第二种做法在鼠标离开的时候不会在有过渡变化。

【软件测试】5_基础知识 _CSS

文章目录

一、web标准-w3c

二、CSS定义和使用

2.1 定义和作用

2.2 基本使用步骤（重要）

三、体验CSS

四、CSS选择器（重要）-设置样式

4.1 简单选择器

4.1.1 简单选择器权重

4.2 类名选择器

4.3 id选择器

4.4 简单选择器总结

4.5 类名 与 id 名---命名规则

五、html元素分类

六、布局标签补充

七、元素类型转换

八、CSS特性总结（重要）

九、复合选择器

9.1 为什么需要复合选择器

9.2 常见的复合选择器

9.2.1 后代选择器

9.2.2 并列选择器

9.3 复合选择器权重

十、CSS文件存放位置

10.1 CSS代码3种写法

10.1.1 内嵌 CSS

10.1.2 外链 CSS

10.1.3 行内 CSS

10.2 CSS代码注意事项

十一、H5新增的音频标签

十二、视频标签

十三、CSS3.0

13.1 常见的文字样式

13.2 文字阴影

13.2.1 字体样式缩写

13.2.2 文字阴影

13.3 过渡属性

4.5 类名与 id 名---命名规则