上篇文章我们介绍了HTML的相关知识,作为web的三种重要文件资源之一,CSS也是我们作为测试工程师必须要有所了解的知识,比如我们在web测试工作中,CSS定位能够迅速帮我们定位到元素。本篇文章我们就来介绍一下作为测试工程师,我们需要掌握的CSS知识。
CSS(Cascading Style Sheets)即层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化,是最常用的网页修饰语言。
它具有下列优势:
css基本语法
CSS的定义是由三部分组成的,包括选择符( selector)、属性( properties)、属性值(value)语法如下:
css选择器{ 属性1:属性值1; 属性2:属性值2; …… }
注意:每个属性有一个值,属性和值用冒号隔开。如果要定义不止一一个“属性:属性值”的声明时,需要用分号将每个声明分开,最后一条声明规则可以不加分号(建议每条声明的末尾都加上分号,会减少出错的可能。)
例如:
cssh1{ /*标记选择器h1选中网页的所有<h1>标记*/color :red; /*设置文字的颜色属性为红色*/font-size:14px; /*设置文字的大小属性为14像素*/}
注:css中使用/* */做注释。
如果属性值由多个单词组成是 需要用引号括起来,例如:
cssh2{ font-family: 'All New Mercedes-Benz' ;}
注:
CSS是用于修饰网页的,所以我们要将CSS使用到网页中,主要有四种方法分别是:内嵌样式、内部样式、使用标记链接外部样式表、使用CSS的@import标记导入外部样式文件。
内嵌样式指将CSS规则混合在HTML标记中使用的方式。CSS规则作为HTML标记style属性的属性值。例如:
html<a style="color:red; font-size: 28px;">测试人</a>
例如:
html<!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>
注:内嵌样式只対其所在的标记起作用,其他的同类标记不受影响,故不建议使用这种方法。
内嵌样式只能定义某一个标记的样式,如果要对整个网页文档的某个标记进行特定样式定义时,就需要使用内部样式。内部样式一般是在<head>标记中并使用<style>标记进行定义。语法格式如下所示:
css<style type="text/css"> 选择器{ 属性:属性值; 属性:属性值; …… }</style>
示例如下:
html<!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>
外部样式是将样式表以单独的文件(文件后缀一般为.css )存放,让网站的所有网页通过<link>标记均可引用此样式文件。
优点:
注:<link>标记一般放到页面的<head>区域内。使用<link>标记引人外部样式文件的语法格式如下:
html<link rel="stylesheet" type="text/css" href=" 样式表源文件地址:">
html<!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>
外部样式文件内容:
css#p{ color:red; font-size:20px;}
内嵌样式、内部样式、外部样式之间的本质区别:
(1)外部样式用于定义整个网站样式。 (2)内部样式用于定义整个网页样式。 (3)内嵌样式用于定义某个标记样式。
格式:
html@import url(样式表源文件地址)
注:@import只能放在<style>标记内使用,而且必须放在其他CSS样式之前。其中,urI为关键字,不能随便更改。
例如:
html<!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>
外部样式文件:
css#p{ color:red; font-size:20px;}
元素选择器最常见的是CSS选择器,又称为类型选择器。
元素选择器基本语法格式如下:
cssHTML元素名{ 样式属性:属性值; 样式属性:属性值; ……}
实例:
cssh2{ color:blue; font-size:26px;}
示例:
html<!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>
页面如下:
ID选择器类似于类选择器,但也有一些差别。
相同点:类选择器和ID选择器在定义和使用时都是区分大小写。
主要区别:
ID选择器的语法格式:
css#ID选择器名称{ 样式属性:属性值; 样式属性:属性值; ......}
使用ID选择器的语法格式如下所示:
css<标记名称id="ID选择器名称" >
示例:
html<!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>
页面如下:
元素选择器可以设置网页中所有相同标记的统一格式,但如果需要对相同标记中某些个别标记做其他效果设置时,使用HTML元素标记就无法实现。 类(class )选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。语法格式如下所示:
css.类选择器名称{ 样式属性:属性值; 样式属性:属性值; ……}
注: 类选择器的定义是以英文圆点开头。类选择器的名称可以任意(但是不能用中文)但最好以驼峰方式命名。
类选择器的使用语法格式如下:
css< 标记名称 class="类选择器名称1 类选择器名称2 ..."# 例如<div class="myBoxColor myBoxBackground"> </div>
这里定义了两个类选择器,在HTML的div标记使用这两个类选择器,在使用两个以上的类选择器时,其名称之间要用空格分隔,最终这两选择器定义的样式会叠加,并在div标记中呈现。如果在两个类选择器中都对同一个样式属进行了样式定义,则最后定义的样式起作用。
示例:
html<!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测试有很大的帮助,希望本文能够帮到大家!
获取更多技术资料,请点击!
推荐
Python全栈开发与自动化测试开发班 由浅入深实战进阶,从小白到高手
以Python全栈开发为基础,深入教授自动化测试技能,为学员打造全面的技术能力。通过系统学习和实际项目实战,学员将具备在职场中脱颖而出的竞争力。不仅能够灵活运用Python进行开发,还能够保障项目质量通过自动化测试手段。这是一个全面提升职业竞争力的机会。
课程详情 Python开发必备基础技能与项目实战 Pvthon 编程语言/算法和数据结构/面向对象编程Web后端开发/前端开发/测试管理平台项目实战
人工智能ChatGPT实战 人工智能辅助学习各种开发和测试技能/Pytorch深度学框架/平台开发实战
数据分析与自动化办公 数据采集/Pandas与数据处理技术/ECharts与数据可视化技术/爬虫实战/自动化办公/批量文件处理
UI自动化测试与高级项目实战 Web自动化测试/App自动化测试/ PageObject设计模式
接口自动化测试 接口协议分析/Mock实战/服务端接口测试
性能测试 性能测试流程与方法/JMeter 脚本参数化/Grafana监控系统搭建
简历指导与模拟面试 1V1简历指导/模拟真实面试/测试开发岗面试全攻略名企私教服务 名企专家1v1辅导/行业专家技术指导/针对性解决工作难题/绩效提升辅导与晋升复盘
课程亮点 名企私教服务 先学习后付费 高额奖学金 专属社群+晚自习在线答疑 5V1全方位辅导作业+考试强化学习效果 简历修改 模拟面试 就业内推 面试复盘