css基础
? 选择器
? 盒子模型
? 浮动
? 定位
? 动画 ，伸缩布局（c3部分）
1. ? 层叠性（覆盖）
◆在同一个标签中，如果优先级相同，如果定义的样式发生冲突，那么最后一次定义的样式会将前面定义的样式（冲突的那部分）覆盖掉。（根据样式表的书写顺序额）
声明冲突：属性相同值不同，依靠层叠性解决
标签优先级 优胜略汰 跟来源和重要性
特殊性 优胜略汰
color = "red"; 普通声明
color = "red" !important;重要声明
源次性 优胜略汰
2. ?继承性：
◆首先只有在嵌套关系的标签中才会出现继承性。
◆如果子元素默认没有样式，同时该元素又受父元素的样式影响
◆color ， font属性 ，text-align(此标签只能用于块标签当中)...都可以被子元素继承，文本类的样式具有继承性
◆注意：
?width 和 height 不能被继承，块级元素宽度受父级影响，是因为块级元素特性
?a标签在默认情况下，不能受父元素的文字颜色影响
?标题标签在默认情况下，不能直接等于父元素设置的文字大小
3. ?优先级
标签选择器<类选择器<ID选择器<行内样式<!important
0 0 0 0 0
选择器数量和 ，类选择器数量和，ID选择器和 相比较
同等优先级，使用靠后的样式
并集优先级单个计算
?继承的权重为0
?权重可以叠加
总结：
◆一般我们通过css设置样式的时候，不要把选择器的优先级设置的太高或者太低。
注意：在浏览器中交集的优先级要大于单个类或者id，但是，一个元素标签和一个类或者一个id比不上交集的优先级，大概是浏览器会在分别写的类（或id）和元素间选择一个，然后再和其他比较
属性名 = “属性值”或者 属性名 = ‘属性值’
单引号或者双引号都是一样的
? 作用：
◆美化网页（通过css控制标签的样式）
◆网页布局（通过css控制标签的位置）
? 概念：层叠样式表 (Cascading Style Sheets)或者级联样式表层叠：css的特性。
注意：
◆css是以html为基础
? 书写方式：
内部样式表
?先准备一个html页面
?在html页面中，head标签中添加一个style标签
?在style标签中写css代码
◆外联式写法（外部样式表）
?首先新建一个单独的css文件（在该文件中不需要写style标签，直接写css代码就可以）
?通过link标签将该css文件引入到当前html页面中
注意：
一个页面中可以同时引用多个css文件
◆行内式写法：将css代码写入到html标签内部（内联样式）
?将css代码在标签内部设置
?总结：
?行内样式只能影响当前标签的样式
?行内样式会导致网页结构乱
?样式与结构没有分离
? 选择器 {属性: 值; ......}
?选择器分类
◆基础选择器
?标签选择器（掌握）
?类选择器（掌握）
?ID选择器 在css当中尽量不要使用id选择器
?通配符选择器
◆复合选择器
?标签指定式选择器（交集选择器）
?并集选择器
?子代选择器
?后代选择器
兄弟选择器
?属性选择器
?伪类选择器
? html标签名 {属性: 值;}
? 作用：
◆ 通过html标签名选中需要设置样式的标签
注意：
◆代码中遇到特殊符号，都必须是英文输入法下的符号。
类命名规范
? 自定义类名不能使用纯数字或以数字开头
? 不推荐使用汉字定义类名
? 不能使用特殊字符或者以特殊字符开头（$,#,@,%...）
? 建议不推荐使用标签名作为类名
?一般我们用具有一定语义的单词或者汉语拼音去定义一个类名 语义化类名
自定义类名 {属性: 值; ....} 定义
类样式的调用：
标签通过class属性去调用定义好的类样式
例如：
.test {color: red;}
<p class=”test”>文字</p>
#自定义id名称 {属性: 值; ....}
调用：
标签通过id属性调用id样式
#test {color: red;}
<p id=”test”></p>
ID选择器与类选择器的区别：
◆语法定义有区别 ( . #)
◆在id选择器中，一个标签只能调用一个id样式。
◆一个类样式可以被多个标签调用，但是一个id样式最好只能被一个标签调用（否则，不符合编程规则）
语法：
* {属性: 值;...}
特点：
将页面中所有的标签都选中
标签名.类名 {属性: 值;}
标签名id名 {属性: 值;}
总结：
标签指定式选择器符合 ：既。。。。又。。。的关系
注意：在浏览器中交集的优先级要大于单个类或者id，但是，一个元素标签和一个类或者一个id比不上交集的优先级，大概是浏览器会在分别写的类（或id）和元素间选择一个，然后再和其他比较
选择器 选择器 {属性: 值;}
总结：
◆后代选择器标签之间的结构关系必须是嵌套结构
◆后代选择器中只能选中所有的后代元素（直接子元素和间接子元素）
◆后代选择器中，选择器与选择器之间必须使用空格隔开
注意上图的li标签样式
选择器>选择器 {属性: 值；}
总结：
◆子代选择器只能选中直接子元素
◆子代选择器不能选中父元素
◆子代选择器标签的结构必须是嵌套结构
兄标签 + 弟标签 { 修饰弟标签 } 单个紧挨着的弟标签
兄标签 ~ 弟标签 {修饰后边所有兄弟标签）后边所有的弟标签
选择器,选择器 {属性: 值;}
注意：
◆首先并集选择器可以选中所有符合条件的标签
◆并集选择器与标签的结构无关
◆并集选择器一般在css样式初始化的时候会使用。
?属性选择器是通过标签的属性选中标签
?语法：
[]{属性:值;....}
?给链接添加样式:
正常链接 a:link （存在兼容性问题，直接用a即可）
鼠标滑过的链接 a:hover （hover 可以用于任何标签前面）
正在点击的链接 a:active
访问过的链接 a:visited(只能定义字体颜色）该选择器会让浏览器有缓存问题；通过历史记录判断该标签是否被访问过 （用途很少）
hover作用于自身的时候只能给亲父级或者亲祖父级添加，才能影响自己
获取焦点 :focus
获取第一个子标签 :first-child
选中的元素 ::selection
1. :first-child {属性: 值；} 选中父元素中的第一个子元素
2. :last-child {属性: 值;} 选中父元素中最后一个子元素
3. :nth-child(n) {属性: 值;} 选中父元素中第n个子元素
◆n 可以取一个正整数 （取值可以取到数字0）
◆n可以设置一个关键字 odd(奇数个数) | even（偶数个数）
◆n可以是一个表达式 an+b
a和b可以设置正数和负数
注意：不能使用 n-b 这样的结果是计算机不会报错，同时会忽视nth:child()
p:nth-child(-n + 2):指的是p标签的父级的前（小于等于2）个子元素 中 的p标签
4. :nth-last-child(n){属性: 值;}
选中倒数第n个子元素
5. :first-of-type
6. :last-of-type
7. :nth-of-type
注意：伪类选择器是通过:
:target {属性:值;....}
◆目标伪类选择器配合锚链接使用
◆当该标签被锚链接指向的时候，那么才会执行里面的css代码。
:first-line {} 选中父容器中的第一行
:first-letter{} 选中首字母（文字）
:before
:after
::selection{} 设置鼠标选中标签时的样式
注意：
::selection {}只能设置与颜色相关的属性。
现在伪元素不支持ie6
当使用nth-child的时候并不会把伪元素计算在内
总结：
after和before
◆伪元素必须设置content属性
◆伪元素属于行内元素
◆伪元素中不能再创建伪元素
◆一般是将伪元素要依附于某一个标签
: 和：：是一样的区别不大w3c文档中是：符号
◆一个标签可以同时调用多个类样式
?一个标签只能调用一个id样式
原文：https://www.cnblogs.com/yangwenlong/p/12456513.html