标签：语言 不同 根据 鼠标悬停 通用 ted 页面 元素选择器 active
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{样式声明} |
标签：语言 不同 根据 鼠标悬停 通用 ted 页面 元素选择器 active
原文地址：https://www.cnblogs.com/sna-ling/p/12811077.html
