CSS页面美化、布局控制
1.概念：Csscading style sheets 层叠样式表
*层叠：多个样式可以作用在同一个 html 的元素上，同时生效
2.好处：
3.结合方式
- -在标签内使用 style 属性指定 css 代码
如< div style = “color :red;”> hello < /div>
- 在 head 标签内，定义 style 标签，style 标签的标签体内容就是 css 代码
- 如：< style>
-
div{ -
color : blue; -
} -
< /style> -
< div> hello< /div>
- 定义 css 资源文件。
- 在 head 标签内，定义 link 标签，引入外部的资源文件
3.也可写成：
< style>
@import"css的 url"
< /style>
注意：1，2，3种方式，css 作用范围越来越大
- 格式：
选择器{
属性名 1：属性值 1；
属性名 2：属性值 2；
。。。。。
}
选择器：筛选具有相似特征的元素
注意：
每一对属性需要使用；隔开，最后一对属性可以不加；
分类
-
基本选择器
1.id 选择器
*选择具体的 id 属性值元素
**语法：#id 属性值（）
2.元素选择器
*语法： 标签名称{}
*注意：id 选择器优先级高于元素选择器
3.类选择器
*语法：.class 属性值（）
*类选择器选择器优先级高于元素选择器 -
扩展选择器
1.选择所有元素：
语法：{}
2.并集选择器：
*选择器 1，选择器 2{}
3.子选择器：筛选选择器 1元素下的选择器 2
*语法：选择器 1 选择器 2{}
4.付选择器：
*语法：选择器 1>选择器 2{}
5.属性选择器：选择元素名称，属性名=属性值的元素
*语法：元素名称[属性名=“属性值”]{}
6.伪类选择器：选择一些元素具有的状态
*语法：元素：状态{}
*如：< a>
*状态：- link：初始化的状态 - visited：被访问过的状态 - active：正在访问的状态 - hover：鼠标悬浮状态
- 字体、文本
*font-size：字体大小
*color；文字颜色
*text-align：对齐方式
*line-height：行高 - 背景
*background - 边框
*border - 尺寸
*width
*height - 盒子模型：控制布局
-
margin：外边距
-
padding：内边距
*默认情况下内边距会改变盒子大小
*box-sizing：border-box; 设置盒子的属性，让 with 和 height就是盒子最终大小 -
float：浮动属性
*left
*right
-
