Web前端——CSS
页面美化和布局控制
概念：cascading style sheets 层叠样式表
层叠:多个样式可以作用在同一个html的元素上，同时生效
优点：
1.功能强大
2.将内容展示和样式控制分离—— 解耦，分工协作更容易，提高开发效率
Css与html的结合方式
如：<div style="color: aqua;">hello</div>
2.内部样式
在head标签内，定义style标签的标签体内容就是css代码
如<style> div{ color: antiquewhite; } </style>
3.外部样式
定义css资源文件；
通过link标签引入外部资源文件
例如：css文件：
div{
color:red;
}
引入文件：
<link rel="stylesheet" href="CSSFile/a.css">
*三种方式css作用范围越来越大，常用方式2和3。
CSS基本语法：
格式：
1.选择器{
属性名：属性值；
属性名2：属性值2；
........
}
选择器：删选具有相似特征的元素。
分类
基础选择器 1.id选择器：选择具体的id属性值元素，建议一个html文件中id唯一
语法：#id属性值{}
2.元素选择器：选择具有相同标签名的元素
语法：标签名{}
3.类选择器：选择具有相同的class属性值的元素
语法：.class属性值{}
*优先级：id>类>元素
扩展选择器： 1.选择所有元素：
语法：*{}
2.并集选择器：
选择器1，选择器2{}
3.子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2{}
4.父选择器：筛选选择器2的父选择器1
语法：选择器1 > 选择器2{}
5.属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称【属性名=“属性值”】{}
6.伪类选择器：选择一些元素具有的状态
语法：元素 ： 状态{}
属性：
1.字体、文本：
例：font—size：字体大小
color:文本颜色
text-align：对齐方式
line—height：行高
2.背景
background：
3.边框：
border：设置边框，符合属性
4.尺寸
width：宽度
height：高度
5.盒子模型：控制布局
marign：外边距
padding：内边距
（默认情况下，内边距会影响整个盒子的大小 解决：box—sizing：border—box）
float:浮动
