技术分享 | Web测试方法与技术之CSS讲解
CSS 就是层叠样式表(Cascading Style Sheets),定义如何显示 HTML 元素。HTML 元素的样式通常存储在层叠样式表中。
为什么要使用CSS
使用 CSS 可以定义 HTML 元素显示的样式,其实是为了解决内容与表现分离的问题。通过 CSS 可以让相同的一个页面在不同的浏览器当中呈现相同的样式。
CSS组成
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值,属性和值被冒号分开。
要查看页面中的 CSS 又需要用到浏览器的开发者工具了。打开 Elements 面板。在面板右侧展示的就是 CSS。
CSS选择器
CSS 首先需要通过选择器来确定要定义样式的元素。常用的选择器有下面这几种。
通用选择器:*
选择器 | 示例 | 示例说明 |
---|---|---|
* | * | 选取所有元素 |
id 选择器:#id {}
选择器 | 示例 | 示例说明 |
---|---|---|
#id | #firstname | 选择 id="firstname" 的元素 |
class 选择器:.className {}
选择器 | 示例 | 示例说明 |
---|---|---|
.class | .intro | 选择 class="intro" 的所有元素 |
.class1.class2 | .name1.name2 | 选择 class 属性中同时有 name1 和 name2 的所有元素 |
.class1 .class2 | .name1 .name2 | 选择作为类名 name1 元素后代的所有类名 name2 元素 |
元素选择器:tag {}
选择器 | 示例 | 示例说明 |
---|---|---|
element | p | 选择所有 <p> 元素 |
element.class | p.intro | 选择 class="intro" 的所有 <p> 元素 |
element,element | div, p | 选择所有 <div> 元素和所有 <p> 元素 |
element element | div p | 选择 <div> 元素内的所有 <p> 元素 |
element>element | div > p | 选择父元素是 <div> 的所有 <p> 元素 |
element+element | div + p | 选择紧跟 <div> 元素的首个 <p> 元素 |
element1~element2 | p ~ ul | 选择前面有 <p> 元素的每个 <ul> 元素 |
属性选择器:[属性] {}
选择器 | 示例 | 示例说明 |
---|---|---|
[attribute] | [target] | 选择带有 target 属性的所有元素 |
[attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素 |
[attribute^=value] | a[href^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素 |
[attribute$=value] | a[href$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素 |
[attribute*=value] | a[href*="abc"] | 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素 |
CSS创建
-
外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
-
内部样式表
<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>
上面例子中的 hr
和 p
就是用了元素选择器来确定要定义样式的元素。
-
内联样式:
<pstyle="color:sienna;margin-left:20px">这是一个段落。</p>
常见CSS样式
背景
-
background 简写属性,可以跟下面的所有值
-
background-color 设置元素的背景颜色
-
background-image 把图像设置为背景
-
background-position 设置背景图像的起始位置
-
background-repeat 设置背景图像是否及如何重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
p {
background-color: red;
}
body {
background-image: url("[xx.png](https://ceshiren.com/uploads/default/optimized/1X/809c63f904a37bc0c6f029bbaf4903c27f03ea8a_2_180x180.png)");
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<div id="first" class="content">
<p>设置了红色背景</p>
</div>
</body>
</html>
文本
-
color 设置文本颜色
-
text-align 对齐元素中的文本
-
text-decoration 向文本添加修饰
-
text-indent 缩进元素中文本的首行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
h1 {
color: blue;
text-align: center;
}
p {
color: red;
text-align: left;
text-decoration: underline;
text-indent: 50px;
}
</style>
</head>
<body>
<div id="first" class="content">
<h1>蓝色文字</h1>
<p>正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行正文第二行</p>
</div>
</body>
</html>
字体
-
font 在一个声明中设置所有的字体属性
-
font-family 指定文本的字体系列
-
font-size 指定文本的字体大小
-
font-style 指定文本的字体样式
-
font-weight 指定字体的粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
p {
font-family: "Times New Roman";
font-size: 200%;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<div id="first" class="content">
<p>content</p>
</div>
</body>
</html>
列表
-
list-style 把所有用于列表的属性设置在一个声明中
-
list-style-image 将图像设置为列表项标志
-
list-style-type 设置列表项标值的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
ul {
list-style-image: url('https://ceshiren.com/uploads/default/optimized/1X/809c63f904a37bc0c6f029bbaf4903c27f03ea8a_2_32x32.png');
list-style-type: circle;
}
</style>
</head>
<body>
<div id="first" class="content">
<ul>
<li>python</li>
<li>java</li>
<li>go</li>
</ul>
</div>
</body>
</html>
表格
-
border 设置表格边框
-
border-collapse 设置表格的边框是否被折叠成一个单一的边框或者隔开
-
width 定义表格的宽度
-
text-align 表格中的文本对齐
-
padding 设置表格中的填充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
#students {
border-collapse: collapse;
width: 100%;
}
#students td, #students th {
border: 1px solid red;
padding: 8px;
}
#customers th {
text-align: left;
color: white;
}
</style>
</head>
<body>
<table id="students">
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>男</td>
</tr>
</table>
</body>
</html>
定位
-
static:没有定位,遵循正常的文档流对象
-
relative:相对定位,元素的定位是相对其正常位置
-
fixed:元素的位置相对于浏览器窗口是固定位置
-
absolute:绝对定位,元素的位置相对于最近的已定位父元素
-
sticky:粘性定位,基于用户的滚动位置来定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
div.static {
position: static;
border: 3px solid green;
}
div.relative {
position: relative;
left: 30px;
border: 3px solid red;
}
</style>
</head>
<body>
<h1>定位</h1>
<p>设置不同的定位方式</p>
<div class="static">
这个 div 元素设置正常文档流定位方式
</div>
<div class="relative">
这个 div 元素设置相对定位
</div>
</body>
</html>
盒子模型
所有 HTML 元素可以看作盒子,在 CSS 中,“box model”这一术语是用来设计和布局时使用。
CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素。它包括:边距,边框,填充,和实际内容。
盒模型允许在其它元素和周围元素边框之间的空间放置元素。
-
Margin(外边距):清除边框外的区域,外边距是透明的。
-
Border(边框):围绕在内边距和内容外的边框。
-
Padding(内边距):清除内容周围的区域,内边距是透明的。
-
Content(内容):盒子的内容,显示文本和图像。
也就是说,当要指定元素的宽度和高度属性时,除了设置内容区域的宽度和高度,还可以添加内边距,边框和外边距。
相关文章
- web开发中的Cookie与Session技术
- 云集,让 web app 像 native app 那样运行(雄起吧,Web 开发者)
- 【Web Audio API】 — 那些年的 web audio
- HT for Web的HTML5树组件延迟加载技术实现
- 开发小程序直播与连麦,你必须了解的技术点
- 【华为云技术分享】漫谈LIteOS-物联网操作系统介绍
- 技术竞争力之Web技术方向
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API
- Web 开发中 20 个很有用的 CSS 库 - WEB开发者
- CNStack 2.0:云原生的技术中台
- 阿里产品专家:高情商的技术人,如何做沟通?
- SPSS分析技术:二阶聚类分析;为什么出现大学生“裸贷”业务,因为放贷者知道贷款者还不起
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
- eclipse自动部署web项目时WEB-INFlib目录下缺少maven依赖jar包
- 【云栖大会】高德技术副总裁田密:智能定位带来的时代新机会
- Nikto是一款Web安全扫描工具,可以扫描指定主机的web类型,主机名,特定目录,cookie,特定CGI漏洞,XSS漏洞,SQL注入漏洞等,非常强大滴说。。。
- 【技术干货】浏览器工作原理和常见WEB攻击 (下)
- Atitit web 3.0(web技术)展望与实现 和语义网络 目录 1. 为了说明Web 3.0,我们需要回顾Web历史上的重要浪潮。2 1.1. 2.Web 2.0:任何人可以参与。Web
- Atitit 面试技术点最小化问题法总结 目录 1. Web 前端1 1.1. Jq 常用操作哪些??1 1.2. 查询后如何绑定后端数据到表格2 1.3. 提交后怎么接受表单数据2 2.
- Atitit 技术领域之道 技术领域的艺术attilax著 v2 s66.docx Atitit 技术领域之道 attilax著 1. 分类1 1.1. 按照架构 web cs桌面1 1.2.
- paip.提升用户体验---高性能web解决 c++ mycp 技术.
- 高性能Web动画和渲染原理系列(4)“Compositor-Pipeline演讲PPT”学习摘要【华为云技术分享】
- 这个大学生开发者用技术解决收入问题,乡亲们都回村了
- MySQL分区技术 (一)
- 软件测试技术之iOS 单元测试—逻辑测试
- 【Web测试】各类web控件测试点汇总,软测人必备
- 域名前置网络攻击技术——本质上就是域名别名,将c2的域名用一个合法的域名隐藏起来
- 论文投稿指南——中文核心期刊推荐(电子、通信技术)
- [项目管理] 技术经验分享的重要性