软件测试需要具备的基础知识【功能测试】---前端知识（二）

程序员小羊！

已于 2024-08-17 22:10:47 修改

阅读量697

点赞数 31

分类专栏： # 测试开发文章标签：前端

于 2024-08-01 22:21:17 首次发布

本文链接：https://blog.csdn.net/m0_63815035/article/details/140857407

版权

测试开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插## 标题入图片描述

您好，我是程序员小羊！

前言

为了更好的学习软件测试的相关技能，需要具备一定的基础知识。需要学习的基础知识包括：
1、计算机基础
2、前端知识
3、后端知识
4、软件测试理论
后期分四篇文章进行编写，这是第二篇

下面接着上面文章继续分享：

上面那篇文章讲了HTML的一些基础知识，下面继续分享前端三件套的CSS和JS

进入正题：

CSS基础

1. CSS简介

CSS：(Cascading Style Sheets)指层叠样式表
作用：用来定义如何显示HTML元素（定义HTML元素的样式），就像HTML 中的字体标签和颜色属性所起的作用那样
样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS文档就可以改变所有页面的布局和外观

2. CSS语法

在这里插入图片描述

选择器：是用来指定要改变样式的HTML元素每条声明由一个属性和一个值组成属性代表要设置的样式属性，每个属性有一个值，属性和值被冒号分开
CSS声明总是以分号(;)结束，声明总以大括号({})括起来在HTML文档中，可以把样式定义在 <style></style> 标签中

1、style标签写在title标签的后面
2、选择器{ 属性名1:属性值1; 属性名2:属性值2; }
color 代表颜色
font-size 代表字号，px代表像素单位（在css中90%以上的情况，数字后面必须跟单位）
例：

>   <style type="text/css"> 		
>   div{ color: red; font-size: 100px; }
> 	</style>

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
		/*这是个注释*/
			p {
				color: red;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

2.1 CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它 CSS注释以 /* 开始, 以 */ 结束
为了界面简洁，观察上面代码

应用场景：

1、内嵌式应用在电商网站首页，因为对网页的打开速度有严格的要求，一次性把html和css都加载进来；
2、外链式应用在除了电商网站首页，实现代码的分离，方便后期修改
3、了解行内式：css代码写在标签的身上，强烈不推荐使用！修改不方便、重复代码太多，导致页面加载速度变慢！
例：以下写法就是反面教材！！！
	<p style="color: red;">小羊</p>

CSS选择器

1. CSS选择器介绍

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。常用的CSS选择器有：
id选择器

1、class选择器
2、标签选择器
3、属性选择器
4、后代选择器
5、子元素选择器

2. id选择器

id选择器是通过元素的id属性来选择元素
使用id选择器时，要求元素必须有id属性
CSS中id选择器以 “#” 来定义，比如： #test01

```bash
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			#test01 {
				color: red;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p id="test01">Hello World!</p>
	</body>
</html>```

2.1 id属性的命名规则和唯一性

命名规则：

不要以数字开头
不能使用中划线和下划线之外的符号
不推荐使用中文
尽量做到见名知意：见到名字知道意思
唯一性：
注意：class类选择器可以重复命名；每个标签可以有多个class类名，中间使用空格分割即可
在整个HTML文档中id属性必须是唯一的
注意：HTML文档不会严格校验id属性是否唯一，在不规范的HTML文档中会出现id重复的情况！！！

3. class选择器

class选择器是通过元素的class属性来选择元素，又称类选择器
使用class选择器时，要求元素必须有class属性
class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
CSS中class选择器以 “.” 来定义，比如： .center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.center {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1 class="center">标题居中</h1>
		<p class="center">第一段文字</p>
		<p class="center">第二段文字</p>
	</body>
</html>

提示：class属性的第一个字符不能使用数字

4.标签选择器

标签选择器是通过元素的标签名称来选择元素，又称元素选择器
CSS中标签选择器直接使用标签名称来定义，比如： p 、 input

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			h1 {
				text-align: center;
			}

			p {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>标题居中</h1>
		<p>第一段文字</p>
		<p>第二段文字</p>
	</body>
</html>

5. 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素
属性选择器可以使用HTML元素的任意属性，而不仅限于id和class属性
简单属性选择：
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器；
格式： [属性名]
根据具体属性值选择：
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素；
格式： [属性名=“属性值”]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			[href] {
				color: red;
			}

			[title="古诗标题"] {
				color: blue;
			}

			[id="first"] {
				color: green;
			}

			[class="second"] {
				color: yellow;
			}
		</style>
	</head>
	<body>
		<a href="https://www.itheima.com">黑马程序员</a>
		<h1 title="古诗标题">静夜思</h1>
		<p id="first">床前明月光，疑似地上霜。</p>
		<p class="second">举头望明月，低头思故乡。</p>
	</body>
</html>

6. 后代选择器

后代选择器可以选择作为某元素后代的元素，后代元素包括（儿子、孙子、重孙子…）语法规则：多个选择器用空格分隔，例如 p
span{color: red;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			/*p span{color: red;}*/
			div span {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<span>我是span</span>
			<p>
				<span>我也是span</span>
				<br />
				<span>我也是span</span>
			</p>
		</div>
	</body>
</html>

7. 子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
语法规则：多个选择器用大于号 > 分隔，例如 div>span{color: red;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			div>span {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<span>我是span</span>
			<p>
				<span>我也是span</span>
				<br />
				<span>我也是span</span>
			</p>
		</div>
	</body>
</html>

布局的标签

布局标签：当没有任何语义的时候，就可以使用div或span来进行内容的包裹
		目的是后期css代码可以找到对应标签中的内容来设置样式
div：独占一行空间，称之为大盒子
span：一行可以放置多个，称之为小盒子
例：
<div>我是div</div>
<span>我是span</span>

结束语：

今天这篇文章就到这里了，文底会有一些作业大家可以抽空做下，在下篇文章的时候会把答案放在最后，大厦之成，非一木之材也；大海之阔，非一流之归也，希望大家能持续关注下，文章从浅入深，也欢迎大佬们的随时指导！！！
在这里插入图片描述

扩展知识：

一、开发人员调试工具

1、打开方式：f12或在网页中右键–检测
2、找到菜单中的第一个选项：elements（元素、标签、标记）
3、用鼠标左键点击想要查看的标签
4、右侧就会出现对应的css代码
5、想设置颜色：点击颜色前面的方框，使用调色盘改变颜色后，别忘了把颜色的代码放在程序中；
6、设置数字大小：鼠标左键点击数字，按键盘的上、下可以调整大小，最终的代码也要自己更改才可以生效

在这里插入图片描述

二、扩展知识：

1、:hover 伪类：鼠标移入动作执行后的css代码例： p:hover{color: blue;}
注意：鼠标移入和鼠标悬停不是一个动作！
2、并列、并集选择器：需要一句话选择多个元素的时候，可以使用逗号进行连接语法：
h1,div,span,p{}
3、后代选择器：后代选择器：使用空格来进行选取后代元素的方式语法： div span{ }
找div的后代span（儿子、孙子、重孙子。。。都算后代）代码从左向右执行，我们就从左向右读代码