前端知识点总结——CSS
1.CSS的概述
1.什么是CSS?
CSS：Cascading Style Sheets层叠样式表，级联样式表（简称：样式表）2.作用
设置HTML网页元素的样式3.HTML与CSS的关系
HTML：负责内容的展示
CSS：负责内容（元素）的修饰4.HTML与CSS之间的使用原则
W3C建议尽量使用CSS属性去取代HTML属性来修饰元素2.CSS语法规范
1.使用CSS样式的方式(重点)
1.内联样式
又称为行内样式
特点：将CSS样式定义在HTML开始标记中
语法：
<ANY style="样式声明1；样式声明2"></ANY>
样式声明：
1.由样式属性和值来组成
2.属性名与值之间用 冒号 连接
3.多个样式声明之间用 分号 分割
常用的CSS样式属性 和 值：
1.设置文本颜色的属性和值
属性：color
值：合法的颜色值（英文）
2.设置背景颜色的属性和值
属性：background
值：合法的颜色值（英文）
3.设置文字大小的属性和值
属性：font-size
值：以px或pt为单位的数字
ex：font-size:30px;
2.内部样式
在网页的头元素中增加一对<style>标记，在<style>标记声明该网页用到的样式规则
语法： <head>
<style>
/*注释*/
样式规则1
样式规则2
...
</style>
</head>
样式规则：由选择器和样式声明组成
选择器：规范了页面中哪些元素能够使用定义好的样式（就是把声明好的样式匹配给页面中的元素）
元素选择器：由元素的名称作为选择器
div,p,h1,span,a,img
选择器{}
ex：div{}
p{}
样式规则：
选择器{
样式声明；
}
ex:
div{
color:red;
font-size:20px;
}
p{
color:blue;
}
h1{...}
3.外部样式
独立于任何网页的位置处，声明一个样式表文件（***.css为后缀），
在.css文件中保存样式规则，然后在网页中引入.css文件。
使用步骤：
1.创建样式表文件，并编写样式规则
2.在网页中引入样式表文件
<head>
<link rel="stylesheet" href="**.css">
</head>3.CSS样式特征
1.继承性
大部分样式可以被继承（子元素继承父元素的样式特征）
必须是有层级关系的嵌套
<div style="color:red;">
<p>p</p>
</div>
2.层叠性
可以为一个元素定义多个样式，当样式属性不冲突时，可以同时将这些样式应用到元素上
div{
color:red;
}
div{
font-size:20px;
}
div{
background:gray;
}
3.优先级
如果样式声明冲突时，会按照样式的优先级来应用定义的样式规则
由低到高：
浏览器默认设置 最低
内部样式和外部样式 中(就近原则)
内联样式 最高
4.调整显示的优先级
!important规则：
调整显示的优先级
将!important添加在属性值之后，与值之间用空格隔开，就能优先使用当前样式
ex:
color:red !important;4.CSS基础选择器（重点）
1.选择器的作用
规范页面中哪些元素能够使用定义好的样式
2.选择器详解
1.通用选择器
作用：可以修饰页面上的任何元素
语法：*{样式声明}
效率较低，尽量少用
ex:
*{
color:red;
font-size:40px;
}2.元素选择器
作用：设置页面上某种（类）元素的样式
语法：标记名称{声明样式}
ex：
div{}
p{}
span{}3.类选择器
作用：定义页面上某个或某些元素的样式(谁想用谁就可以引用)
特点：通过元素的class属性进行引用
语法：
1.声明
.类名{样式声明}
注意：
1.类名是自定义的，但是注意类名不能以数字开头
2.类名不能包含特殊符号（&,^,%,$,#,@）
3.可以包含（_,-）
2.引用
<ANY class="类名">
特殊用法：
1.多类选择器
让一个元素同时引用多个类选择器
语法：
<ANY class="类名1 类名2 类名3 ...">
2.分类选择器
将元素选择器和类选择器联合使用
对同一类元素中某些特殊的内容进行修饰
语法：元素名称.类选择器{样式声明}
ex:div.text{color:red;}
<div class="text">dddd</div>
<div>d1d1d1</div>4.id选择器
作用：设置指定ID元素的样式（专属定制）
语法：#id值{样式声明}
ex:
<div id="one"></div>
#one{
color:red;
}5.群组选择器
作用：将多个选择器放在一起进行样式的声明定义
语法：选择器1,选择器2,选择器3,...{样式声明}
ex:
div,#main,.mycolor,p.text{color:red;}
等同于：
div{color:red};
#main{color:red};
.mycolor{color:red};
p.text{color:red};6.后代选择器
作用：通过元素的后代关系匹配元素（多级嵌套）
语法：选择器1 选择器2 选择器3{样式声明}7.子代选择器
作用：通过元素的子代（一层层级关系）关系匹配元素
语法：选择器1>选择器2{样式声明}8.伪类选择器
作用：匹配元素不同的状态的选择器
语法：
所有的伪类都是以：作为开始
选择器：伪类选择器{样式声明}
1.连接伪类
:link 匹配元素尚未访问的状态
:visited 匹配元素访问过的状态
2.动态伪类
:hover 匹配鼠标悬停在元素上时的状态
:active 匹配元素被激活时的状态（超链接，文本框，密码框点击的时候）
:focus 匹配元素获取焦点时的状态（文本框和密码框）
3.选择器的优先级
权值：标识当前选择器的重要程度，权值越大优先级越高。
元素选择器：1
类选择器： 10
伪类选择器：10
ID选择择器：100
内联样式： 1000
选择器的权值加到一起，大的优先
权值相同，以后定义的为主5.尺寸与边框
1.单位
1.尺寸单位
1.px：像素
1024*768
2.in:英寸
1in=2.54cm
3.pt：磅(1pt=1/72in)
多数用于表示文字的大小
4.cm:厘米
5.mm:毫米
6.em:相对于父元素乘以倍数(多个父元素2em)
7.rem:根相对（元素字体大小乘以倍数，html\body）
2.颜色单位（颜色取值）
1.英文单词
red,blue,gray,green,yellow,black....
2.rgb(r,g,b)
r:0-255
g:0-255
b:0-255
3.rgba(r,g,b,alpha)
alpha:透明度，取值为0-1之间的小数，值越大，不透明度越高
4.#rrggbb
由6位16进制的数字\字母表示一个颜色
0-9或A-f
#000000:黑色
#ffffff:白色
#eeeeee:灰色
#ff11aa
5.#rgb是上面的缩写形式
#000:黑色
#fff:白色
#f1a2.尺寸属性
1.作用
设置元素的宽度和高度
2.语法
1.宽度
width:宽度
min-width:最小宽度
max-width:最大宽度
2.高度
height：高度
min-height:最小高度
max-height:最大高度
3.页面中哪些元素允许设置尺寸属性
1.所有的块级元素都允许设置尺寸
div,p,h1,h2..h6,ul,ol,dl,结构标记
2.本身具备width和height属性的行内元素是可以设置的
img,table
3.行内块允许设置尺寸
大部分的表单控件（单选按钮，复选框）
4.大部分的行内元素是无法设置尺寸
a,span,b,i,u,s等3.溢出处理
当内容多，元素区域小的时候，就会产生溢出的效果，默认都是纵向溢出。
属性：overflow,overflow-x,overflow-y
取值：
1.visible
可见的，默认值，溢出可见
2.hidden
隐藏的，溢出的内容全部隐藏，溢出内容不可见
3.scroll
显示滚动条，溢出时，可用
4.auto
自动，溢出时才显示滚动条并可用4.边框
1.边框属性
1.简写方式
border:width style color;
width:边框的宽度，以px为单位的数值
style:边框的样式
取值：
solid:实线
dotted:虚线边框(点)
dashed:虚线边框(线)
color:边框的颜色
取值：合法的颜色值
transparent:透明色
注意：
取消边框：border:0;或border:none;
2.单边定义
只设置某一条边的边框
属性：border-方向:width style color;
方向：top/bottom/left/right
上 下 左 右
3.单属性定义
只设置四条边框的一个属性
属性：border-width/style/color:值；
ex:border-width:3px;
border-style:dotted;
border-color:red;
4.单边单属性的定义
只设置某一个方向的某一个属性
属性：
border-方向-属性：值；
方向：top/bottom/left/right
属性：width/style/color
ex：
border-left-color:blue;
border-right-style:solid;
border-bottom-width:6px;
2.边框倒角
将元素的直角倒换成圆角
属性：border-radius
取值：
1.以px为单位的数值
2.百分比 % 设置圆形（50%）
单角设置：
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
3.边框阴影
属性：box-shadow
取值：h-shadow v-shadow blur spread color inset
h-shadow:阴影在水平方向的偏移距离，必须值
取值为正：阴影向右偏移
取值为负：阴影向左偏移
v-shadow:阴影在垂直方向的偏移距离，必须值