css基础
1.css的引用
①内联样式：也称行内或行间样式，是在html标签上添加style属性来实现的
②内部样式：在标签内添加的样式，内部样式的代码可以复用、符合W3C标准，尽量让结构和样式分开处理
③外部样式：
rel：指定资源跟页面的关系
href：资源的地址，用于在当前du文档和引用资源之间确立联系
src：src是source的缩写用于替换当前元bai素。
2.颜色表达法
①单词表示法 例：red；变红色
②十六进制表示法：例：#cccccc，灰色 长度为6的名字当1/2，3/4，5/6一致时可以简写#ccc
③RGB三原色表示法（范围0-255）
3.css背景样式
background-color：背景颜色
background-image：背景图片（URL背景地址，默认水平垂直都铺满背景图）
background-repeat：背景图片的平铺方式（repeat-x、repeat-y、repeat、no-repeat）
background-positon：背景图片位置（x y）=>（数字[px/%] | 单词[x:left/center/right],[y:top/center/bottom]）
background-attachment：背景图随滚动条的移动方式（scroll默认值，背景位置是按当前元素进行偏移的；fixed背景位置是按照浏览器进行偏移的）
复合样式：background:red url() repeat 0 0;（颜色 背景图 平铺方式 位置）
4.CSS边框样式
border-style：边框样式（solid实线、dashed虚线、dotted点线…）
border-width：边框大小（px）
border-color:边框颜色
【注】可单独对一个边框进行设置（border-top/right/bottom/left-）
5.CSS文字样式
font-family:字体类型
font-weight：字体粗细（单词[normal正常、bold加粗]； 数字[100-500正常、600-900加粗]）
6.CSS段落样式
text-decoration：文本修饰（underline下划线、line-through删除线、overline上划线、none不添加任何修饰），可添加多个修饰，用空格隔开
text-transform：文本大小写（针对英文段落，lowercase小写、uppercase大写、capitalize首字母大写）
text-indent：文本缩进（首行缩进font-size的两倍，或2em[em相对单位，永远跟一个字体设置的大小相同）
text-align：文本对齐方式（left默认、right、center、justify[两端点对齐，中间自行调节]）
line-height：定义行高（不是固定值，根据当前字体的大小变化，用数字+px或scale[相对于原来字体的比例]表示）
letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）
强制折行
word-break：break-all; 非常强烈的折行
word-wrap：break-word; 不是那么强烈的折行
7.CSS选择器
①id选择器
css:#elem{}
html:id=“elem”
【注】1.在一个页面中，ID值是唯一的
2.命名规范，字母 _ - 数字 （命名的第一位不能是数字）
3.命名方式：驼峰式（小驼峰、大驼峰）、下划线式、短线式②class选择器
css:elem{}
html:class=“elem”
【注】1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
4.标签+类的写法③标签选择器
css:div{}
html:<div></div>④群组选择器/分组选择器
css:div,p,span{}⑤通配选择器
*{}
尽量避免使用通配选择器，因为会给所有的标签添加样式，范围光，权限低⑥层次选择器
后代：M N{}
父子:M > N{}
兄弟：M ~ N{} 当前M下面的所有兄弟N标签
相邻：M + N{} 当前M相邻的N标签⑦属性选择器
div[class]{}
div[class][id]{}
div[class=box]{}
div[class*=search]{} //只要search在class中出现过都可以选中
=：完全匹配 *=：部分匹配 ^=:起始匹配 $=:结束匹配⑧伪类选择器
css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
:link 访问前的样式（只能给a标签）
:visited 访问后的样式（只能给a标签）
:hover 鼠标移入时的样式（可以给所有标签）
:active 鼠标按下时的样式（可以给所有标签）
如果四个伪类都生效，顺序为：L V H A⑨伪元素选择器
div:after{content: ;color: }
div:before{content: }
:checked、:disabled、:focus 都是针对表单元素⑩结构性伪类选择器
:nth-of-type(){}、:nth-child(){} 角标从1开始，n值表示从0到无穷大即都被选中，隔行换色（2n）(2n+1)
选中第一项 :first-of-type{} :first-child{}
选中最后一项 :last-of-type{} :last-chile{}
只有一项的时候被选中 only-of-type{}
【注】type和child的区别：type看孩子类别，child不区别孩子类别8.CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认不继承，可以使用inherit值让其继承9.css优先级
相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级高
单一样式优先级
style行间（权重1000）> id（权重100） > class（权重10）> tag（权重1）> 继承
!important（不能针对继承的属性进行优先级的提升）
提升样式优先级，非规范方式，不建议使用 #elem{color:red !important;}
标签+类与单类
标签+类 > 单类
群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高
层次优先级
权重比较、约分比较