CSS笔记II

发布时间：2024年01月15日

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成

作用：更准确更加高效的选择目标元素(标签)

后代选择器

说明:选择某元素的后代元素抽象理解：儿子孙子都要选择

格式父选择器、子选择器{CSS属性}，父子选择器之间用空格隔开

<style>
    div span {  
        color:red;
    }
</style>
<span> span 标签 </span>
<div>
    <span>这是div标签的儿子</span>
    <p>
        <span>这是孙子</span>
    </p>
</div>

<!--效果为第二行文字变红，并且是选中所有的span标签 儿子和孙子都会选中-->

子选择器

作用：选中某元素的子代元素(最近的子级)。抽象理解：只要儿子

选择器写法：父选择器 > 子选择器{CSS属性}，父子选择器之间用 > 隔开

参考上面的代码

<style>
    div > span {  
        color:red;
    }
</style>
<span> span 标签 </span>
<div>
    <span>这是div标签的儿子</span>
    <p>
        <span>这是孙子</span>
    </p>
</div>

<!--效果为第二行文字变红，只有div的直系span标签会变红其他span标签不会变红-->

并集选择器

作用：选中多组标签设置相同的样式。抽象理解：顾名思义大锅饭

选择器写法：选择器1,选择器2,…选择器N {CSS属性},选择器之间逗号隔开

<style>
    div,
    span,
    p {  
        color:red;
    }
</style>
<span> span 标签 </span>
<div>这是div标签</div>
<p>这是p标签</p>
<!--效果为span div p 标签中的文字都会变红-->

交集选择器

作用：选中同时满足多个条件的元素

选择器写法：选择器1选择器2{CSS属性}，选择器之间连写没有任何特殊符号。

<style>
    span.xuanze {
        color:red;
    }
</style>
<span class="xuanze"> 这是第一个span 标签 </span>
<div>这是div标签</div>
<span>这是第二个span标签</span>
<!--这是选中标签名字为span并且类名叫xuanze的文字，so 只会选中第一个span标签-->

伪类选择器

作用：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover{CSS属性} 且任何标签都可以设置鼠标悬停状态

选择器	作用
:link	访问前状态
:visited	访问后状态
:hover	鼠标悬停
:active	鼠标点击

如果给超链接设置以上四个状态，需要安装LVHA的顺序书写。

三大特性

继承性
层叠性
优先级

继承性

特点：子级默认继承父级的文字控制属性

例如在body标签中设置font属性则body中所有的标签都会继承body的font属性，如果有个别不一样的再使用选择器单独找到设置就可以了。当标签有自己的样式时，对于父级的样式属性会导致继承失败

相对于父级标签的css样式，自己有相同的则会倒反天罡覆盖父级的样式，对于自己没有的css样式，子级又会虚心采纳继承。

层叠性

特点：顾名思义都生效

1.相同的属性会覆盖: 后面的css属性会覆盖前面的css属性。

2.不同的属性会叠加: 不同的css属性都会生效。

例如以下代码

<style>
    div {
        color:red;
        font-weight:800;
    }
    div {
        color:green;
        font-size:30px;
    }
</style>
<div>
    最终显示效果会文字绿色 宽度800字号大小40px
</div>

优先级

特点：优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则(选择器优先级高的样式生效)。

优先级公式：

通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

选中范围越小，优先级越高

!important 具有提权功能慎用是写在css样式中写在属性值后面分号前面

优先级-叠加计算规则

上面的规则适用于基础选择器，但是当遇到复合选择器的时候就要用到权重叠加计算规则。

公式：行内样式，id选择器个数，类选择器个数，标签选择器个数

1.从左向右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较。

2.!important权重最高

3.继承权重最低

Emmet写法

特点：代码的简写方式，输入缩写会自动生成对应的代码

HTML写法

说明	标签结构	Emmet
类选择器		标签名.类名
id选择器		标签名#id名
同级选择器		div+p
父子选择器		div>p
多个相同标签		span*3
有内容的标签		div{内容}

在这里插入图片描述

CSS写法：大多数简写方式为属性单词的首字母

背景属性

背景属性一览表：

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景图符合属性	background

背景图

网页中，使用背景图实现装饰性的图片效果

属性名：background-image (bgi)

属性值：url (背景图的URL)

注意：因为背景图的默认是平铺方式，就是当图片大小不足以铺满盒子的时候就会使用平铺方式来铺满盒子

平铺方式

属性名：background-repeat （bgr）

属性值：no-repeat(不平铺)、repeat(平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)

位置

属性名：background-position （bgp）

属性值：水平方向位置垂直方向位置

关键字属性值：可以多个关键字一起使用，没有顺序限制

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

坐标（数字+px ，正负代表左右移动的数值，or 数字和英文单词混用）（水平数据px 垂直数据px ;）

注意：属性值可以只写一个关键字，另一个方向默认居中效果；数字只写一个值表示水平方向，垂直方向为居中

缩放

属性名：backfround-size (bgz)

属性值：

关键字

cover：等比例缩放完全覆盖盒子，部分背景超出盒子

contain：等比例缩放完全装入盒子，盒子部分空白
百分比：根据盒子尺寸计算图片大小是图片的高度和宽度的百分比
数字 + 单位 px

固定

特点：背景不会随着元素的内容滚动

属性名：background-attachment （bga）

属性值：fixed

复合属性

属性名：background (bg)

属性值：背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定

注意：属性值中用空格隔开各个属性值，不区分顺序

显示模式

显示模式：标签(元素) 的显示方式

作用：布局网页的时候根据标签的显示模式选择合适的标签摆放内容

有三种显示模式：

块级元素
- 独占一行
- 宽度默认是父级的100%
- 修改宽高属性会生效
行内元素
- 一行共存多个
- 尺寸由内容撑开
- 修改宽高不会生效，背景色生效
行内块元素
- 一行共存多个
- 默认尺寸由内容撑开
- 修改狂高属性会生效

转换显示模式

属性名：display