CSS笔记1（CSS运用，选择器，像素px，百分比，em（长度单位），rem（长度单位），rgba值（a表示不透明度），十六进制的rgb值）

css----层叠样式表，用来设置网页元素中的样式

一、css运用

1.第一种方式：内联样式（行内样式）
（1）只能对一个标签使用

2、第二种方式：内部样式表
（1）将样式编写到head中的style中

3、第三种方式：外部样式表
1、将css编写到一个外部css文件中，通过link标签引入外部的css文件

4、基本语法
选择器 声明块
（1）选择器：选中页面指定元素
（2）声明块：由一个个声明组成； 是一个名值对结构； 名和值之间用冒号连接，末尾以分号结尾

二、选择器

1、元素选择器
（1）作用：根据标签名选择指定元素
（2）语法: 标签名{ }
（3）举例：p{ } h1{ } div{ }
2、id选择器
（1）作用：根据元素的id属性值选中一个元素
（2）语法：# id属性值{ }
（3）举例：#box{ } #red{ }

3、class选择器
（1）与id选择器用法相似（区别：id选择器不可重复使用，而class选择器可以重复使用）
（2）语法： .属性值{ }
（3）举例：.box{ }

4、通配选择器
（1）作用：选中页面所有元素
（2）语法：*

5、交集选择器
（1）作用：选择多个符合条件的元素
（2）语法：选择器1选择器2选择器n { }
（3）注意点：交集选择器里如果有元素选择器，必须元素选择器开头

6、并集选择器
（1）作用：同时选择多个选择器对应的元素
（2）语法：选择器1，选择器2，选择器n

7、子元素选择器
（1）作用：选中指定父元素的指定子元素
（2）语法：父元素>子元素

8、后代元素选择器
（1）作用：选中指定元素内的指定后代元素
（2）语法：祖先 后代

9、属性选择器

10、伪类选择器
（1）作用：用来描述一个元素的特殊状态
（2）语法：一般情况下使用冒号开头

10.1、超链接的伪类
（1）:link----用来表示没访问的链接

（2）:visited----用来表示访问过的链接
！！！此伪类只能修改链接的颜色

（3）:hover----用来表示鼠标移入的状态

（4）:active----用来表示鼠标点击

11、伪元素
（1）表示页面中一些特殊的并不真实的存在的元素
（2）伪元素用::开头

！！！ 选择器的权重

• 内联样式 1 0 0 0
• id选择器 0 1 0 0
• 类和伪类选择器 0 0 1 0
• 元素选择器 0 0 0 1
• 通配选择器 0 0 0 0
• 继承的样式 没有优先级
  （1）比较优先级时，需要将所有的选择器进行相加计算
  （2）选择器的累加不会超过其最大的数量级

比如：类选择器在高也不会超过id选择器

（3）优先级计算相同，则优先使用靠后的样式

（4）在某一样式中加 !important，此时优先级取到最高，甚至超过内联样式

三、

1、像素px（长度单位）
（1）屏幕实际由一个个小点点构成
（2）不同屏幕大小的像素大小是不同的，像素越小的屏幕显示效果越清晰
2.百分比
（1）将属性值设置为相对于父元素属性的百分比
（2）设置百分比可以使子元素跟着父元素的改变而改变
3、em（长度单位）
（1）相对于元素的字体大小来计算
（2）1em=1font-size
（3）会根据字体的大小改变而改变
3.1、rem（长度单位）
（1）相对于根元素（html）的字体大小来计算
4、rgb值（r–红色 g–绿色 b–蓝色）
（1）通过三种颜色调配出不同颜色
（2）每一种颜色的范围在0~255（0%到100%）之间
（3）语法rgb（红，绿，蓝）
4.1、rgba值（a表示不透明度）
（1）比rgb多了一位
4.2、十六进制的rgb值
（1）颜色浓度通过00~ff
（2）语法：#红色绿色蓝色
（3）若颜色两位两位重复可以进行简写（#aabbcc->#abc）

未完待续…