【测试基础】之03 CSS入门基础

凉生爱喝奶茶

已于 2023-03-14 22:57:59 修改

阅读量498

点赞数 19

分类专栏：从0-1测试之路文章标签：测试工具 css3 前端 Powered by 金山文档

于 2023-03-13 23:20:39 首次发布

本文链接：https://blog.csdn.net/qq_56161965/article/details/129510191

版权

从0-1测试之路专栏收录该内容

8 篇文章 4 订阅

订阅专栏

CSS基础

目标

知道CSS的作用

基本掌握CSS语法规则

CSS简介

CSS：(Cascading Style Sheets)指层叠样式表

作用：用来定义如何显示HTML元素（定义HTML元素的样式），就像 HTML 中的字体标签和颜色属性所起的

作用那样

样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观

CSS语法

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

选择器：是用来指定要改变样式的HTML元素

每条声明由一个属性和一个值组成

属性代表要设置的样式属性，每个属性有一个值，属性和值被冒号分开

CSS声明总是以分号(;)结束，声明总以大括号({})括起来

在HTML文档中，可以把样式定义在 <style></style> 标签中

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
        p {color:red; text-align:center;}
    </style>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它

CSS注释以 /* 开始, 以 */ 结束

示例：

<style>
    /*这是个注释*/
    p {
        text-align:center;
        /*这是另一个注释*/
        color:black;
        font-family:arial;
    }
</style>

CSS选择器

目标

掌握id选择器的语法

掌握class选择器的语法

掌握标签选择器的语法

掌握属性选择器的语法

掌握后代选择器的语法

掌握子元素选择器的语法

CSS选择器介绍

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。常用的CSS选择器有：

id选择器

class选择器

标签选择器

属性选择器

后代选择器

子元素选择器

id选择器

id选择器是通过元素的id属性来选择元素

使用id选择器时，要求元素必须有id属性

CSS中id选择器以 "#" 来定义，比如： #test01

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
        #test01 {color:red; text-align:center;}
    </style>
</head>
<body>
    <p id="test01">Hello World!</p>
</body>
</html>

id属性的命名规则和唯一性

命名规则：

不要以数字开头

不能使用中划线和下划线之外的符号

不推荐使用中文

尽量做到见名知意：见到名字知道意思

唯一性：

在整个HTML文档中id属性必须是唯一的

注意：HTML文档不会严格校验id属性是否唯一，在不规范的HTML文档中会出现id重复的情况！！！

class选择器

class选择器是通过元素的class属性来选择元素，又称类选择器

使用class选择器时，要求元素必须有class属性

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用

CSS中class选择器以 "." 来定义，比如： .center

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
        .center {text-align:center;}
</style>
</head>
<body>
    <h1 class="center">标题居中</h1>
    <p class="center">第一段文字</p>
    <p class="center">第二段文字</p>
</body>
</html>

class属性的第一个字符不能使用字符串

标签选择器

标签选择器是通过元素的标签名称来选择元素，又称元素选择器

CSS中标签选择器直接使用标签名称来定义，比如： p 、 input

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
        h1 {text-align:center;}
        p {color:red;}
    </style>
</head>
<body>
    <h1>标题居中</h1>
    <p>第一段文字</p>
    <p>第二段文字</p>
</body>
</html>

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

属性选择器可以使用HTML元素的任意属性，而不仅限于id和class属性

简单属性选择：

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器；

格式： [属性名]

根据具体属性值选择：

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素；

格式： [属性名="属性值"]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
        [href]{color: red;}
        [title="古诗标题"] {color:blue;}
        [id="first"] {color:green;}
        [class="second"] {color:yellow;}
</style>
</head>
<body>
    <a href="https://www.itheima.com">软件测试</a>
    <h1 title="古诗标题">劝学</h1>
    <p id="first">故不积跬步，无以至千里。</p>
    <p class="second">不积小流，无以成江海。</p>
</body>
</html>

后代选择器

后代选择器可以选择作为某元素后代的元素，后代元素包括（儿子、孙子、重孙子...）

语法规则：多个选择器用空格分隔，例如 p span{color: red;}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        /*p span{color: red;}*/
        div span{color: red;}
    </style>
</head>
<body>
    <div>
        <span>我是span</span>
        <p>
            <span>我也是span</span>
            <br/>
            <span>我也是span</span>
        </p>
    </div>
</body>
</html>

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素

不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素

语法规则：多个选择器用大于号 > 分隔，例如 div>span{color: red;}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        div>span{color: red;}
    </style>
</head>
<body>
    <div>
        <span>我是span</span>
        <p>
            <span>我也是span</span>
            <br/>
            <span>我也是span</span>
        </p>
    </div>
</body>
</html>