css进阶知识点速览
0前言
零基础部分的博客
1选择器进阶
1.1后代选择器
作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2 {css}
结果：
在选择器1所找到标签的后代中
注意：
后代包括：儿子、孙子等等
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<p>
<div>
<p>hello world</p>
</div>
</p>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: green;
}
div p {
color: red;
}
</style>
</head>
<body>
<p>hello</p>
<p>
<div>
<p>hello world</p>
</div>
</p>
</body>
1.2子代选择器
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1 > 选择器2 {css}
结果：
在选择器1所找到标签的子代中，找到满足选择器
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div p {
color: green;
}
</style>
</head>
<body>
<div>
hello
<p>hello world</p>
<a href="web">
<p>hello baby!</p>
</a>
</div>
</body>
如果改用>，如下：
<style>
div > p {
color: green;
}
</style>
1.3 并集选择器
作用：同时选择多组标签，设置同样的样式
选择器语法：选择器1,选择器2{css}
结果：
找到选择器1和选择器2选中的标签，设置样式
1.4交集选择器
作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1.选择器2{css}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.no1 {
color: green;
}
</style>
</head>
<body>
<p class="no1">hello</p>
<div>hello</div>
<div class="no1">hello</div>
</body>
1.5 伪类
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover{css}
1.6 Emmet语法
作用：通过简写，快速生成代码
语法如图[1]：
2 背景色
2.1背景颜色
属性名：background-color (bgc)
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制
注意点：
背景颜色默认是透明的：rgba(0,0,0,0)、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。
2.2 背景图片
属性名：background-image (bgi)
属性值：background-image: url(‘图片路径’)
注意点：
1背景图片中url可以省略引号
2背景图片默认是在水平垂直方向平铺的
3背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色
2.3背景平铺
如果在style标签中设置的宽和高多大，而图片本身小，会导致图片复制多份而覆盖style设置的区域。
属性名：background-repeat(bgr)
属性值如图[1]
2.4 背景位置
属性名：background-position(bgp)
background-position:水平位置设置 垂直位置设置
2.5背景相关属性连写
属性名:background(bg)
属性值：单个属性值合写。取值之间以空格隔开
书写顺序：
background: color image repeat position
复合属性就是一个属性名加多个值
2.6背景与img标签的区别
img标签是一个标签，不设置宽高默认以固定原尺寸显示
img为插入图片，主要用来显示重要的图片，比如宣传图；
div标签+背景图片：需要设置div的宽高，因为背景图片只是装饰css的样式，不能撑开div标签。因此，不设置宽高，没有盒子就没有图片
只起修饰作用的，可有可无的图片就用背景图片
3 元素显示模式
<>叫标签，也叫元素
3.1块级元素
显示特点：
1独占一行
2宽度默认是父元素的宽度，高度默认由内容撑开
3可以设置宽高
代表标签：
div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer…
3.2行内元素
显示特点：
1一行可以显示多个
2宽度和高度默认由内容撑开
3不可以设置宽高
代表标签：
a,span,b,u,i,s,strong,ins,em,del…
3.3行内块元素
显示特点：
1一行可以显示多个
2可以设置宽高
代表标签：
input,textarea,button,select
特殊情况：img
3.4元素显示模式的转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法:
display:block 转换成块级元素 较多
display:inline-block 转换成行内块元素 较多
display:inline 转换成行内元素 较少
自然，在元素（标签）的css中进行设置
3.5 拓展
1块级元素一般作为大容器，可嵌套文本、块级元素、行内元素、行内块元素等
但是：p标签中不要嵌套div，p，h等块元素
2a标签内部可用嵌套任意元素
但是：a标签不能套a标签
4 CSS特性
4.1继承性
特性：子元素有默认继承父元素样式的特点
可以继承的常见属性：1color 2font-style,font-weight, font-size, font-family 3text-indent, text-align 4line-height
颜色、字样式、首行缩进、行高
注意点：1可通过调试工具判断样式是否可以继承
2所有控制文字的都能继承，不是控制文字的都不能继承
继承性失效的情况：
1a标签的color会继承失效
2h系列标签的font-size会失效
4.2层叠性
1给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上；
2给同一个标签设置相同样式，此时样式会层叠覆盖，最终写在最后的样式生效。
注意：当样式冲突时，只要当选择器优先级相同时，才能通过层叠性判断结果
5 案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div a {
height: 30px;
width: 50px;
background-color: red;
display: inline-block;
text-decoration: none;
color: white;
text-align: center;
line-height: 30px;
}
div a:hover{
background-color: orange;
}
</style>
</head>
<body>
<div>
<a href="">导航1</a>
<a href="">导航2</a>
<a href="">导航3</a>
<a href="">导航4</a>
<a href="">导航5</a>
</div>
</body>
参考
[1]前端开发入门教程笔者学习的课程