软件测试基础-CSS

一、CSS基本介绍

CSS是Cascading Style Sheets的首字母缩写，我们称之为级联样式表、层叠样式表、样式表，主要作用是用来修饰美化展示效果。

 

书写代码的步骤：

    1、css的代码要写在style标签中

    2、style标签放在head标签中的最后位置（title标签下面）

    3、例：

　　

        注意：px代表像素单位

 

二、标签选择器

选择器定义：在页面中找元素、标签、标记的方法

标签选择器：只需要写要找的标签的名字即可

 

三、id选择器

给标签设置id属性，在css代码中使用#id名字的方式来寻找页面中的元素、标签、标记

命名规则：

    1.不允许使用数字开头

    2、不允许使用中文

    3、不允许使用下划线（_）和中划线（-）之外的符号

 

四、类选择器

给标签设置class属性，在css中设置.class名字

 

总结：

    1.id命名不能冲突

    2.id命名不能一个标签设置多个

    3.class命名可以冲突

    4.class命名还可以给一个标签设置多个

    5.不管是id还是class命名规则一致

 

五、CSS特性

1.CSS继承性：给祖先元素设置的元素可以继承给儿孙元素。如果儿孙有自己的元素，那么一定是自己的。（集成的样式，权重较低）

2.覆盖性：先写的代码会被后写的覆盖，代码的权重是由上到下。

 

六、优先级

在给同一个标签设置样式的时候才有所谓的优先级权重对比

标签选择器<类选择器<id选择器

七、CSS的引入方式

1.内嵌式css:代码写在style标签中，放在head标签的里面，title标签的下面；

2.外链式css:css代码单独写在css文件中，通过link标签，里面的href设置的路径来选中，此种写法实现了css和html代码的分离，修改代码更容易查找

3.行内css:css代码写在html标签的身上，此种语法强烈不推荐使用，因为修改不方便，还会造成代码量的增多，从而降低页面的打开速度，影响用户体验。

 

权重：（内嵌=外链）< 行内

注意：可以添加!important提高权重 （div{color: red!important;}）

 

测试点：电商网页的首页，必须使用内嵌式（外链式打开速度比内嵌慢）；求他页面要求使用外链式。

八、后代选择器

语法：div span{}

解释：在css选择器中如果出现空格，代表寻找后代（儿子、孙子、重孙子….）

九、并列、并集选择器

语法：div,span,h1.#gaga{}

解释：使用英文状态下的逗号来链接想要一起设置的元素

九、高级权重对比

id100斤 class10斤 标签1斤

只要是给同一个标签设置的样式，就会根据最后数值的相加结果来定优先级，数值越大，优先级越高

十、边框属性

给页面中的元素添加的外围边框属性；

程序员叫他们“边框”，UI设计师叫他们“描边

 

十一、盒子模型

边框+内容+内边距（内填充、padding）+外边距（外填充、margin）组合起来叫盒子模型

掌握下图中的内边距（内容和边框的距离）、外边距（盒子与盒子的距离）在哪里

十二、html5新标签

音频标签和视频标签是html5才出现的新标签，现在我们进行测试的时候，要打开ie 谷歌、火狐三大浏览其来看是否能正常运行

十三、ie浏览器版本

ie浏览器是微软公司Windows系统自带浏览器，它不允许软件管家更新版本，只能自己去官网下载，导致很多用户一直使用的是低版本ie,这就造成很多兼容性问题，因为ie9以上版本的兼容性才好些，ie9以下各种bug，作为测试人员必须要测试ie低版本（7、8、9、10）

 

十四、H5的概念

定义：html5+css+javascript三个技术的几何体；（h5这个词是中国独有的，一般指代使用以上三个计数实现的特效绚丽的小页面）