前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
一丶CSS简介
叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
特点:
1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠
2.使数据和显示分开
3.降低网络流量
4.使整个网站视觉效果一致
5.使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
二丶CSS的引入方式
行内样式
### 在body标签内
<!-- 行内样式:优先级最高-->
<p style="color: darkcyan">唉不穿的覆盖惠健康</p>
内接样式
### 在head标签内
<!-- 内接样式 -->
<style>
div{
color: darkmagenta;
}
</style>
外接样式-链接式
### 在head标签内
<!-- 外接样式 链接式 -->
<link rel="stylesheet" href="commons.css">
外接样式-导入式
<!--外接样式 导入式 -->
<style>
@import url('commons.css');
</style>
三丶CSS的基本选择器
CSS优先级 : id选择器 > 类选择器 > 元素选择器
标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
类选择器
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
<style>
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
</style>
<body>
<!-- 公共类 共有的属性 -->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
</body>
ID选择器
同一个页面中id不能重复。
任何的标签都可以设置id ，id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
<style>
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
</style>
<body>
<div id="box">娃哈哈</div>
<div id="s1">爽歪歪</div>
<div id="s2">QQ星</div>
</body>
通用选择器
<style>
/*通用选择器:
如果标签没有设置属性,会被统一进行操作.比如:上色
所有的标签都会被选中*/
* {
color: yellow;
}
</style>
<body>
<p>段落</p>
<div>div标签</div>
</body>