软件测试/测试开发|作为测试工程师，必须掌握的CSS知识_CSS

简介

上篇文章我们介绍了HTML的相关知识，作为web的三种重要文件资源之一，CSS也是我们作为测试工程师必须要有所了解的知识，比如我们在web测试工作中，CSS定位能够迅速帮我们定位到元素。本篇文章我们就来介绍一下作为测试工程师，我们需要掌握的CSS知识。

CSS

CSS（Cascading Style Sheets）即层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，是最常用的网页修饰语言。

它具有下列优势：

  • 格式和结构分离：有利于格式的重用以及网页的修改与维护。
  • 精确控制页面布局：对网页实现更加精确的控制，如网页的布局，字体，颜色，背景等。
  • 实现多个网页同时更新。

css基本语法

CSS的定义是由三部分组成的，包括选择符( selector)、属性( properties)、属性值（value）语法如下：

选择器{
    属性1:属性值1;
    属性2:属性值2;
    ……
    }

注意：每个属性有一个值，属性和值用冒号隔开。如果要定义不止一一个“属性:属性值”的声明时，需要用分号将每个声明分开，最后一条声明规则可以不加分号（建议每条声明的末尾都加上分号，会减少出错的可能。）

例如：

h1{              /*标记选择器h1选中网页的所有<h1>标记*/
color :red;      /*设置文字的颜色属性为红色*/
font-size:14px;  /*设置文字的大小属性为14像素*/
}

注：css中使用/* */做注释。

如果属性值由多个单词组成是 需要用引号括起来，例如：

h2{
    font-family: 'All New Mercedes-Benz' ;
}

注：

  • 包含空格不会影响CSS在浏览器中的工作效果。
  • CSS对大小写是不敏感的。
  • 如果涉及与HTML文档一起工作， class类选择器和id选择器对名称的大小写是敏感的。

css使用方法

CSS是用于修饰网页的，所以我们要将CSS使用到网页中，主要有四种方法分别是：内嵌样式、内部样式、使用标记链接外部样式表、使用CSS的@import标记导入外部样式文件。

  1. 内嵌样式

内嵌样式指将CSS规则混合在HTML标记中使用的方式。CSS规则作为HTML标记style属性的属性值。例如:

<a style="color:red; font-size: 28px;">测试人</a>

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>样式使用</title>
</head>
<body>
	<a href="https://ceshiren.com/" style="color:red; font-size: 28px;">测试人</a> <br>
	<a href="https://ceshiren.com/" >测试人</a>
</body>
</html>

注：内嵌样式只対其所在的标记起作用，其他的同类标记不受影响，故不建议使用这种方法。

  1. 内部样式

内嵌样式只能定义某一个标记的样式，如果要对整个网页文档的某个标记进行特定样式定义时，就需要使用内部样式。内部样式一般是在<head>标记中并使用<style>标记进行定义。语法格式如下所示:

<style type="text/css">
    选择器{
        属性:属性值;
        属性:属性值;
        ……
    }
</style>

示例如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>样式使用</title>
<style type="text/css">
		#p{
			color: red;
			font-size: 28px;
		}
 
</style>
</head>
<body>
	<a href="https://ceshiren.com/" id="p">测试人</a> <br>
	<a href="https://ceshiren.com/" >测试人</a>
</body>
 
</html>
  1. 外部样式

外部样式是将样式表以单独的文件(文件后缀一般为.css )存放，让网站的所有网页通过<link>标记均可引用此样式文件。

优点：

  • 降低网站的维护成本，
  • 让网站拥有统一的风格。

注：<link>标记一般放到页面的<head>区域内。使用<link>标记引人外部样式文件的语法格式如下:

<link rel="stylesheet" type="text/css" href=" 样式表源文件地址:">
  • href属性中的外部样式文件地址的填写方法和超链接的链接地址的写法一样；
  • rel="stylesheet"的作用是告诉浏览器链接的是一个样式表文件，是固定格式；
  • type="text/css"表示传输的文本类型为样式表类型文件，也是固定格式。
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>样式使用</title>
</head>
	<link rel="stylesheet" type="text/css" href="css3-3.css">
<body>
	<a href="https://ceshiren.com/" id="p">测试人社区</a> <br>
	<a href="https://ceshiren.com/" >测试人社区</a>
</body>
</html>

外部样式文件内容：

#p{
     color:red;
     font-size:20px;
}

内嵌样式、内部样式、外部样式之间的本质区别:

(1)外部样式用于定义整个网站样式。 (2)内部样式用于定义整个网页样式。 (3)内嵌样式用于定义某个标记样式。

  1. 使用@import引入外部样式文件

格式：

@import url(样式表源文件地址)

注：@import只能放在<style>标记内使用，而且必须放在其他CSS样式之前。其中，urI为关键字，不能随便更改。

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>样式使用</title>
	<style type="text/css">
		@import url("css4-4.css")
	</style>
</head>
<body>
<a href="https://ceshiren.com/" id="p">测试人</a> <br>
	<a href="https://ceshiren.com/" >测试人</a>
</body>
</html>

外部样式文件：

#p{
     color:red;
     font-size:20px;
}

CSS选择器

  1. 元素选择器

元素选择器最常见的是CSS选择器，又称为类型选择器。

元素选择器基本语法格式如下：

HTML元素名{
        样式属性:属性值;
        样式属性:属性值;
        ……
}

实例：

h2{
    color:blue;
    font-size:26px;
}

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>元素选择器</title>
	<style type="text/css">
		h2{
			color: red;
		}
		span{
			color: blue;
			font-size: 48px;
		}
	</style>
</head>
<body>
 	<h2>hogwarts</h2>
 	<h3>hogwarts</h3>
 	<span>hogwarts</span>
</body>
</html>

页面如下：

软件测试/测试开发|作为测试工程师，必须掌握的CSS知识_选择器_02

  1. ID选择器

ID选择器类似于类选择器，但也有一些差别。

相同点：类选择器和ID选择器在定义和使用时都是区分大小写。

主要区别：

  • 定义上ID选择器前面使用“#”号，而不是类选择器的点。
  • ID选择器在引用时不是通过class属性， 而是使用id属性。
  • 在一个HTML文档中，ID选择器仅允许使用一次，而类选择器可以使用多次。
  • ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表。

ID选择器的语法格式：

#ID选择器名称{
    样式属性:属性值;
    样式属性:属性值;
    ......
}

使用ID选择器的语法格式如下所示：

<标记名称id="ID选择器名称" >

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ID选择器</title>
	<style type="text/css">
		#p1{
			color: red;
			font-size: 25px;
		}
		#p2{

			font-size: 36px;
			text-decoration: underline;
			color: green;
		}
	</style>
</head>
<body>
	<h2 id="p1">hogwarts</h2>
	<h2 id=p2>hogwarts</h2>
</body>
</html>

页面如下：

软件测试/测试开发|作为测试工程师，必须掌握的CSS知识_html_03

  1. 类选择器

元素选择器可以设置网页中所有相同标记的统一格式，但如果需要对相同标记中某些个别标记做其他效果设置时，使用HTML元素标记就无法实现。 类(class )选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。语法格式如下所示：

.类选择器名称{
    样式属性:属性值;
    样式属性:属性值;
    ……
}

注： 类选择器的定义是以英文圆点开头。类选择器的名称可以任意(但是不能用中文)但最好以驼峰方式命名。

类选择器的使用语法格式如下：

< 标记名称 class="类选择器名称1 类选择器名称2 ..."

# 例如

<div class="myBoxColor myBoxBackground"> </div>

这里定义了两个类选择器,在HTML的div标记使用这两个类选择器，在使用两个以上的类选择器时，其名称之间要用空格分隔，最终这两选择器定义的样式会叠加，并在div标记中呈现。如果在两个类选择器中都对同一个样式属进行了样式定义，则最后定义的样式起作用。

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>类选择器</title>
	<style type="text/css">
		.p1{
			color: red;
			font-size: 25px;
		}
		.p2{
	
			font-size: 36px;
			text-decoration: underline;
			color: green;
		}
	</style>
</head>
<body>
	<h2 class="p1">hogwarts</h2>
	<h2 class=p2>hogwarts</h2>
</body>
</html>

总结

本文主要介绍了CSS的基本语法还有一些基本的选择器，掌握CSS的基础知识，对于我们更好地进行web测试有很大的帮助，希望本文能够帮到大家！