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

这篇具有很好参考价值的文章主要介绍了【测试基础】之03 CSS入门基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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属性的命名规则和唯一性

命名规则:

  1. 不要以数字开头

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

  1. 不推荐使用中文

  1. 尽量做到见名知意:见到名字知道意思

唯一性:

在整个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;}文章来源地址https://www.toymoban.com/news/detail-411958.html

<!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>

到了这里,关于【测试基础】之03 CSS入门基础的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端web入门-CSS-day03

     (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 CSS 初体验 CSS 定义 CSS 引入方式  选择器 标签选择器  类选择器 id选择器 通配符选择器 画盒子 文字控制属性 字体大小 字体粗细  字体样式(是否倾斜)  行高 字体

    2024年02月07日
    浏览(43)
  • 【03.04】大数据教程--html+css基础

    当谈到大数据时,HTML和CSS可能并不是最相关的技术。HTML和CSS主要用于构建网页和应用程序的用户界面,而大数据则涉及处理和分析大规模数据集。但是,如果您想展示有关大数据的信息或结果,并在网页上呈现,那么HTML和CSS可以用于创建具有吸引力和交互性的数据可视化。

    2024年02月07日
    浏览(32)
  • web自动化测试入门篇03——selenium使用教程_(2)在上述学习基础上,自行选择一个合适的网站,进一步在实践中去运用selenium webd(1)

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新大数据全套学习资料》,

    2024年04月27日
    浏览(64)
  • Elasticsearch从入门到精通-03基本语法学习

    👏作者简介:大家好,我是程序员行走的鱼 📖 本篇主要介绍和大家一块学习一下ES基本语法,主要包括索引管理、文档管理、映射管理等内容 ES对数据进行增、删、改、查是以Restful方式对服务端发送请求的,所以在我们学习基本语法之前先了解一下Restful是什么? REST 指的是一

    2024年03月15日
    浏览(44)
  • MySQL-03基本的SELECT语句(基础)

    课程中,第二章是MySQL环境搭建,因为我之前安装过MySQL5.7的环境,然后就直接下载8.0版本的zip,直接安装的,就没看视频,所以没有第二章笔记。这里给出MySQL社区版下载地址。 1.1 SQL背景知识 1974年,IBM研究员发布了一篇揭开数据库技术的论文《SEQUEL:一门结构化的英语查询

    2024年02月05日
    浏览(44)
  • MySQL-03.基本的SELECT语句(基础)

    课程中,第二章是MySQL环境搭建,因为我之前安装过MySQL5.7的环境,然后就直接下载8.0版本的zip,直接安装的,就没看视频,所以没有第二章笔记。这里给出MySQL社区版下载地址。 1.1 SQL背景知识 1974年,IBM研究员发布了一篇揭开数据库技术的论文《SEQUEL:一门结构化的英语查询

    2024年02月05日
    浏览(35)
  • 【Stable Diffusion】入门-03:图生图基本步骤+参数解读

    当提示词不足以表达你的想法,或者你希望以一个更为简单清晰的方式传递一些要求的时候,可以给AI输入一张图片,此时图片和文字是相当的,都是作为一种信息输送给模型,让它拿来生成一张新的图片。模型可以从图片上获取更多的信息,原本的图片上记录的像素信息会

    2024年03月20日
    浏览(62)
  • CSS基础:你必须要知道的行高属性 line-height

    作者: WangMin 格言: 努力做好自己喜欢的每一件事 对于初学CSS的同学来说,会有很多属性相关的疑问,行高属性 line-height一定是其中一个,因为它是CSS中非常重要的一个属性,这个属性改变元素在网页中的行高,让你的网页看起来更加整洁,美观。 什么是行高? CSS中的行高(

    2024年02月05日
    浏览(53)
  • WPF 入门笔记 - 03 - 样式基础

    ? 程序的本质 - 数据结构 + 算法 ? ?本篇为学习李应保老师所著的《WPF专业编程指南》并搭配 WPF 开发圣经《WPF编程宝典第4版》以及痕迹大佬《WPF入门基础教程系列》文章所作笔记,对应《WPF专业编程指南》第 9 章之间内容,主要概述 WPF 中关于样式的相关内容,希望可以帮到

    2024年02月08日
    浏览(44)
  • CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)

            前言:学习CSS就必须要学习选择器,在之前我们已经学习了基本选择器和复合选择器,但是还有几个选择器没有学习,这篇文章主要讲解伪类选择器。 ✨✨ ✨ 这里是秋刀鱼不做梦的BLOG ✨✨✨ 想要了解更多内容可以访问我的主页 秋刀鱼不做梦-CSDN博客 那么废话不多

    2024年04月17日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包