Web开发

首页 » 常识 » 问答 » 软件测试测试开发丨Web端测试CSS讲
TUhjnbcbe - 2024/8/26 17:25:00

本文转自测试人社区,霍格沃兹测试开发学社学员笔记

一、CSS入门1.1、什么是CSS

CSS指层叠样式表(CascadingStyleSheets)

样式通常存储在样式表中

1.2、为什么要使用CSS

样式定义如何显示HTML元素

为了解决内容与表现分离的问题

主要目的:可以让相同的一个页面在不同的浏览器当中呈现相同的样式

二、基础语法2.1、CSS组成2.2、CSS选择器

id选择器:#id{}

class选择器:.className{}

元素选择器:tag{}

属性选择器:[属性]{}

2.、CSS创建

外部样式表:linkrel="stylesheet"type="text/css"href="mystyle.css"

内部样式表

内联样式:pstyle="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(内容):盒子的内容,显示文本和图像

2.11、网页布局推荐

Python全栈开发与自动化测试开发班

由浅入深实战进阶,从小白到高手

以Python全栈开发为基础,深入教授自动化测试技能,为学员打造全面的技术能力。通过系统学习和实际项目实战,学员将具备在职场中脱颖而出的竞争力。不仅能够灵活运用Python进行开发,还能够保障项目质量通过自动化测试手段。这是一个全面提升职业竞争力的机会。

课程详情

Python开发必备基础技能与项目实战

Pvthon编程语言/算法和数据结构/面向对象编程Web后端开发/前端开发/测试管理平台项目实战

人工智能ChatGPT实战

人工智能辅助学习各种开发和测试技能/Pytorch深度学框架/平台开发实战

数据分析与自动化办公

数据采集/Pandas与数据处理技术/ECharts与数据可视化技术/爬虫实战/自动化办公/批量文件处理

UI自动化测试与高级项目实战

Web自动化测试/App自动化测试/PageObject设计模式

接口自动化测试

接口协议分析/Mock实战/服务端接口测试

性能测试

性能测试流程与方法/JMeter脚本参数化/Grafana监控系统搭建

简历指导与模拟面试

1V1简历指导/模拟真实面试/测试开发岗面试全攻略名企私教服务名企专家1v1辅导/行业专家技术指导/针对性解决工作难题/绩效提升辅导与晋升复盘

课程亮点

名企私教服务先学习后付费高额奖学金

专属社群+晚自习在线答疑

5V1全方位辅导作业+考试强化学习效果

简历修改模拟面试就业内推面试复盘

1
查看完整版本: 软件测试测试开发丨Web端测试CSS讲