2.1 CSS基本样式

CSS样式

1.内部样式 2.外部样式 3.行内样式 样式表优先级问题：行内样式>内部样式>外部样式

伪类选择器

语法：

a:link{属性:属性值;}超链接的初始状态; a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停，即鼠标移入超链接时的状态; a:active{属性:属性值;}超链接被点击时的状态;
a:focus{属性:属性值;}激活时的状态;

选择器的权重

个数	选择器	权重,CSS中用四位数字表示权重，权重的表达方式如:0,0,0,0
1	类型(元素)选择器	0001
2	Class选择器(类选择器)	0010
3	ID选择器	0100
4	包含选择符	为包含选择符的权重之和
5	内联样式	1000
6	!important	10000
CSS选择器解析规则1	当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
CSS选择器解析规则2	相同权重的选择符，样式遵循就近原则：那个选择符最后定义，就采用那个选择符样式

CSS文本属性

文本属性

属性	描述	说明
font-size	字体大小	单位px，浏览器默认是16px，设计图常用字号为12px
font-family	字体	当字体是中文字体，英文字体中有空格时，需要双引号;多个字体中间用逗号链接，先解析第1个字体，如果没有解析第2个字体，以此类推
color	颜色	color:red;color:#fff0;color:rgb(255,0,0);0-255
font-weight	加粗	font-weight:bolder(更粗的)/bold(加粗)/normal(常规); font-weight:100-900;100-500不加粗 600-900加粗
font-style	倾斜	font-style:italic(斜体字)/oblique(倾斜的文字)/normal(常规显示);
text-align	文本水平对齐	text-align:left;水平靠左 text-align:right;水平靠右 text-align:center;水平居中 text-align:justify;水平2端对齐，但是只对多行起作用。
line-height	行高	line-height的数据=height的数据，可以实现单行文本垂直居中
text-indent	首行缩进	text-indent可以取负值；text-indent属性只对第一行起作用
letter-spacing	字间距	控制文本和字体之间的间距
text-decoration	文本修饰	text-decoration:none;没有 underline;下划线 overline;上划线 line-through;删除线
font	文字简写	font是font-style font-weight font-size/line-height font-family的简写。 font:italic 800 30px/80px"宋体"; 顺序不能改变,必须同时指定，font-size和font-family属性时才起作用
text-shadow	文本阴影	text-shadow:10px 10px 1px red; 4个值分别代表：水平方向位移，垂直方向位移，模糊程度，阴影颜色

CSS背景属性

当为一个盒子设置背景时：

属性	描述	说明
background-color	背景颜色	background:red;
background-image	背景图片	background-image:url();
background-size	背景图片大小	background-size:宽px 高px;cover;覆盖
background-repeat	背景图片的平铺	background-repeat:no-repeat/repeat/repeat-x/repeat-y;
background-position	背景图片的定位	background-position:水平位置px 垂直位置px;可以给负值，center;居中
background-attachment	背景图片的固定	background-attachment:scroll(滚动)/fixed(固定在浏览器窗口里面,固定之后就相对于浏览器窗口了);

背景模糊

backdrop-filter: blur(5px);