软件测试工程师-CSS

CSS

1、CSS基本介绍
①web标准——用来衡量网页书写是否规范的一系列要求。由w3c组织制定，在web标准中具体的要求就是结构、样式。行为三者相分离。
web标准指的是一系列规范网页书写的要求。
②名词解释
（1）结构：指的就是通过HTML标签来搭建的网页结构。
（2）样式：指的就是通过CSS语言来对具体的HTML结构进行美化装饰。
（3）行为：指的就是通过JavaScript让网页可以理解用户的一些操作，从而让用户与网页之间产生交互。

2、CSS基本使用
①定义：CSS在国内被称为级联样式表、层叠样式表、样式表，作用是修饰网页中的HTML元素。
②基本使用步骤：
（1）CSS和HTML可以看做是两门互相独立的语言，如果想用CSS来操作HTML，那么就需要先将二者建立关系。
（2）此时在HTML中就准备了一个叫style的标签，它是一个双标签，在这个标签对之间就可以用来书写CSS代码，常见的存放位置可以是head标签里title标签下。
（3）通过CSS选择器找到想要操作的元素，给它设置样式，写在style标签之中。

3、体验CSS
①常见的CSS元素属性：width定义元素宽度，单位px；height定义高度；background设置背景颜色。
②CSS代码书写的固定语法：选择器{CSS代码}。
③建议在开发阶段将CSS样式分行写，且每行的结尾用；结束。

4、CSS选择器
①定义：所谓的CSS选择器就是CSS中已经定义好的用来选中某些元素的固定语法。它的作用就是选中我们想要设置样式的元素。
②CSS选择器的分类：人为分为2大类，简单选择器、复合选择器。
③简单选择器
（1）标签名选择器：通过具体的HTML标签名称来选择元素。（会将当前网页中所有该名称的标签都选中）
（2）类名选择器：通过标签类名来选择元素。
（3）ID选择器：通过ID名称选择元素。

5、类名选择器
①原因：一个完整的网页需要很多标签组合在一起进行编写实现。因为HTML标签的种类有限，所以同名的一个标签会在一个网页中出现多次，如果想对这些同名的标签分别设置不同的样式，直接使用标签名选择器没有办法实现。这种情况我们就可以使用类名选择器。
②类名选择器的基本使用步骤：
（1）定义HTML网页结构，然后在想选中的元素身上设置class属性。
（2）将想要选中的元素身上设置相同的class属性值（类名）。
（3）此时我们只需要在style标签中按照固定的语法来调用类名：.类名。

6、ID选择器
①原因：如果只想从一堆元素中选择其中的一个元素，那么就可以使用ID选择器。
②ID选择器的使用
（1）在想选中的元素上设置一个ID属性。
（2）给这个ID属性设置一个值，称为ID名。
（3）在style中通过固定的语法进行调用：#ID名{}
（4）要求在一个网页当中不能出现同名的ID值，虽然有效果，但也不能这样写

7、简单选择器总结
①标签名选择器和类名选择器默认的可一次性选择多个元素。ID名选择器一次只能选中一个元素。
②一个标签的身上可以既有类名又有ID名，且这两个属性值是可以相同的。
③允许一个标签的身上同时设置多个类名，要求多个类名之间用空格隔开。
④关于ID选择器要求一个页面当中同一个ID名称只能出现一次。

8、ID名与类名命名规范
①名称不能是纯数字或者以数字开头（但经常会以数字结尾）
②名称中不能使用中文
③名称不能包含特殊字符（- _除外）
④起名字的时候要做到见名知意

9、元素展示类型
在HTML中本身定义了很多元素，这些元素默认在网页上展示的时候会存在自己默认的状态。例如某些元素默认情况下宽高属性不起作用，有些元素默认情况下独占一行显示，这种情况我们称之为元素展示类型。为了记忆，人为的将元素展示类型分为三种：块元素、行内元素、行内块元素。
①块元素：当同时存在多个块元素的时候，每个块元素多会独占一行显示，且默认情况下它的宽高属性可以起作用。
②行内元素：当同时存在多个行内元素的时候，这些元素都会显示在一行，如果一行放不下则自动折行，默认情况下它的宽高属性不起作用。
③行内块元素：当同时存在多个行内块元素的时候，这些元素都会显示在一行，默认情况下它的宽高属性可以起作用。
不需要去记哪些是块元素、行内元素、行内块元素。

10、布局标签补充
①div标签：双标签。我们人为的认为它是一个体积最大的标签。
②span标签：双标签，主要用来放文字，我们人为的认为它体积很小。
③段落标签里不能包裹标题，因为浏览器不能正常解析。

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

12、简单选择器权重
权重：可以理解为不同类型的CSS选择器在对同一个元素进行样式设置的时候，出现的控制能力不同的现象。
对于简单选择器来说：ID选择器>类名选择器>标签名选择器

13、CSS特性
①在权重相同的情况下，同一个元素后写的CSS样式会覆盖先写的CSS样式。——覆盖性
②CSS的定义存在着继承的特点，子元素会继承父元素的一些样式。——继承性
（1）不是所有的CSS属性都可以被继承。
（2）不是所有类型的元素都会去继承祖先元素的样式。（继承一般发生在块元素的身上）
（3）继承指的是子元素可以使用祖先元素的一些样式。
③不同选择器对同一个元素的CSS控制能力存在着强弱。——优先级

14、复合选择器
①原因：在实际的网页制作过程中往往会出现很多结构层级嵌套很深的现象，而这种结构模块又很多，大家使用的标签名称又一样。所以此时就可以通过复合选择器，将这些简单选择器进行组合，从而让我们选择元素变得简单。
②常见的复合选择器
（1）后代选择器：这种选择器就是以某一个元素为起点，将它作为祖先，然后不停的向下进行穿透查找，去选择它下面的后代元素。
起点元素 后代元素……{设置样式}
注：后代选择器中的每个部分都可以采用任意的简单选择器代替；
不同的部分之间要用空格隔开；
……就表示可以不停的向下层查找
（2）并列选择器：就是将多个选择器使用逗号进行连接，表示同时选中这些元素，然后设置相同的样式，其中每个部分的选择器都可以由任意类型的选择器构成。

15、选择器权重总结
①简单选择器：ID名>class名>element名
②复合选择器：复合选择器由多个其他类型选择器组合而成，为了方便比较，人为的给每个简单选择器都定义了一个数值，分别是ID（100），class（10），element（1），这三个数值我们也称之为权重值，有了他们之后只需要将当前选择器中出现的权重值进行相加，最终的结果就是该选择器的权重，数值越大的权重越大。
③切记权重比的就是不同选择器对同一个元素的控制力比较（需要区别继承的影响）。

16、CSS文件存放的位置
CSS代码可以被放在好多地方，习惯性的有三种写法：内嵌CSS、外链CSS、行内CSS。
①内嵌CSS指的是将CSS代码写在HTML网页中。
②外链CSS指的是将CSS代码写在外部的独立CSS样式中。
③行内CSS指的是将CSS代码写在具体的HTML标签身上。
注：依据浏览器渲染页面的原理，我们选择将CSS代码写在HTML文件靠前的位置。
使用外链CSS写法时，外部独立的CSS文件中不需要写style标签，同时还需要通过link标签将某个CSS文件引入到具体的HTML文件当中，rel属性不要省略。
<link href="目标CSS文件路径" type="text/css" rel="stylesheet" />
对于上述的三种CSS文件存放位置来说，行内CSS的权重最高，但是外链与内嵌并不存在谁一定大于谁的现象，它的控制能力完全取决于各自所使用的选择器权重。
如果想要直接将某一个样式的权重提至最高，只需要在该CSS代码的最后设置!important。

17、音频标签

<audio autoplay controls loop>
  <source src="格式1路径" />
  ......
</audio>

①audio是一个双标签，用来定义一个声音资源模块。
②autoplay用来设置自动播放。
③controls可以调出当前设备的播放控制。
④loop设置当前音频循环播放。
⑤默认audio里面的文字不显示，只有当前浏览器不支持这个标签的时候会显示文字。

18、常见的文字样式
①行高：line-height，当我们将行高的大小设置成当前元素的高度时，可以实现单行文本在当前元素中垂直方向居中显示的效果。
②水平对齐方式：text-align：left|center|right，分别表示设置文字在当前盒子当中水平的对齐方式。
③字体大小：font-size，单位是px，一般情况下浏览器都会有一个最小的显示字体。
④字体粗细：font-weight，可以设置关键字，或者数值（100-900）。关键字有normal表示正常，还有bold表示加粗。
⑤字体名称：font-family，一般常用的就是微软雅黑、黑体。
⑥字体颜色：color，可以设置颜色单词，还可以是16位进制的数字。

19、内容总结

20、单词回顾
div——大盒子；
span——小盒子；
display——设置类型转换；
inline——行内；
block——块；
inline-block——行内块；
！important——将当前样式权重提至最高；
audio——音频标签；
source——加载资源的单标签；
autoplay——自动播放；
controls——播放控制；
loop——循环播放；
video——视频标签；
link——引入一个外部的CSS文件；
rel——设置为stylesheet标签样式；
font-size——大小；
font-weight——粗细；
font-family——字体名称；
line-height——行高；
text-align:center

21、文字阴影
①字体样缩写

font：文字粗细 大小/行高 字体名称;
font：bold 20px/200px '微软雅黑';  

②CSS3中的文字阴影

text-shadow：x y r color;
text-shadow：0px 0px 0px red;

注：x表示阴影在水平方向的偏移量，可以设置负值，正负不代表大小，只表示方向。水平向右为正，向左为负，单位是px。
y表示阴影在垂直方向的偏移量，垂直向上为负，向下为正。
r表示阴影的模糊程度，数值越大阴影越模糊，单位px。
color表示阴影的颜色。
c3允许一段文字有多层阴影，多层之间用逗号隔开，每一层内，不同参数之间用空格隔开。

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

transition:all 1s linear 0s;

第一个参数的作用是设置元素身上的哪些属性，一般用all表示所有的属性都过渡
第二个参数的作用设置过渡需要时长，单位是s，不要省略
第三个参数的作用设置过渡的动画形式，linear表示匀速
第四个参数设置当前过渡等待多久之后才会执行（延时），即使为0，单位也不能省。
honor选择某个元素被鼠标移上时的状态。
transition这个属性既可以添加在元素的默认状态，也可以添加在鼠标移上状态，区别就是第二种做法在鼠标离开的时候不会再有过渡变化。