文章目录
一、CSS复合选择器
1.后代选择器
.class h3{
color:red;
font-size:16px;
}
- 把外层标签写在前面，内层标签写在后面，中间用
空格分隔。 - 当标签发生嵌套时，内层标签就成为外层标签的后代。
- 能选择任何包含在内的标签。
2.子元素选择器
.class>h3 {
color:red;
font-size:14px;
}
- 把父级标签写在前面，子级标签写在后面，中间跟一个
>进行连接 - 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
3.并集选择器
.box1,
.box2 {
width: 300px;
height: 300px;
}
- 并集选择器是各个选择器通过
,连接而成的，通常用于集体声明。 - 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
4. 链接伪类选择器
a:link,
a:visited {
/* 已访问的链接 */
color: red;
}
a:hover {
/* 鼠标移动链接上 */
color: blue;
}
a:active {
/* 选定该标签 */
color: orange;
/* 选定该标签才会有下划线效果 */
text-decoration: underline;
}
- 写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
二、标签显示模式
- 标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个
- HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。
1.块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，
其中<div>标签是最典型的块元素。
- 块级元素的特点
- 比较霸道，自己独占一行
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素。
- 注意：
- 如果我们需要做容器嵌套，就使用div就可以了。
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2.行内元素(inline-level)
常见的行内元素有<span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、等，
其中<span>标签最典型的行内元素。
- 行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或则其他它行内元素.
3.行内块元素（inline-block）
在行内块元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性
- 行内块元素的特点：
- 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
- 默认宽度就是它本身内容的宽度。
- 高度，行高、外边距以及内边距都可以控制。
4.标签显示模式转换 display
- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
三、行高（line-height）
1.行高测量
文字分为顶线，中线，基线，底线。
基线到基线的距离被称为行高。
2.单行文本垂直居中
-
文字的行高等于盒子的高度
-
行高 = 上距离 + 内容高度 + 下距离
-
上距离和下距离总是相等的，因此文字看上去是垂直居中的。
-
行高和高度的三种关系
- 如果 行高 等于 高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
四、CSS背景
1.背景颜色(color)
background-color: rgba(200, 200, 200, .9);
- 最后一个参数是alpha 透明度 取值范围 0~1之间
- 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
2.背景图片(image)
background-image : url(images/demo.png);
3.背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
4.背景位置(position)
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | right 方位名词 |
- 注意：
- 必须先指定background-image属性
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
背景简写
background: red url(image.jpg) repeat-y center top ;
五、CSS 三大特性
1.CSS层叠性
- 所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，这个时候一个属性就会将另一个属性层叠掉
- 原则：
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
2.CSS继承性
- 子标签会继承父标签的某些样式，如文本颜色和字号。
- 想要设置一个可继承的属性，只需将它应用于父元素即可。
- 注意：
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
- 子元素可以继承父元素的样式
3. CSS优先级
- 定义CSS样式时，经常出现两个或更多规则应用在同一元素上：
- 选择器相同，则执行层叠性
- 选择器不同，就会出现优先级的问题。
权重计算公式
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style=“” | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
- 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
- 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
权重叠加
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
就是一个简单的加法计算
- 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
- 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0, 0, 1, 0
继承的权重是0
1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.
六、CSS注释
p {
/* 所有的字体是14像素大小*/
font-size: 14px;
}
/* 需要注释的内容 */
即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾使用 "*/"结束。
七、阴影
1.文字阴影
h1 {
font-size: 40px;
/* x-offset y-offset 高斯模糊 颜色 */
text-shadow: 10px 5px 2px pink;
}
2.盒子阴影
div {
width: 200px;
height: 200px;
background-color: red;
/* box-shadow: 水平阴影 垂直阴影 模糊度 阴影尺寸 阴影颜色 ; */
box-shadow: 10px 10px 5px 1px blue;
/* 前两个阴影 , 水平阴影 和 垂直阴影 必须写 , 后面的三个值可以省略 ; */
}