css基础知识整理 欢迎大家提出问题 后续持续更新
第三章 CSS3入门
3.2 css核心基础
1 css样式规则
选择器{属性1：属性值1；属性2：属性值2；}
注意：选择器区分大小写，属性和值不区分大小写；
如果属性值由多个单词组成且中间包括空格，这这个属性值必须添加英文双引号
2 引入css样式表
1、行内式
<标记名 style=”属性1：属性值1；属性2：属性值2；”>内容
2、内嵌式
选择器{属性1：属性值1；属性2：属性值2；}
3、嵌入式
3 css基础选择器
1、标记选择器
标记名{属性1：属性值1；属性2：属性值2；}
2、类选择器
.类名{属性1：属性值1；属性2：属性值2；}
引用方法：class=”类名”
3、id选择器
#id 名{属性1：属性值1；属性2：属性值2；}
4、通配符选择器
*{属性1：属性值1；属性2：属性值2；}
5、标签指定选择器
p{color:blue;}
.special{color:green;}
p.special{color:red;}
#
#
#
6、后代选择器
pstrong{color:red;}
#
7、并集选择器
h3,.special,#one{color:red}
3.3文本样式属性
1 字体样式属性
1、font-size：字号大小
（em、px）
2、font-family：字体
3、font-weight：字体粗细
（normal、bold、bolder）
4、font-style:字体格式
（normal、italic < 斜体字体样式>、oblique<倾斜字体样式>）
5、font：综合字体样式
必须保留font-size和font-family属性，否则font属性不起作用
6、@font-face属性：提取服务器字体
@font-family{
font-family：jianzhi；
src：url (字体路径)
}
7、word-wrap属性
（noraml、break-word<长单词或者URL地址内部进行换行>）
2 文本外观属性
1、color：文本颜色
2、letter-spacing：字间距
（normal、px、em）
3、word-spacing：单词间距
（normal、px、em）
4、line-height：行间距
（px、em、百分比%）
5、text-transform：文本转换
（none、capitalize<首字母大写>、uppercase<全部字符转换为大写>、lowercase<全部字符转换为小写>）
6、text-decoration：文本装饰
（none、underline<下划线>、overline<上划线>、line-throug<删除线>）
7、text-align：水平对齐
（left、right、center）
8、text-ident：首行缩进
（px、em、百分比%）
9、white-space：空白符处理
（normal<常规默认，文本中的空格空行无效>、pre<预格式化，按照输入>、nowrap<空格空行无效，强制不能换行>）
10、 text-shadow：阴影效果
选择器{text-shadow:h-shadow v-shadow blur color}
(h-shadow：水平阴影距离 v-shadow：垂直阴影距离 blur:模糊半径 color:阴影颜色)
11、 text-overflow:表示对象内溢出文本
选择器{text-overflow：属性值}
(clip：修剪溢出文本，不现实”….”、ellipsis：用”…..”显示被修剪文本)
3.4 CSS高级特性
1 CSS层叠性和继承性
1、 层叠性:多个选择器定义的样式可以叠加
2、 继续性：子标记会继承父元素的某些标记
2 CSS优先级
标记选择器权重为1；类选择器权重为10；id选择器权重为100。
!important命令被赋予最大优先级 p{color:red!importnat}
第四章 CSS3选择器
1 属性选择器
1、E[attˆ=value]属性选择器
(以value字符串开头的元素)
2、E[att$=value]属性选择器
(以value字符串结尾的元素)
3、E[att*=value]属性选择器
(包含value字符串的元素)
2 关系选择器
1、 子代选择器（>）
2、 兄弟选择器（+、~）
a、 临近兄弟选择器：+
b、 普通兄弟选择器：~
3 结构化伪类选择器
1、：root 对页面所以元素都有效
2、：not 对某种元素使用样式，排除这个结构元素下面的子结构元素
3、：only-child选择器 某个父类元素仅有一个子元素，则使用：only-child选择器
4、：first-child和：last-child选择器 父类元素中的第一个和最后一个子元素
5、：nth-child（n）和nth-last-child（n）选择器 父类元素中的某一个或者倒数某一个元素（与元素类型无关）
6、：nth-of-type（n）和：nth-lsat-of-type（n）选择器 父类元素中的相同元素某一个或者倒数 (与元素有关) odd：奇数 even：偶数
7、：empty 选择器 用来选择没有子1元素或者文本为空的所以元素
8、：target选择器 点击了页面中的超链接，并且跳转到target元素后，：target选择器生效
4 伪元素选择器
1、：before选择器 用于在被选元素的内容前面插入内容
<元素>：before
{
content：文字/url ( )
2、after选择器 用于在某个元素之后插入一些内容，使用方法同:before选择器
5 超链接伪类
a:link{CSS样式规则；} 未访问时超链接状态
a：visited{CSS样式规则；} 访问后超链接状态
a：hover{CSS样式规则；} 鼠标经过、悬停时超链接状态
a：active{CSS样式规则；} 鼠标点击不动时超链接的状态
第五章 CSS盒子模型
1 盒子模型概述
1、
2、盒子的宽与高
(width与height设置盒子宽高<百分比%、px>)
2 盒子模型的相关属性
1、边框属性
1) 边框样式（border-style）
border-style: 上边 右边 下边 左边 (一值为4边、两值为上下/左右、三值为上/左右/下)
2) 边框宽度 (border-width)
border-width：上边 右边 下边 左边 (一值为4边、两值为上下/左右、三值为上/左右/下)
使用前必须设置边框样式
3) 边框颜色：（border-color）
border-color：上边 右边 下边 左边
（border-top-colors、border-right-colors、border-bottom-colors、border-left-colors）
使用前必须设置边框样式
4) 综合设置边框
border：宽度 样式 颜色 (顺序不分先后)
（border-top：、border-rightrs：、border-bottom：、border-left：）
5) 圆角边框
border-radius：参数1/参数2
(参数1：圆角水平半径、参数2：圆角垂直半径)
参数1和参数2设置一个参数值时，表示4个角的圆角半径
参数1和参数2同时设置两个参数值时，参数1表示左上和右下圆角半径/参数2表示右上和左下圆角半径
参数1和参数2同时设置三个参数值时，参数值1表示左上圆角半径，参数值2表示右上和左下圆角半径，参数3表示右下圆角半径
6) 图片边框
border-image：border-image-source(图片路径url（）) border-image-slice（上下左右侧内偏移量）/ border-image-width（边框宽度）/border-image-outset（边框背景向盒外部延伸距离） border-image-repeat（平铺方式
2、边框属性
1) 内边框 (padding复合属性)
（padding-top、padding-right、padding-bottom、padding-left）
padding：上内边距 右内边距 下内边距 左右边距
2) 外边距 (margin复合属性)