2021.04.19

最新推荐文章于 2024-10-06 15:38:21 发布

KarinCar

最新推荐文章于 2024-10-06 15:38:21 发布

阅读量54

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_47896920/article/details/116117846

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS层叠样式表（下）

目标

能够使用emmet语法
能够使用css复合选择器
能够写出伪类选择器的使用规范
能够说出元素有几种显示模式
能够写出元素显示模式的相互转换代码
能够写出背景图片的设置方式
能够计算CSS的权重

emmet语法

快速生成HTML结构语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-svlKSiXP-1619316805432)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210420111839952.png)]

快速生成CSS样式语法

简写属性字母，有时可以加属性值就好

快速格式化代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uJNNWFes-1619316805434)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210420111958112.png)]

一、CSS复合选择器

复合选择器是由一个或多个基础选择器，通过不同的方式组合而成的

常用的复合选择器包括

后代选择器
子选择器
并集选择器
伪类选择器

1.1 后代选择器

元素1 元素2 { 样式声明 }
两个基础选择器中间用空格隔开

1.2 子选择器

元素1>元素2 { 样式声明 }
两个选择器中间用>连接
只能选择作为元素1的最近一级子元素，就是亲儿子，不能是孙子以及以后的任何后代。

1.3 并集选择器

元素1,元素2 { 样式声明 }
两个选择器中间使用英文模式下的 “ , ” 隔开
并集选择器的两个元素可以是任何样式的选择器（包括其他形式的复合选择器）

1.4 伪类选择器

用 “ : ” 来隔开

1.5 链接伪类选择器

a:link. --选择所有未被访问的连接
a:visited --选择所有已被访问的链接
a:hover --选择鼠标位于其上的链接
a:active --选择活动的链接（鼠标按下未弹起）

⚠️ 为了确保链接效果生效，必须按照LVHA的顺序声明，即:link :visited :hover :active

1.6 :focus伪类选择器

用于选取获得焦点的表单元素
input:focus { background : yellow; }

1.7 复合选择器总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mpq3Pyln-1619316805436)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210420113832890.png)]

二、CSS的元素显示模式

元素显示模式就是元素以什么样的方式进行显示，比如div自己占一行，又例如一行可以有多个span

2.1块元素

常见的块元素有h1～h6、p、div、ul、ol、li等，其中div是最典型的块元素

块元素的特点：

比较霸道，自己占一行
高度、宽度、外边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素

⚠️注意

文字类的元素内不能使用块级元素
p标签主要用于存放文字，因此p标签里面不能放块级元素，特别是不能放div
同理，h1～h6等都是文字类块级标签，里面也不能放其他块级元素

2.2 行内元素

常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中span是最典型的行内元素，有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是他本身内容的宽度
行内元素只能容纳文本或者其他行内元素

⚠️注意

链接里面不能再放链接
特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全

2.3 行内块元素

在行内元素中，有几个特殊的标签，img、input、td，他们同时具有块元素和行内元素的特点，有些资料称他们为行内块元素。

行内块元素特点：

和相邻行内（行内块）元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）。
默认宽度就是他本身内容的宽度（行内元素特点）
高宽、行高、外边距、以及内边距都可以控制（块级元素特点）。

2.4元素模式总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ujtbwr6C-1619316805437)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210420120851479.png)]

2.5 元素显示模式转换

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

2.6 小tips，设置单行文字垂直居中

让文字的行高（line-height）等于盒子的高度（height）

三、CSS背景background

3.1 背景颜色——background-color

transparent：透明，默认值

3.2 背景图片——background-image

none
url();

3.3 背景平铺——background-repeat

repeat 平铺（默认）
no-repeat 不平铺
repeat-x --沿x轴平铺
repeat-y --沿y轴平铺

3.4 背景位置——background-position

background-position:x y;

x，y可以是方位名词，或者是精确单位

①参数是方位名词（left、right、center、top、bottom）

如果参数是方位名词，则两个值的前后顺序无关，如left top与top left
如果只指定了一个方位名词，另一个省略，则第二个默认居中

②参数是精确单位（百分比或像素值）

如果参数是精确坐标，那第一个值肯定是x，第二个肯定是y。
如果只指定一个数值，那该数值一定是x，另一个默认居中

③参数混合单位

如果指定的两个值是精确单位和方位名词的混合，则第一个是x，第二个是y。

3.5 背景图像固定——background-attachment

scroll：随内容滚动（默认）
fixed：图像固定

3.6 背景复合写法

为了简化背景属性，可以将上述5个属性合并写在background中，书写时，没有特定的顺序，一般习惯约定的顺序为：

background：颜色图片地址平铺图想滚动图片位置

3.7 背景颜色半透明——background:rgba()

rgba(0,0,0,0.3)

第一个0：代表红色
第二个0：代表绿色
第三个0：代表蓝色
第四个0.3：代表透明度，在0～1中间，其中0可以省略，只写“ .3 ”

3.8 背景总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OW8fiU1m-1619316805438)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210420123216808.png)]

四、CSS的三大特性

4.1 层叠性

可以理解为覆盖性

样式冲突，则遵循就近原则
样式不冲突，不会层叠

4.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号
子元素可以继承（text-，font-，line-，以及color等属性）
行高的继承[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2n84mAwC-1619316805439)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210420123617131.png)]

4.3 优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nl1NvECM-1619316805440)(/Users/chekaiyue/Library/Application Support/typora-user-images/image-20210420123630713.png)]

⚠️注意：继承的权重是0