CSS（二）css选择器+css背景

一、Emmet语法

❤️1.1快速生成HTML结构语法

在这里插入图片描述

1.2快速生成CSS样式语法

1.3快速格式化代码

shift+alt+F
在这里插入图片描述

二、CSS复合选择器

2.1什么是复合选择器

基础选择器和复合选择器

在这里插入图片描述

2.2❤️后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开，内层标签就称为外层标签的后代。
语法：
在这里插入图片描述

元素1和元素2之间用空格隔开

2.3❤️子选择器

子元素选择器只能选择作为某元素最近一级子元素。
语法：
元素 1> 元素2{样式声明}
上述语法表示选择元素1里面直接后代元素2

❤️2.4并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过中文逗号连接而成，任何形式的选择器都可以作为选择器的一部分。
在这里插入图片描述

2.5伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给连接添加特效，或选择第一个，第n个元素。
伪类选择器书写最大的特点的特点就是==用冒号（：）表示，比如：hover、：first-child。
链接伪类，结构伪类
在这里插入图片描述

2.6链接伪类选择器

注意事项：
1.为了确保生效，按照顺序声明：:link->:visited->:hover->:active;
实际开发用法：
在这里插入图片描述

2.7 ：focus伪类选择器

：focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，主要针对表单元素来说。
在这里插入图片描述

2.8复合选择器总结

在这里插入图片描述

三、CSS的元素显示模式

3.1什么是元素显示模式

元素显示模式就是元素以什么方式进行显示比如div独占一行；
HTML元素一般分为块元素和行内元素两种类型。

3.2块元素

在这里插入图片描述

3.3行内元素

<span> 在这里插入图片描述
特殊情况下链接a可以放块级元素，但是先转换一下

3.4行内块元素

img,input,td同时具有行内元素和行内块元素的特点。

特点：
（1）和相邻行内元素在一行上，但是他们之间会有空白嫌隙。一行可以多个（行内元素特点）
（2）默认宽度就是它本身内部的宽度（行内元素特点）
（3）高度，行高、外边距以及内边距都可以控制（块级元素特点）。
在这里插入图片描述

3.5元素显示模式转换

转换为块元素：display:block

 <style>
        a{
            display: block;
            width: 50px;
            height: 50px;
            background: pink;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <a href="#">click</a>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;

四、CSS的背景

4.1背景颜色

background-color属性定义了元素的背景颜色。
一般情况下默认值是transparent

4.2背景图片

background-image属性描述了元素的背景图像。
在这里插入图片描述
可以使用绝对路径或者相对路径指定图片

4.3背景平铺

如果要在HTNL页面上对背景图像进行平铺，可以使用background-repeat属性
在这里插入图片描述
👉默认是平铺的，为防止重叠显示可以设置不平铺

4.4背景图片位置

background-position属性可以改变图片在背景中的位置
在这里插入图片描述

1.参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关
如果只指定一个方位名词，则第二个垂直居中显示

2.参数是精确单位

第一个参数一定是x方位，第二个是y方位。
如果只指定一个数值，那么该数值一定是x坐标，并一个默认垂直居中。
3.参数是混合单位
第一个参数一定是x方位，第二个是y方位。

❤️4.5背景图像固定（背景附着）

background-attachment属性可以设置背景图片是否固定或者随着页面的奇特部分滚动。

4.6背景复合写法

在这里插入图片描述

4.7背景色半透明

background：rgba(0,0,0,0.3);
1

最后一个参数是alpha透明度，取值范围在0~1之间

4.8背景总结

在这里插入图片描述

相关阅读:
iconfont 的symbol字体如何修改颜色 / svg如何修改颜色？
AutoGen 智能应用开发（一）｜AutoGen 基础
Cisco交换机本地SPAN和远程SPAN的配置
使用vue扫描扫描仪图像
【freertos】003-任务基础知识
力扣(LeetCode)1758. 生成交替二进制字符串的最少操作数(C++)
今年考研？七夕顺便把心形线复习一下
openfoam UPstream类探索（二）
【C++刷题】力扣-#495-提莫攻击
【el-table 可实现分页勾选数据】

原文地址：https://blog.csdn.net/qq_52986400/article/details/125467078

CSS（二）css选择器+css背景

文章目录

一、Emmet语法

❤️1.1快速生成HTML结构语法

1.2快速生成CSS样式语法

1.3快速格式化代码

二、CSS复合选择器

2.1什么是复合选择器

2.2❤️后代选择器

2.3❤️子选择器

❤️2.4并集选择器

2.5伪类选择器

2.6链接伪类选择器

2.7 ：focus伪类选择器

2.8复合选择器总结

三、CSS的元素显示模式

3.1什么是元素显示模式

3.2块元素

3.3行内元素

3.4行内块元素

3.5元素显示模式转换

四、CSS的背景

4.1背景颜色

4.2背景图片

4.3背景平铺

4.4背景图片位置

❤️4.5背景图像固定（背景附着）

4.6背景复合写法

4.7背景色半透明

4.8背景总结