CSS(二)

一、CSS 的复合选择器

1.1 什么是复合选择器

在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。

1.2 后代选择器 (重要)

后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。
例如:
元素1 和 元素2 中间用空格隔开
元素1 是父级,元素2 是子级,最终选择的是元素2
元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
元素1 和 元素2 可以是任意基础选择器

1.3 子选择器 (重要)

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
语法:
上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。
例如:
元素1 和 元素2 中间用 大于号 隔开
元素1 是父级,元素2 是子级,最终选择的是元素2
元素2 必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

1.4 并集选择器 (重要)

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:
上述语法表示选择元素1 和 元素2。
例如:
元素1 和 元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

1.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
因为伪类选择器很多,比如有链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。

1.6 链接伪类选择器

一 链接伪类选择器注意事项.
二 链接伪类选择器实际开发中的写法.
链接伪类选择器注意事项
1. 为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
2. 记忆法:love hate 或者 lv 包包 hao 。
3. 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际工作开发中的写法:

1.7 :focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 <input> 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

1.8 复合选择器总结

二、CSS 的元素显示模式

2.1 什么是元素显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>。
HTML 元素一般分为块元素和行内元素两种类型。

2.2 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素。
块级元素的特点:
① 比较霸道,自己独占一行。
② 高度,宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器(父级宽度)的100%。
④ 是一个容器及盒子,里面可以放行内或者块级元素。
注意:
文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div>
同理, <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

2.3 行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
① 相邻行内元素在一行上,一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意:
 链接里面不能再放链接
 特殊情况链接 <a> 里面可以放块级元素,但是给 <a> 转换一下块级模式最安全

2.4 行内块元素

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
① 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
② 默认宽度就是它本身内容的宽度(行内元素特点)。
③ 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

2.5 元素显示模式总结

学习元素显示模式的主要目的就是分清它们各自的特点,当我们网页布局的时候,在合适的地方用合适的标签元素。

2.6 元素显示模式转换

特殊情况下,我们需要元素模式的转换,简单理解: 一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围。
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display: inline-block;

三、CSS 的背景

通过 CSS 背景属性,可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

3.1 背景颜色

background-color 属性定义了元素的背景颜色。
一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。

3.2 背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号。

3.3 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺,可以使用 background-repeat 属性。

3.4 背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
1. 参数是方位名词
        如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
        如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
2. 参数是精确单位
        如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
        如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
3. 参数是混合单位
        如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标

3.5 背景图像固定(背景附着)

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 后期可以制作视差滚动的效果。

3.6 背景复合写法

为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量.
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
这是实际开发中,我们更提倡的写法。

3.7 背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。
最后一个参数是 alpha 透明度,取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);
注意:
背景半透明是指盒子背景半透明,盒子里面的内容不受影响
CSS3 新增属性,是 IE9+ 版本浏览器才支持的
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

3.8 背景总结

背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

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

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

相关文章

Mockito.when返回的list长度为0问题解决方法

今天玩Mockito.when遇见一个问题Mockito.when返回的list长度为0&#xff1b;上代码 ArrayList<Org> childDepts new ArrayList<>();Org org new Org();org.setDeptId("1");org.setDeptName("1");childDepts.add(org); Mockito.when(orgMappe…

系统设计之缓存(Caches)和内容分发网络(CDNs)设计

系统设计之缓存(Caches)和内容分发网络(CDNs)设计 目录 系统设计之缓存(Caches)和内容分发网络(CDNs)设计缓存不同的缓存策略1. 浏览器缓存缓存命中和缓存未命中2. 服务器缓存缓存失效淘汰策略:缓存的决策制定者自适应策略自定义策略淘汰策略的影响3. 数据库缓存实现工…

OC对象 - 关联对象(如何给分类添加成员变量)

文章目录 OC对象 - 关联对象&#xff08;如何给分类添加成员变量&#xff09;1. 基本使用1.1 提供的API1.1.1 添加关联对象1.1.2 获得关联对象1.1.3 移除所有关联对象1.1.3 修饰符 1.2 使用方法1.2 Key的常见用法1.2.1 使用的get方法的selecor作为key1.2.2 使用指针的地址作为k…

100 天机器学习指南

100 天机器学习指南 除了机器学习专栏&#xff0c;我们打算出另外一期专栏&#xff0c;叫做100 天机器学习指南&#xff0c;目标是通过100天的深入持续学习&#xff0c;让我们没有机器学习经验的人&#xff0c;也可以从事简单的机器学习工作&#xff0c;为职业生涯寻找增长点&…

LeetCode每日一题——移除链表元素

移除链表元素OJ链接&#xff1a;203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 思路&#xff1a; 这与之前的移除元素的题目很相似&#xff0c;那么我们同样可以用类似的做法&#xff08;双指针&#xff09;进行解题。但是这是一个链表删除&a…

微信小程序全局数据共享

文章目录 安装MobX相关的包根目录创建store文件夹&#xff0c;添加store.js文件绑定到页面中绑定到组件 mobx-miniprogram和mobx-miniprogram-bindings实现全局数据共享 mobx-miniprogram用来创建Store实例对象 mobx-miniprogram-bindings用来把Store中的共享数据或方法&…

树状数组原理和代码

树状数组 求下标的对应 求i管着的下标的范围 方法&#xff1a;拆掉最右侧的1然后1 到你自己 query sum 1-i的和 拆掉最右侧的1 再把下一个数值吸收到sum 重复这个过程直到全变0为止 add 方法&#xff1a;加上最右侧的1 到上限为止 lowbit方法 单点增加范围查询模板 #inc…

no main manifest attribute, in xxx.jar

找不到主类&#xff0c;如果是maven 项目&#xff0c;在pom.xml 指定主类 <mainClass>com.example.demo.Demo2Application</mainClass>还是不行的话&#xff0c;把 <skip>true</skip>去掉

请简单介绍一下Shiro框架是什么?Shiro在Java安全领域的主要作用是什么?Shiro主要提供了哪些安全功能?

请简单介绍一下Shiro框架是什么&#xff1f; Shiro框架是一个强大且灵活的开源安全框架&#xff0c;为Java应用程序提供了全面的安全解决方案。它主要用于身份验证、授权、加密和会话管理等功能&#xff0c;可以轻松地集成到任何Java Web应用程序中&#xff0c;并提供了易于理解…

nodejs+vue高校师资管理系统python-flask-django-php

快速发展的社会中&#xff0c;人们的生活水平都在提高&#xff0c;生活节奏也在逐渐加快。为了节省时间和提高工作效率&#xff0c;越来越多的人选择利用互联网进行线上打理各种事务&#xff0c;然后线上管理系统也就相继涌现。与此同时&#xff0c;人们开始接受方便的生活方式…

从FasterTransformer源码解读开始了解大模型(1.0)了解FasterTransformer

从FasterTransformer源码解读开始了解大模型&#xff08;1.0&#xff09;了解FasterTransformer 写在前面的话 最近的一年时间真是令人感慨&#xff0c;换了个工作方向&#xff0c;学了些深度算子开发相关知识&#xff0c;工作也转到对LLM的学习和开发了。入行不算深&#xf…

【Node.js】markdown 转 html

markdown 转 html 需要先安装三个包&#xff1a;browser-sync&#xff0c;ejs&#xff0c;marked 第一步&#xff0c;先准备一个 ejs 模板&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title><% title %>…

谷粒商城——缓存的概念

1. 使用缓存的好处&#xff1a;减少数据库的访问频率&#xff0c;提高用户获取数据的速度。 2. 什么样的数据适合存储到缓存中&#xff1f; ①及时性、数据一致性要求不高的数据&#xff0c;例如物流信息、商品类目信息 ②访问量大更新频率不高的数据(读多、写少) 3. 读模式…

PyTorch中用torch.block_diag()将多个矩阵沿对角线拼接成一个大矩阵的函数

torch.block_diag()是PyTorch中用于将多个矩阵沿对角线拼接成一个大矩阵的函数。这个函数可以用于构建卷积神经网络中的卷积核矩阵&#xff0c;或者构建变分自编码器等需要对多个线性变换进行堆叠的模型。 torch.block_diag()函数的语法如下&#xff1a; torch.block_diag(*a…

加密技术概述

传输数据时的四个问题 窃听 数字加密 假冒 消息认证或数字签名 篡改 消息认证码或数字签名 事后否认 数字签名 加密技术 将数据变成第三者的计算机无法理解的形式&#xff0c;然后再将其恢复成原本数据的一系列操作就是加密技术。 哈希函数 哈希函数可以把给定的数据转…

C++中的string类

一、构造函数 1.默认构造函数&#xff08;defalut constructor&#xff09;&#xff1a;string() 2.指针拷贝构造函数&#xff08;from c-string&#xff09;&#xff1a;string(const char* s) 3.拷贝构造函数&#xff08;copy constructor&#xff09;&#xff1a;string(…

设计模式之状态模式(一)

设计模式专栏&#xff1a; http://t.csdnimg.cn/4Mt4u 目录 1.概述 2.结构 3.实现 4.总结 1.概述 状态模式( State Pattern)也称为状态机模式( State Machine pattern), 是允许对象在内部状态发生改变时改变它的行为,对象看起来好像修改了它的类, 属于行为型模式。 在状…

多轴机械臂运动控制:4x4坐标变换矩阵该用C语言的二维数组还是一维数组?

做多轴机械臂的运动控制&#xff0c;免不了要对4x4的坐标变换矩阵进行乘法&#xff0c;C语言中可以用二维数组或者一维数组来实现矩阵&#xff0c;下面来比较一下二维数组和一维数组的性能差异。 开发环境&#xff1a;Visual Studio 2022&#xff0c;分别在Debug和Rele…

Linux ~ 查看日志的常用命令总结

1.tail -n <行数>&#xff0c;显示文件的尾部n行内容。 -f 循环读取&#xff0c;常用于查阅正在改变的日志文件。 ① tail -f test.log 实时显示test.log文件里的最尾部的内容&#xff0c;只要test.log更新就可以看到最新的文件内容。 ② tail -100f test.log 实时监控…

IOS面试题编程机制 41-45

41. lldb(gdb)常用的控制台调试命令?1). p 输出基本类型。是打印命令,需要指定类型。是print的简写 p (int)[[[self view] subviews] count] 2). po 打印对象,会调用对象description方法。是print-object的简写 po [self view] 3). expr 可以在调试时动态执行指定表达式,…