软件测试 / 测试开发丨 Web 端测试—CSS 讲解 学习笔记
本文转自测试人社区,霍格沃兹测试开发学社学员笔记
原文链接:https://ceshiren.com/t/topic/29441
一、CSS 入门
1.1、什么是 CSS
CSS 指层叠样式表(Cascading Style Sheets)
样式通常存储在样式表中
1.2、为什么要使用 CSS
样式定义如何显示 HTML 元素
为了解决内容与表现分离的问题
主要目的:可以让相同的一个页面在不同的浏览器当中呈现相同的样式
二、基础语法
2.1、CSS 组成
![](https://static001.geekbang.org/infoq/c7/c74121934ce7445a218e235b523baf5b.png)
2.2、CSS 选择器
id 选择器:#id {}
class 选择器:.className {}
元素选择器:tag {}
属性选择器:[属性] {}
2.3、CSS 创建
外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表
内联样式:<p style="color:sienna;margin-left:20px">这是一个段落。</p>
2.4、背景
background:简写属性,可以跟下面的所有值
background-color:设置元素的背景颜色
background-image:把图像设置为背景
background-position:设置背景图像的起始位置
background-repeat:设置背景图像是否及如何重复
2.5、文本
color:设置文本颜色
text-align:对齐元素中的文本
text-decoration:向文本添加修饰
text-indent:缩进元素中文本的首行
vertical-align:设置元素的垂直对齐
2.6、字体
font:在一个声明中设置所有的字体属性
font-family:指定文本的字体系列
font-size:指定文本的字体大小
font-style:指定文本的字体样式
font-weight:指定字体的粗细
2.7、列表
list-style:把所有用于列表的属性设置在一个声明中
list-style-image:将图像设置为列表项标志
list-style-type:设置列表项标值的类型
2.8、表格
border:设置表格边框
border-collapse:设置表格的边框是否被折叠成一个单一的边框或者隔开
width:定义表格的宽度
text-align:表格中的文本对齐
padding:设置表格中的填充
2.9、定位
static:没有定位,遵循正常的文档流对象
relative:相对定位,元素的定位是相对其正常位置
fixed:元素的位置相对于浏览器窗口是固定位置
absolute:绝对定位,元素的位置相对于最近的已定位父元素
sticky:粘性定位,基于用户的滚动位置来定位
2.10、盒子模型
Margin(外边距):清除边框外的区域,外边距是透明的。
Border(边框):围绕在内边距和内容外的边框。
Padding(内边距):清除内容周围的区域,内边距是透明的。
Content(内容):盒子的内容,显示文本和图像
![](https://static001.geekbang.org/infoq/f6/f6f26b799591f5fb66512cecd424edc0.png)
2.11、网页布局
![](https://static001.geekbang.org/infoq/34/34137ff693549080e38ad0f5c6738134.png)
推荐
Python 全栈开发与自动化测试开发班
由浅入深实战进阶,从小白到高手
以 Python 全栈开发为基础,深入教授自动化测试技能,为学员打造全面的技术能力。通过系统学习和实际项目实战,学员将具备在职场中脱颖而出的竞争力。不仅能够灵活运用 Python 进行开发,还能够保障项目质量通过自动化测试手段。这是一个全面提升职业竞争力的机会。
课程详情
Python 开发必备基础技能与项目实战
Pvthon 编程语言/算法和数据结构/面向对象编程 Web 后端开发/前端开发/测试管理平台项目实战
人工智能 ChatGPT 实战
人工智能辅助学习各种开发和测试技能/Pytorch 深度学框架/平台开发实战
数据分析与自动化办公
数据采集/Pandas 与数据处理技术/ECharts 与数据可视化技术/爬虫实战/自动化办公/批量文件处理
UI 自动化测试与高级项目实战
Web 自动化测试/App 自动化测试/ PageObject 设计模式
接口自动化测试
接口协议分析/Mock 实战/服务端接口测试
性能测试
性能测试流程与方法/JMeter 脚本参数化/Grafana 监控系统搭建
简历指导与模拟面试
1V1 简历指导/模拟真实面试/测试开发岗面试全攻略名企私教服务 名企专家 1v1 辅导/行业专家技术指导/针对性解决工作难题/绩效提升辅导与晋升复盘
课程亮点
名企私教服务 先学习后付费 高额奖学金
专属社群+晚自习在线答疑
5V1 全方位辅导作业+考试强化学习效果
简历修改 模拟面试 就业内推 面试复盘
![](https://static001.infoq.cn/static/write/img/img-copy-disabled.4f2g7h.png)
福利一: 测试开发精品课免费学
![](https://static001.infoq.cn/static/write/img/img-copy-disabled.4f2g7h.png)
福利二:免费领取技能图谱 &大厂面试题合集
![](https://static001.infoq.cn/static/write/img/img-copy-disabled.4f2g7h.png)
版权声明: 本文为 InfoQ 作者【测试人】的原创文章。
原文链接:【http://xie.infoq.cn/article/845d08f12dfc192face726271】。文章转载请联系作者。
评论