笔记基于 菜鸟教程 尚硅谷
目录
1.css简介
css是层叠样式表(Cascading Style Sheet )的简称，
是一组样式设置的规则，用于控制页面的外观样式。
1.1为什么要使用css
- 实现内容与样式的分离，便于团队开发
- 样式复用，便于网站的后期维护
- 页面的精确控制，让页面更精美
1.2使用css的作用
设置HTML页面的文本内容，图片的外形，以
及版面的布局和外观显示样式。
2.css的基本语法
选择器
通过选择器选定指定页面,比如 p 的作用就是选中所有的p元素。
声明块
通过声明块来为指定的元素设置演样式声明块是一个名值对的一个样式，名值对之间以 : 链接，以 ; 结尾。
示例
p {
color: red;
font-size: 20px;
}
h1 {
color: #000;
}3.css编写的位置
3.1第一种方式（内联样式，行内样式）
使用方法：
- 在标签内部通过style设置元素的样式
示例：
<p style="color: red; font-size: 20px;">jxust</p>问题：
样式只对一个标签生效，如果希望影响到多个元素，必须在多个元素复制一遍，当样式发送变化时要一个一个修改，非常不方便。
不推荐使用
3.2第二种方式（内部样式表）
使用方法：
- 将样式编写到style标签里
- 通过css选择器为多个标签设置样式，并且只修改一次
- 更方便对样式进行复用
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p >jxust</p>
</body>
</html>问题：
只对一个网页起作用
里面的样式不能跨网页复用
3.3第三种方式（外部样式表）
使用方法：
将css样式写到一个css文件里
通过link链接外部css文件
示例：
好处：
写到外面可以触发浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验
使样式可以在不同页面中进行复用
4.css选择器基础
4.1常用选择器
1.元素选择器
作用，根据标签名确定指定元素
语法：标签名{}
2.ID选择器
作用，根据元素的ID属性选中一个元素
语法，#ID属性值
例子，#box{},#red{}
3.class
多个元素可以绑定一个class
一个元素可以绑定多个class(用空格隔开)
语法 .class 属性值
4.统配选择器：
*{}
选用页面中的所有元素
4.2 复合选择器
交集选择器，同时选择有几个类的元素，两个选择器直接写在一起
注意：交集选择器中如果有元素选择器，必须以元素选择器开头
.b .c .a{
color: #000;
}
h1 span {
color: aliceblue;
}
div .a {
color: red;
}并集选择器，同时选择多个选择器对应的元素，用,分割开
h1,p {
color: #000;
}4.3 关系选择器
- 父元素
- 直接包含子元素的元素就是父元素
- 子元素
- 直接被父元素包含的元素
- 祖先元素
- 直接或间接包含后代的元素就是祖先元素
- 一个元素是父元素也是他的祖先元素
- 后代元素
- 直接或间接被祖先包含的元素叫后代元素
- 兄弟元素
- 拥有相同父元素的元素就是兄弟元素
选择器
子元素选择器：
作用：指定父元素的子元素
语法 父元素>子元素
div.box>span{
color:red;
}
下一个兄弟的选择器
作用：选择具有相同父亲的兄弟元素
语法：
p+span{
color:blue;
}
下面所有兄弟的选择器
作用：
选择具有相同父亲的所有兄弟元素
语法：
p~span{
color:blue;
}
4.4 属性选择器
- [属性名] 选择含有指定属性的元素
- [属性名=属性值] 选择含有指定属性和属性值的元素（完全符合）
- [属性名^=属性值] 以属性值开头的元素
- [属性名$=属性值] 以属性值结尾的元素
- [属性名*=属性值] 以属性值含有某值的元素
p[title=abc]{
color:red;
}
p[title*=abc]{
background-color: red;
}
4.5 伪类选择器
定义：
伪类：不存在的元素，特殊的类
伪类用来描述一个元素的特殊形态，比如第一个子元素，被点击的元素，鼠标移入的元素
语法：
伪类一般情况下是使用:开头
:first-child 第一个元素(不是说同类的第一个子元素，是所有子元素的子元素)
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
如果写n，相当于是所有子元素
如果写2n/even，相当于是所有偶数元素
如果2n+1/odd，相当于是所有奇数元素(有3)
:first-of-type
:last-of-type
:nth-of-type
这几个伪类功能于上面类似，不同点是type在同类型元素中进行比较。
not是否定伪类
将符合条件的元素从选择器去除
示例：除了ul的第三个字元素，都设置为改样式。
ul>li:not(:nth-child(3)) {
color:red;
}4.6 超链接伪类
a:link{...}:正常的链接
a:visited{...}:访问过的链接，出于用户隐私考虑，visited大部分情况下只能改颜色
a:hover{...}: 鼠标移入的状态
a:active{...}:鼠标点击
为保证能够正常使用应按照
link,visited,hover,active的顺序
4.7伪类元素
伪元素表示页面中并不真实存在的一些元素(特殊的位置)，使用::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
必须结合content属性使用
::before 元素的开始
::after 元素的结束
4.8 继承
我们为一个元素设置的样式也会应用到他的后代元素
继承是发生在祖先与后代之间的
继承的设计师为了开发，利用继承只需写一次就可以让所有的元素都具有该样式
注意：并不是所有的样式都可以被继承，比如背景相关的，布局相关的样式都不会被继承
| 选择器的权重 | 优先级 |
| 内联样式 | 1，0，0，0 |
| id选择器 | 0，1，0，0 |
| 类和伪类选择器 | 0，0，1，0 |
| 元素选择器 | 0，0，0，1 |
| 通配选择器 | 0，0，0，0 |
| 继承的样式 | 没有优先级 |
-
比较优先级的时候要把所有的求和计算，最后优先级高的优先显示，分组选择器单独计算
-
选择器累加不会超过下一级的，也就是不进位，如果优先级计算后相同优先使用考下的样式
-
在属性结束后加上 !important; 会获取最高优先级，慎用！
5.计量单位
5.1颜色单位
RGB值
RGB是通过不同的颜色浓度调配处不同的颜色
每一种颜色是在0-255或者0-100%
语法: RGB(xx,xx,xx)
RGBA值
在RGB基础上多了个透明度值A
范围0-1,1是完全不透明
语法: RGBA(xx,xx,xx,xx)
16进制的RGB
语法#RGB
颜色浓度00-ff
如果两位两位重复，例如#112233可以写成#123
HSL和HSLA值
在工业设计使用多
H色相(0-360)
S饱和度(浓度0-100)
L亮度(亮度0-100)
获取想要颜色的方式：
下载snipaste
5.2 长度单位
像素
显示器实际上是由一个一个发光的小点构成的
不同屏幕像素大小不同
所以同样的200像素在不同的设备下显示效果不一样
百分比
相对于父元素的百分比
使得子元素随着父元素改变而改变
em
随着字体大小的改变而改变
1个em是一个字的大小，字的大小可以在div内部修改，即字体大小是自身的字体大小
rem
1个rem是相对根元素的字体大小而变化
经常用于移动端开发
