05.css基础知识02

学习目标

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

知识目录

1. CSS的复合选择器
2. CSS的元素显示模式
3. CSS的背景
4. CSS 的三大特性
5. CSS的注释

1.css的复合选择器

1.1什么是复合选择器

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

复合选择器包含：后代选择器，子选择器，并集选择器，伪类选择器

1.2后代选择器（重点）

后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代

语法：元素1 元素2 {样式声明}

最终选择的是元素2

1.3子选择器（重点）

子选择器只能选择作为某元素的最近一级子元素，简单理解就是亲儿子元素

语法：元素1 > 元素2 {样式声明}

1.4并集选择器（重点）

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明

语法：元素1，元素2 {样式声明}

最终选择元素1和元素2

1.5伪类选择器

伪类选择器用于向某些选择器添加特殊效果，常用于超链接标签

1.5.1链接伪类标签

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择活动链接（鼠标按下未弹起的链接）

为了确保生效,请按照LVHA的循顺序声明:ink - :visited - :hover - :active.

1.5.2：focus伪类选择器

伪类选择器用于选取获得焦点的表单元素，语法：input：focus{}

2.css的元素显示模式

• 什么是元素的显示模式
• 元素显示模式的分类
• 元素显示模式的转换

2.1什么是元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示。比如div自己占一行，比如一行可放多个span.html一般分为块元素和行内元素两种

2.2块元素

常见的块级元素有h1~h6,p,div,ul,ol

• 块级元素特点
• 自己独占一行
• 高度，宽度，外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或者块级元素
• 文字类的元素内不能用块级元素
• p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div
• h1-h6等都是文字类块级标签，里面也不能放其他块级元素

2.2行内元素

常见的行内元素有a,strong,b,em,i,del,s,ins,u,span

• 相邻行内元素在一行上，一行可以显示多个
• 高，宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素
• 链接里面不能再放链接
• 特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全

2.3行内块元素

行内元素中有几个特殊的标签——"img/","input/","td"它们同时具有块元素和行内元素的特点

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

2.4元素显示模式总结

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

2.5元素显示模式转换

特殊情况下，一个模式的元素需要另外一种模式的特性

转换为块元素:display:block

转换为行内元素:display:inline

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

2.6单行文字垂直居中的原理

让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

3.css的背景

通过css背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等

3.1用background-color属性定义元素背景颜色，默认值为transparent（透明）

3.2用background-image属性定义元素背景图片，实际开发常用于logo或者一些装饰性的小图片或者超大的背景图片，优点是便于控制位置，属性值有none默认无背景图，url使用绝对路径或者相对路径指定背景图像

3.3用background-repeat属性对背景图像进行背景平铺

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

3.4用background-position属性改边图片在背景中的位置（重点）

语法： background-position:x y;可用方位名词或精确单位

如果只指定了一个方位名词,另-个值省略,则第二个值默认居中对齐

如果参数值是精确坐标,那么第-个肯定是x坐标,第二个- 定是y坐标

如果只指定一个数值,那该数值-定是x坐标，另-个默认垂直居中

3.5用background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

属性值scroll 背景图像是随对象内容滚动，fixed 背景图像固定

3.6背景复合写法无顺序要求

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

3.7背景颜色半透明

语法：background:rgba（o,o,o,0.3）

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

4.css三大特性

css有三个非常重要的三个特性：层叠性，继承性，优先级

4.1层叠性

相同选择器给设置相同的样式，此时一个压根是就会覆盖另一个冲突的样式，层叠性主要解决样式冲突问题。遵循就近原则

4.2继承性

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

特殊：行高的继承:语法：font:12px/1.5 行高可以跟单位也可以不跟单位，此时子元素行高为当前子元素的文字大小*1.5，使得子元素可以自动调整行高

4.3优先级

当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者*	0.0.0.0
元素选择器	0.0.0.1
类选择器，伪类选择器	0.0.1.0
id选择器	0.1.0.0
行内样式style=""	1.0.0.0
!importanr重要的	无穷大

权重是有4组数字组成，但是不会有进位

可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, id选择器100,行内样式表为1000,!importanr无穷大

复合选择器有权重叠加问题，权重会叠加但是不会进位，以四组数字为一个单位

如果是复合选择器，才会有权重叠加，需要权重计算

div ul li------->0.0.0.3

.nav ul li------>0.0.1.2

a:hover--------->0.0.1.1

.nav a---------->0.0.1.1

5.css注释

格式为“/* ------*/”