css样式表/层叠样式表（2）

（1）css复合选择器
- 后代选择器
- 子元素选择器
- 交集选择器（不常用）
- 并集选择器
- 链接伪类选择器
（2）标签的显示模式
- 块级元素block-level
- 行内元素inline-level
- 行内块元素inline-block
- 标签显示模式转换
（3）单行文本垂直居中
（4）css背景
（5）css三大特性
- 权重计算公式
- 权重叠加

（1）css复合选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 `.nav` `a`
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是`>` `.nav>p`
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 `p.one`
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 `.nav`, `.header`
链接伪类选择器	给链接更改状态		较多	重点记住 `a{}` 和 `a:hover` 实际开发的写法

后代选择器

概念
后代选择器又称为包含选择器

作用
用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔

语法

.class h3 {color:red;font-size:16px;
}

子元素选择器

作用
子元素选择器只能选择作为某元素子元素(亲儿子)的元素

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 >进行连接

语法

.class>h3 {color:red;font-size:14px;
}

交集选择器（不常用）

条件
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点

交际选择器是并且的意思。即…又…的意思

p.one是类名为 one的 段落标签

并集选择器

比如  .one, p , #test {color: #F00;}
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明

链接伪类选择器

类选择器是一个点

.demo {}

伪类选择器用2个点（冒号）

:link {}

作用
用于向某些选择器添加特殊的效果

未访问的连接
a:link已访问的连接
a:visited鼠标移动到链接上
a:hover选定的链接
a:active

顺序【lvha】不要颠倒！！！

a链接具有默认样式，需要给链接单独指定样式

（2）标签的显示模式

标签的分类
html标签一般分为块标签和行内标签（块元素和行内元素）

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

块级元素block-level

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素

块级元素的特点
（1）独占一行
（2）高度，宽度、外边距以及内边距都可以控制
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素

注意：

只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素

行内元素inline-level

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

行内元素的特点
（1）相邻行内元素在一行上，一行可以显示多个
（2）高、宽直接设置是无效的
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素

注意：

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

行内块元素inline-block

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素

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

标签显示模式转换

块 --> 行内

display: inline;

行内 --> 块

display: block;

块、行内元素 -->行内块

display: inline-block;

<div>块级元素</div>
<div>块级元素</div>
<span>行内元素</span>
<span>行内元素</span>
<a href="#">百度</a>
<a href="#">新浪</a>span {/* 行内-->块 */display: block;width: 100px;height: 100px;background-color: blueviolet;
}
div {/* 块-->行内 */display: inline;width: 200px;height: 200px;background-color: orange;
}
a {/* 行内，块-->行内块 */display: inline-block;width: 50px;height: 50px;background-color: red;
}

（3）单行文本垂直居中

文字的行高等于盒子的高度

行高 = 上距离 + 内容高度 + 下距离

行高和高度的三种关系

行高 = 高度文字会垂直居中
如果行高 > 高度文字会偏下
如果行高 < 高度文字会偏上

<a href="#">体育</a>
<a href="#">娱乐</a>
<a href="#">汽车</a>a {/* 行内，块-->行内块 */display: inline-block;width: 100px;height: 30px;text-align: center;background-color: pink;text-decoration: none;color: #fff;font-weight: 700;/* 行高==高度让单行文字垂直居中 */line-height: 30px;
}
a:hover {background-color: red;color: yellow;
}

（4）css背景

背景颜色

background-color: 颜色值; 默认transparent 透明的

背景图片

background-image: none | url(地址);

地址不要加引号

背景平铺

background-repeat: no-repeat | repeat | repeat-x | repeat-y;

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

背景位置

background-position : length || length
background-position : position || position

参数	值
length	百分数 / 由浮点数字和单位标识符组成的长度值
position	top / center / bottom / left / center / right 方位名词

注意：
（1）必须先指定background-image属性
（2）position 后面是x，y坐标；可以使用方位名词或精确单位
（3）若指定两个值都是方位名词，则前后顺序无关，效果一致
（4）若只指定一个方位名词，另一个值默认居中对齐
（5）若position后面是精确坐标，第一个为x，第二个为y
（6）若指定一个精确坐标，则数值为x坐标，另一个默认垂直居中
（7）若指定两个值为精确单位和方位名词混合使用，则第一个值为x坐标，第二个值为y坐标

背景附着
背景是滚动/固定

background-attachment: fixed | scroll;

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

背景简写
无强制标准
background: 背景颜色背景图片地址背景平铺背景滚动背景位置;

background: #fff url(image.jpg) repeat-y  scroll center top;

背景透明

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

（1）最后一个参数alpha 透明度取值范围 0~1
（2）可以省略0.3的0
（3）盒子里面的内容不受影响

（5）css三大特性

（1）层叠性
概念
多种CSS样式的叠加

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则

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

（2）继承性
概念
子标签会继承父标签的某些样式，如文本颜色和字号

想要设置一个可继承的属性，只需将它应用于父元素

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

（3）优先级
概念
定义CSS样式时，经常出现两个或更多规则应用在同一元素上
（1）选择器相同，则执行层叠性
（2）选择器不同，就会出现优先级的问题

权重计算公式

标签选择器	计算权重公式
继承或者 `*`	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的（样式属性后面添加）	∞ 无穷大

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越

权重叠加

注意
数位之间没有进制
比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况

继承的权重为0
这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中
（1）如果选中了，那么以上面的公式来计权重。谁大听谁的
（2）如果没有选中，那么权重是0，因为继承的权重为0

<div class="demo"><p>胡梓卓</p>
</div>div {color: red;
}
p {color: green;
}
.demo {color: blue;
}

/* 21 */.c1 .c2 div{  color: blue;}/* 101 *//* 101 */#box1 div { color:yellow;}/* 就近原则 */div #box3 {  color:green;}</style>
</head>
<body><div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">文字</div></div></div>
</body>

前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性相关推荐

3.【CSS复合选择器、元素显示模式display、背景background所有】简洁版小米侧边栏案例
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! b站视频链接:https://www.bilibili.com/video/BV14J4114768. 笔记参考大佬:https:/ ...
CSS复合选择器、元素显示模式、背景
[CSS复合选择器.元素显示模式.背景] 一.CSS的复合选择器 1.1 什么是复合选择器在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器和复合选择器,复合选择器是建立在基础选择器之 ...
从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录从零开始学前端:程序猿小白也可以完全 ...
前端与移动开发-----CSS（emmet 语法+CSS 复合选择器+元素的显示模式）
css emmet 语法 -- 开发效率 emmet 的特点和作用:通过简写提高编码效率. emmet 生成 HTML 结构语法: emmet 语法快速生成 css 样式: 1,常用属性大多用英文单词 ...
前端基础之CSS复合选择器
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天今天我们围绕一个导航栏案例进行 ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
CSS复合选择器，元素的显示模式，CSS背景设置
CSS复合选择器,元素的显示模式,CSS背景设置欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页- ...
css复合选择器 1205
css复合选择器 1205 后代选择器通过父级筛查后代父级后代{属性:值} 子选择器通过父级筛查子级父级子级{属性:值} 交集选择器利用标签与类相交的特性来选中目标标签.类名{属性:值 ...
CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图一.复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...
css3 复合选择器,CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...

前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性