【前端】深入解析CSS:选择器、显示模式、背景属性和特征剖析

目录

  • 一、前言
  • 二、CSS的复合选择器
    • 1、后代选择器
      • ①、语法
      • ②、注意事项
    • 2、子选择器
      • ①、语法
      • ②、注意事项
    • 3、并集选择器
      • ①、语法
      • ②、注意事项
    • 4、链接伪类选择器
      • ①、语法
      • ②、注意事项
  • 三、CSS元素显示模式转换
    • 1、转换为块元素display:block
    • 2、转换为行内元素display:inline
    • 3、转换为行内块元素display:inline-block
  • 四、CSS背景属性
    • 1、背景平铺
    • 2、背景图片位置
    • 3、背景图像固定(背景附着)
    • 4、背景颜色的半透明
  • 五、CSS的三大特征之一-继承性
    • 1、行高的继承性
  • 六、总结

一、前言

CSS(层叠样式表)作为前端开发的核心技术之一,为网页赋予了美观和交互性。本文将深入探讨CSS的复合选择器、元素显示模式、背景属性以及其三大特征,帮助读者更好地理解和应用CSS。

二、CSS的复合选择器

1、后代选择器

后代选择器又称为包含选择器,可以选择父元素里边子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代

①、语法

语法:元素1 元素2 {样式声明}

<!DOCTYPE html>
<html lang="en">
<head><style><!-- 元素1 元素2 {样式声明} -->ol li{color:pink}</style>
</head>
<body><ol><li>hhh</li><li>hhh</li><li>hhh</li></ol><ul><li>你好</li><li>你好</li><li>你好</li><li>你好</li></ul>
</body>
</html>

②、注意事项

  1. 元素1和元素2中间用空格隔开
  2. 元素1是父级,元素2是子级,最终选择的是<font color="red"元素2
  3. 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
  4. 元素1和元素2可以是任意基础选择器

2、子选择器

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素

①、语法

语法:元素1>元素2 {样式声明}

<!DOCTYPE html>
<html lang="en"><head><style>.nav>a {color: red;}/* .nav p>a {color: red;} */</style>
</head><body><div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>
</body></html>

在这里插入图片描述

修改“我是孙子”为红色

<!DOCTYPE html>
<html lang="en"><head><style>/* .nav>a {color: red;} */.nav p>a {color: red;}</style>
</head><body><div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>
</body></html>

在这里插入图片描述

②、注意事项

  1. 元素1和元素2中间用大于号隔开
  2. 元素1是父级,元素2是子级,最终选择的是元素2
  3. 元素2必须是亲儿子,其孙子、重孙子之类都不归它管,也可以叫它亲儿子选择器

3、并集选择器

并集选择器可以选择多组标签,同时为它们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分

①、语法

语法:元素1,元素2 {样式声明}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div,p {color: red;}</style>
</head><body><div>并集选择器1</div><p>并集选择器2</p>
</body></html>

在这里插入图片描述

②、注意事项

  1. 元素1和元素2中间用逗号隔开
  2. 逗号可以理解为的意思
  3. 并集选择器通常用于集体

4、链接伪类选择器

①、语法

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 1.未访问的链接a:link 把没有访问过的(点击过的)链接选出来 */a:link{color: black;/* 取消下划线 */text-decoration: none;}/* 2.选择点击过的(访问过的)链接 */a:visited{color: burlywood;}/* 3.选择鼠标经过的那个链接 */a:hover{color:pink}/* 4.选择的是我们鼠标正在按下还没有谈起鼠标的那个链接 */a:active{color: blueviolet;}</style>
</head><body><a href="#">小猪佩奇</a>
</body></html>

②、注意事项

  1. 为了确保生效,请按照LVHA的循顺序声明:link - :visited - :hover - :active
  2. 因为a链接在浏览器中具有默认样式,需要给链接单独制定样式
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置链接为黑色,并取消下划线 */a{color: black;text-decoration: none;}/* 3.选择鼠标经过的链接,并显示下划线 */a:hover{color:pink;text-decoration:underline;}</style>
</head><body><a href="#">小猪佩奇</a><a href="www">小点读猪佩奇</a>
</body>

在这里插入图片描述

三、CSS元素显示模式转换

1、转换为块元素display:block

<head><style>a{width: 240px;height: 30px;background-color: palegoldenrod;/* 把行内元素a转换为块级元素 */display: block;}</style>
</head>
<body><a href="#">百度</a><a href="#">谷歌</a>
</body>
</html>

在这里插入图片描述

2、转换为行内元素display:inline

<head><style>div{
/*             width: 240px; */
/*             height: 30px; */background-color: aquamarine;/* 把div 块级元素转换为行内元素 */display: inline;}</style>
</head>
<body><div>小猪佩奇</div><div>苹果</div>
</body>
</html>

在这里插入图片描述

如果使用display: inline的话,则width、height不生效

3、转换为行内块元素display:inline-block

<head><style>span{width: 300px;height: 30px;background-color: coral;display: inline-block;}</style>
</head>
<body><span>行内元素转换为行内块元素</span><span>行内元素转换为行内块元素</span>
</body>
</html>

在这里插入图片描述

如果使用display: inline-block的话,则width、height生效

四、CSS背景属性

1、背景平铺

在这里插入图片描述

background-image: url(image/0001.png);
/* 1.背景图片不平铺 */
background-repeat: no-repeat;/* 2.默认的情况下,背景图片时平铺的 */
background-repeat: repeat;/* 3.沿着x轴平铺 */
background-repeat: repeat-x;/* 4.沿着y轴平铺 */
background-repeat: repeat-y;

2、背景图片位置

/* 背景图片位置
* 如果指定的两个值都是方位名词,则两个值前后顺序无关
* 如果只指定了一个方位名词,另一个值省略,则第二个值默认
* 居中对齐*/
background-position: center top;background-position: right center;background-position: 20px center;

3、背景图像固定(背景附着)

  1. background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
  2. background-attachment后期可以制作视差滚动的效果
#背景图像是随对象内容滚动(默认的是scroll滚动的)
background-attachment: scroll#背景图像固定
background-attachment: fixed

4、背景颜色的半透明

background: rgba(0,0,0,0.3)

五、CSS的三大特征之一-继承性

1、行高的继承性

语法

body{font: 12px/1.5 Microsoft YaHei;
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高为1.5
  • 此时子元素的行高是:当前子元素的文字大小*1.5
  • body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

六、总结

CSS的复合选择器、元素显示模式、背景属性以及其三大特征共同构成了CSS的核心部分。通过深入理解这些概念,开发者可以更灵活地控制元素的样式和外观,从而创造出更精美、交互性更强的网页。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51810.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

带您解读DeepBook经济原理

DeepBook是Sui上的第一个原生流动性层&#xff0c;通过Sui可预测且低廉的gas费&#xff0c;将促进DeepBook上的大规模交易活动。鉴于DeepBook的中央限价订单簿&#xff08;Central Limit Order Book&#xff0c;CLOB&#xff09;架构&#xff0c;交易量越大&#xff0c;资产价格…

java gradle 项目 在idea上 搭建一个简单的thrift实例

前言 Thrift是RPC通信的一种方式&#xff0c;可以通过跨语言进行通信&#xff0c;最近项目需要进行跨语言的通信&#xff0c;因此首先尝试搭建了一个简单的thrift框架&#xff0c;因为网上的实例大都参差不全&#xff0c;通过gpt查询得到的结果对我帮助更大一点&#xff0c;但…

通信原理 | 窗函数 | 矩形窗 | 汉宁窗 | 汉明窗 | 布莱克曼窗 | 补零对频谱的影响

文章目录 矩形窗矩形窗的时域表达式N=32的时域图N=32的频域图时域补零后的时域序列时域补零后的频域序列时域补零到序列长度为4096,对应的频域序列纵轴取对数汉宁窗N=32的情况下的时域序列N=32的频域图时域补零后的时域序列和对应频域序列时域补零到序列长度为4096,对应的频域…

CentOS KVM虚拟安装和开机启动

1. 配置系统 关闭SELinux setenforce 0持久化关闭配置 vi /etc/selinux/config2. 安装虚拟化软件 安装 KVM、QEMU等虚拟化软件。 yum install qemu-kvm qemu-img virt-manager libvirt virt-install virt-viewer 检查LVM模块是否已经加载 lsmod |grep kvm设置开机启动 s…

回归预测 | MATLAB实现GWO-BP灰狼算法优化BP神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GWO-BP灰狼算法优化BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GWO-BP灰狼算法优化BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程序…

零基础如何使用IDEA启动前后端分离中的前端项目(Vue)?

一、在IDEA中配置vue插件 点击File-->Settings-->Plugins-->搜索vue.js插件进行安装&#xff0c;下面的图中我已经安装好了 二、搭建node.js环境 安装node.js 可以去官网下载&#xff1a;安装过程就很简单&#xff0c;直接下一步就行 测试是否安装成功&#xff1a;要…

JavaScript如何实现数据的深拷贝、浅拷贝?

原文合集地址如下&#xff0c;有需要的朋友可以关注 本文地址 什么是深浅拷贝 说到深浅拷贝就得提起JavaScript中的数据类型之前的文章中有介绍过&#xff0c;这里就不再细说了。 浅拷贝&#xff1a;对基本数据类型进行值复制,对引用数据类型复制引用地址。浅拷贝会创建一个…

队列(Queue):先进先出的数据结构队列

栈与队列https://blog.csdn.net/qq_45467165/article/details/127958960?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127958960%22%2C%22source%22%3A%22qq_45467165%22%7D 队列&#xff08;Queue&#xff09;是一种常见的线…

Apache Shiro是什么

特点 Apache Shiro是一个强大且易用的Java安全框架,用于身份验证、授权、会话管理和加密。它的设计目标是简化应用程序的安全性实现,使开发人员能够更轻松地处理各种安全性问题,从而提高应用程序的安全性和可维护性。下面是一些Apache Shiro的关键特点和概念: 特点和概念…

【芯片设计封装与测试】芯片测试目的、方法、分类及案例

目录 1.芯片测试概述&#xff08;目的、方法&#xff09; 1.1.测试在芯片产业价值链上的位置 2.测试如何体现在设计的过程中 2.1.半导体测试定义与基本工作机制 2.2.半导体测试环节分类及对应设备 2.3.设计验证 3.测试的各种类型 3.1.抽样测试和生产全测 3.2.测试相关…

controller层如何接收带参数的查询

在控制器&#xff08;Controller&#xff09;层接收带参数的查询可以通过多种方式实现。以下是几种常见的方法&#xff1a; 使用 URL 路径参数&#xff1a;将参数作为 URL 的一部分&#xff0c;例如 /users/{userId}。在 Spring MVC 中&#xff0c;您可以使用 PathVariable 注解…

Mysql知识梳理

Mysql知识梳理 索引索引分类索引未命中的原因性能调优命令Explain回表 mysql性能优化事务四大特性事务隔离级别设置事务隔离级别 存储引擎聚簇索引和非聚簇索引聚簇索引非聚簇索引 最左前缀结合原则全文索引 索引 索引分类 mysql有普通索引、空间索引、主键索引、唯一索引、组…

高忆管理:股市交易时间和规则?

股市是指股票买卖商场&#xff0c;出资者买卖股票来获取出资回报。买卖时刻和规矩是股票商场的核心&#xff0c;它约束了股票价格的改变和买卖者的行为。那么&#xff0c;股市的买卖时刻和规矩是什么&#xff1f;咱们应该怎么了解和运用它们来出资&#xff1f; 一、股市买卖时刻…

集成放大器 电路 分析 设计过程中的概念和要点

集成运放的三大特性&#xff1a;虚短、虚断、 和 虚地把这几个特性理解明白了&#xff0c; 后面的电路分析就很容易上手。 虚短&#xff1a;UPUN&#xff0c;两输入端电压相等。虚断&#xff1a;IPIN0&#xff0c;两输入端的输入电流为0。虚地&#xff1a;UPUN0&#xff0c…

Python Scrapy网络爬虫框架从入门到实战

Python Scrapy是一个强大的网络爬虫框架&#xff0c;它提供了丰富的功能和灵活的扩展性&#xff0c;使得爬取网页数据变得简单高效。本文将介绍Scrapy框架的基本概念、用法和实际案例&#xff0c;帮助你快速上手和应用Scrapy进行数据抓取。 Scrapy是一个基于Python的开源网络爬…

软考高级系统架构设计师系列之:论文典型试题写作要点和写作素材总结系列文章三

软考高级系统架构设计师系列之:论文典型试题写作要点和写作素材总结系列文章三 一、论Web Service 技术的应用与发展趋势1.论文题目2.写作要点和写作素材二、论系统的可靠性1.论文题目2.写作要点和写作素材三、论软件可靠性设计与应用1.论文题目2.写作要点和写作素材四、论软件…

17.1.2 【Linux】systemd使用的unit分类

systemd 有什么好处&#xff1f; 平行处理所有服务&#xff0c;加速开机流程&#xff1a; 旧的 init 启动脚本是“一项一项任务依序启动”的模式&#xff0c;因此不相依的服务也是得要一个一个的等待。但目前我们的硬件主机系统与操作系统几乎都支持多核心架构了&#xff0c;s…

【路由器】小米 WR30U 解锁并刷机

文章目录 解锁 ssh环境准备解锁过程 刷入 mt798x uboot简介刷入流程 刷入 ImmortalWrt简介刷入流程 刷为原厂固件参考资料 本文主要记录个人对小米 WR30U 路由器的解锁和刷机过程&#xff0c;整体步骤与 一般安装流程 类似&#xff0c;但是由于 WR30U 的解锁 ssh 和刷机的过程中…

【AWS】安装配置适用于 Eclipse 的 AWS 工具包

目录 0.环境 1.步骤 1&#xff09;安装Eclipse 2&#xff09;安装AWS工具包 ① 在这个路径下点开安装软件的界面 ② 点击【Add】打开添加窗口 ③ 输入aws的工具包地址 ④ 勾选需要的工具&#xff0c;点击【Next】 ⑤ 将要安装的工具&#xff0c;点击【Next】 ⑥ 选择接受…

华为云CodeArts Snap 智能编程助手PyCharm实验手册. 插件安装与使用指南

作为一款自主创新的AI代码辅助编程工具&#xff0c;华为云智能编程助手CodeArts Snap目标打造现代化开发新范式。通过将自然语言转化为规范可阅读、无开源漏洞的安全编程语言&#xff0c;提升开发者编程效率&#xff0c;助力企业快速响应市场需求。华为云CodeArts Snap现进入邀…