测试开发之前端篇-CSS层叠式样式表
CSS是层叠样式表(Cascading Style Sheets)的缩写，用于描述如何在屏幕、纸张或其他媒体上显示HTML元素，包括了定义网页及其元素的布局、风格、大小、位置和颜色等属性。
CSS的语法表示为：
以下是一个简单的例子，设置了网页主体（body）的背景色、标题（h1）的颜色和对齐方式、段落(p)的字体和大小。
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
网页中有3种引用样式表的方法，分别为：
1. 在head中使用link元素，导入外部样式表文件。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>在网页head中使用style元素，定义样式表内容。
2. 在网页head中使用style元素，定义样式表内容。
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
3. 使用style属性，直接将样式内容添加到元素中。
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
我们可以使用不同的CSS选择器，给元素设置样式，如下html中，可以使用#desc来选中id为desc的div元素，使用.btn选择所有包含类btn的提交按钮。
<head>
<style>
#desc {
background-color: blue;
}
.btn {
font-size: 20px;
}
</style>
</head>
<body>
<div id="desc">This is a desc</div>
<button class="btn">提交</button>
</body>
在Selenium自动化测试脚本中，通常使用CSS选择器，来定位网页中的元素。如以下代码，查找class为btn的按钮，并进行点击。
driver.find_element_by_css_selector('.btn').click()
建议大家阅读一下CSS属性手册和CSS选择器手册，以加深对层叠式样式表的了解。这部分内容不需要大家记忆，在以后的自动化测试工作中，作为手册进行查找即可。
测试开发之前端篇-CSS层叠式样式表的更多相关文章
- css 层叠式样式表（2）
一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...
- css 层叠式样式表（1）
实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中,通过引用来建立文件 ...
- css 层叠式样式表
内联样式:样式优先级最高的 <div style="width:100px;height:100px;"></div> style=“” 用冒号和分号 wi ...
- css 层叠式样式表（3）
样式分类 大小 -- 调整div大小,长 width,高 height.长可以直接100%横向沾满屏幕,高不可以. 背景 background-color 背景色 background-image ...
- 测试开发之前端——No5.HTML5中的表单事件
表单事件 由 HTML 表单内部的动作触发的事件. 适用于所有 HTML 5 元素,不过最常用于表单元素中: 属性 值 描述 onblur script 当元素失去焦点时运行脚本 onchange s ...
- 前端入门4-CSS属性样式表
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- Python开发【前端篇】CSS
1.css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多 ...
- 前端开发【第二篇: css】
css概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...
- 【Mock平台】测试开发实战01-开篇PRD和需求详细
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 平台背景 从业务特性上,不少测试的服务很多是依赖第三方的接口的,比如其中的支付场景,就需要很多状态的返回进行验证,但大部分服务提供商没有很 ...
- 深入理解脚本化CSS系列第四篇——脚本化样式表
× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...
随机推荐
- C. Sum of Substrings题解
C. Sum of Substrings 题目大概意思,给你一个01串,求和最小,其中和是该串所有相邻字符所组成的十进制数的和. 如:0110, sum = 01 + 11 + 10 = 22. 通过 ...
- 硬件开发笔记（七）: 硬件开发基本流程，制作一个USB转RS232的模块（六）：创建0603封装并关联原理图元器件
前言 有了原理图,可以设计硬件PCB,在设计PCB之间还有一个协同优先动作,就是映射封装,原理图库的元器件我们是自己设计的.为了更好的表述封装设计过程,本文描述了贴片电阻电容0603芯片封装,创建 ...
- Flex 弹性盒子布局
可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? 1. 弹性盒子布局概念 Flex 是 Flexible Box 的缩写,意为"弹性布 ...
- ASP.NET Core 微信支付（二）【 发布到服务器上签名加密时报错：系统找不到指定的文件 APIV3】
参考资料 .Net微信支付退款操作"系统找不到指定的文件" 错误现象 微信支付(API v3)的统一下单接口和订单查询接口在本地调试成功,可以使用,但是发布到服务器上之后调用接口就 ...
- 基于Python GDAL为长时间序列遥感图像绘制时相变化曲线图
本文介绍基于Python中gdal模块,对大量多时相栅格图像,批量绘制像元时间序列折线图的方法. 首先,明确一下本文需要实现的需求:现有三个文件夹,其中第一个文件夹存放了某一研究区域原始的多时 ...
- 【Azure App Service】App Service设置访问限制后，使用git clone代码库出现403报错
问题描述 在App Service中,为App Service配置了访问限制,结果导致在克隆App Service的代码时候,遇见403错误. 问题解答 因为在使用 git clone App Ser ...
- 【Azure 事件中心】EventHub 中同一条消息不停的推送给消费端问题记录
问题描述 EventHub 中同一条消息,不停的推送给消费端,查看日志发现错误: Caused by: com.azure.messaging.eventhubs.implementation.Par ...
- 【Azure 微服务】Azure Service Fabric 因证书问题而使得 Node 一直处于 Down 状态
问题描述 Service Fabric 集群更新证书后,重启Node后就变为Down的状态,反复 Restart 结果反复Down 问题分析 根据Service Fabric的文档表示,修改证书时一定 ...
- 什么是Redis持久化？
Redis持久化指的是将内存中的数据同步到硬盘文件,并在redis重新启动的时候将数据备份到硬盘上,从而保证数据的安全性.通过持久化, Redis可以在系统关闭时将数据保存到硬盘上,避免了数据丢失的风 ...
- Java 求数值型数组中的最大元素 最小值 平均值 总和等 要求：随机数是 两位数
1 /* 2 * 3 * 算法考查:求数值型数组中的最大元素 最小值 平均值 总和等 4 * 要求:随机数是 两位数 5 * [10,99] 6 * 公式:(int)(Math.random()*(9 ...