1.什么是css
|
css:cascading style sheets 层叠样式表，级联样式表，简称为样式表 |
2.css作用
|
设置html网页中元素的样式 |
3.HTML与css的关系
|
html：负责网页的搭建，内容的展示(素颜) css:负责网页的修饰。(亚洲四大邪术) 对于元素样式的修饰，W3C建议使用css而不用html的属性 html的属性，代码不能重用，没有可维护性 |
二.CSS的语法规范
1.使用css的方式
①行内样式(内联样式)
|
将css的样式写在元素的style属性中 color:red； 字体颜色 background-color：yellow;背景颜色 font-size:32px; 字号大小 语法 <any style="样式声明"></any> 样式声明 由样式属性和样式值组成 样式属性:值; 内联样式不能重用 内联样式优先级最高 在项目中，基本不用，只有在学习和测试中使用 |
②内部样式
|
在head标签中，使用<style>定义内部样式 语法: <head> <style> 选择器{样式声明;样式声明;} 选择器{样式声明} </style> </head> 选择器就是页面能够使用当前样式的条件 div{} p{} img{} span{} 总结：内部样式，只能在本页面重用 内部样式在项目中用的少，主要用于学习和测试 |
③外部样式
|
单独创建一个.css文件，在html文件中的head标签里 使用link标签引入这个css文件 <link rel="stylesheet" href="my.css"> 其中rel属性必须写，不写就不生效 项目中大批量的使用外部样式，但是，学习中用的少 |
2.css样式的特性
①继承性
|
大部分的css效果是可以直接被子元素继承的 必须是有层级嵌套关系的元素，才能继承。孩子继承父亲。 a标签的字体颜色，是不继承的 |
②层叠性
|
可以为一个元素定义多个样式 如果样式属性不冲突的时候，可以同时作用到这个元素上 |
③优先级
|
当样式属性冲突时，根据优先级去应用样式。 默认优先级，有高到低 1.内联样式 2.内部样式和外部样式，使用就近原则 3.浏览器默认样式 解释型语言---代码逐行从上往下运行，后执行会覆盖之前执行的 |
④调整优先级
|
!important 规则 h2{color:red !important;} 写在值和；之间，前面要有空格 意义，我这个值是最重要的，其它的值不要覆盖我 如果有多个!important;，那么还是遵循就近原则 |
三.基础选择器（重点*****）
1.选择器的作用
|
规范了页面中哪些元素能够使用定义好的样式 选择器就是一个条件，符合这个条件的元素，可以应用这个样式 |
2.选择器详解
①通用选择器
|
*{样式声明} *{margin:0;padding:0} 所有元素内外边距清0 如果取值为0，可以省略单位 |
②元素选择器，标签选择器
|
div{color:red;} 页面中所有对应元素，都应用这个样式 设置页面中某种元素的默认样式 ex:p{} img{} span{} 特殊用法：body{margin:0;padding:0;} body以及body内的元素，都会内外边距清0 |
③id选择器，专属定制
|
只对当前页面，一个元素生效 <any id="id值"></any> #id值{} 总结：一般id选择器在项目中很少单独使用，通常会作为子代选择器和后代选择器一部分。 |
④类选择器
|
定义页面上某个或者某类元素的样式 是一个公共样式，谁想使用，就用class调用一下 声明类选择器 .类名{样式声明} 类名的特点 1.必须有点 2.类名不能以数字开头 3.只能使用- _两种符号 引用类名 <any class="类名"> 引用时，没有点 |
|
特殊用法 1.多类选择器 一个元素引用多个类选择器 <any class="类名1 类名2 类名3 ....."> |
|
2.分类选择器 更精准的确定使用这个样式元素 增加了选择器的权值？？？坑 ①.类名1.类名2{} 匹配同时引用类名1，和类名2的元素 <div class="font36 text-danger">Lorem</div> .font36.text-danger{ font-style:italic; } ②元素名.类名{} h4.font36{} <h4 class="font36">Lorem amet.</h4> 匹配引用了font36这个类的h4元素 |
5.群组选择器
|
将多个选择器放在一起，定义公共样式（选择器之间使用,连接） 选择器1，选择器2，选择器3........{样式声明} |
6.后代选择器
|
通过元素的后代关系匹配元素 后代关系：一级嵌套或者多级嵌套 语法: 选择器1 选择器2 选择器3....{样式声明} |
7.子代选择器
|
子代关系：就是一级嵌套关系 语法：选择器1>选择器2>....{样式声明} 子代选择器和后代选择器可以混写 div>p span{background-color:purple;} |
8.伪类选择器
|
匹配元素不同状态的选择器 伪类选择器，都是以:开头 1.匹配未访问的链接 选择器:link{样式声明} 2.匹配访问后的链接 选择器:visited{样式声明} 3.鼠标悬停 选择器:hover{样式声明} 4.元素激活状态，鼠标按住元素不抬起 选择器:active{样式声明} |
以上4个伪类同时作用在一个元素上时，需要有严格编写顺序
爱恨原则 love & hate :link :visited :hover :active
:focus 匹配获取焦点元素状态
⑨选择器的权值问题
|
选择器默认自带权值，权值越高，优先级越高 |
|
!important >1000 内联样式 =1000 id选择器 =100 class和伪类 =10 元素选择器 =1 *通用选择器 =0 继承的样式 无权值 |
|
权值的总结 1.当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加，然后比较，权值大的优先显示 2.权值相同，就近原则 3.群组选择的权值，单独计算，不能相加 4.样式后面添加!important，直接获取最高优先级 内联样式不能添加!important 5.选择器权值的计算，不会超过自己的最大数量级 100个元素(1)选择器相加，不会大于10 |