软件测试基础——CSS（四）

一、CSS样式

样式表/级联样式表/层叠样式表

代码：

1、CSS代码要写在style标签中

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

<style type="text/css">
	div{width: 100px; height: 100px; background: beige;}
	textarea{resize: none;}
</style>

（px代表像素单位）

二、标签选择器

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

标签选择器：写要找的标签名

div{width: 100px; height: 100px; background: beige;}
textarea{resize: none;}

三、调试工具用法

浏览器F12，找到elements选项，出现html标签，找到需要设置的标签，选中后右侧出现css样式，点击右侧样式即可实现更改

注意：调试工具更改后，需回到代码中更改才会生效

四、id选择器

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

<style type="text/css">
	#div1{background: mediumturquoise;}
	#div2{background: wheat;}
	#div3{background: tomato;}
</style>

...

<div id="div1">1111</div>
<div id="div2">2222</div>
<div id="div3">3333</div>

id命名规则：

1、不允许数字开头

2、不允许使用中文

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

五、类选择器

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

.zz{background: yellowgreen;}
<div class="zz">类1_1</div>

总结细节：

1、id命名不能重复

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

3、class命名可以重复

4、class命名可以给一个标签设置多个类

注意：无论是id还是class，命名规则一致

六、CSS特性

1、继承性：给祖先元素设置的样式，可以继承给儿孙元素；如果儿孙元素有自己的样式，那就选择自己的样式（继承的样式，权重较低）

2、覆盖性：先写的代码会被后写的代码覆盖，代码从上到下运行