技术分享 | Web测试方法与技术之CSS讲解

简介: 技术分享 | Web测试方法与技术之CSS讲解

原文链接

CSS 就是层叠样式表(Cascading Style Sheets),定义如何显示 HTML 元素。HTML 元素的样式通常存储在层叠样式表中。

为什么要使用CSS

使用 CSS 可以定义 HTML 元素显示的样式,其实是为了解决内容与表现分离的问题。通过 CSS 可以让相同的一个页面在不同的浏览器当中呈现相同的样式。

CSS组成

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值,属性和值被冒号分开。

要查看页面中的 CSS 又需要用到浏览器的开发者工具了。打开 Elements 面板。在面板右侧展示的就是 CSS。

CSS选择器

CSS 首先需要通过选择器来确定要定义样式的元素。常用的选择器有下面这几种。

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(内容):盒子的内容,显示文本和图像。

也就是说,当要指定元素的宽度和高度属性时,除了设置内容区域的宽度和高度,还可以添加内边距,边框和外边距。

⬇️ 点击“下方链接”,提升测试核心竞争力!

相关文章
|
22天前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
2月前
|
测试技术 UED
软件测试中的“灰盒”方法:一种平衡透明度与效率的策略
在软件开发的复杂世界中,确保产品质量和用户体验至关重要。本文将探讨一种被称为“灰盒测试”的方法,它结合了白盒和黑盒测试的优点,旨在提高测试效率同时保持一定程度的透明度。我们将通过具体案例分析,展示灰盒测试如何在实际工作中发挥作用,并讨论其对现代软件开发流程的影响。
|
22天前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
29天前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
41 4
|
1月前
|
Java 测试技术 Maven
Java一分钟之-PowerMock:静态方法与私有方法测试
通过本文的详细介绍,您可以使用PowerMock轻松地测试Java代码中的静态方法和私有方法。PowerMock通过扩展Mockito,提供了强大的功能,帮助开发者在复杂的测试场景中保持高效和准确的单元测试。希望本文对您的Java单元测试有所帮助。
79 2
|
1月前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
1月前
|
编解码 安全 Linux
网络空间安全之一个WH的超前沿全栈技术深入学习之路(10-2):保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali——Liinux-Debian:就怕你学成黑客啦!)作者——LJS
保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali以及常见的报错及对应解决方案、常用Kali功能简便化以及详解如何具体实现
|
1月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
1月前
|
人工智能 安全 Linux
网络空间安全之一个WH的超前沿全栈技术深入学习之路(4-2):渗透测试行业术语扫盲完结:就怕你学成黑客啦!)作者——LJS
网络空间安全之一个WH的超前沿全栈技术深入学习之路(4-2):渗透测试行业术语扫盲完结:就怕你学成黑客啦!)作者——LJS
|
1月前
|
安全 大数据 Linux
网络空间安全之一个WH的超前沿全栈技术深入学习之路(3-2):渗透测试行业术语扫盲)作者——LJS
网络空间安全之一个WH的超前沿全栈技术深入学习之路(3-2):渗透测试行业术语扫盲)作者——LJS