css概述
CSS：Cascading Style Sheets ----层叠样式表 专门用于网页的美化
css的美化初体验:有三个font标签 需要设置字体大小为70 颜色为红色
结论：比HTML美化的功能更加强大，可以实现HTML不能实现的美化效果
CSS使用
1.css的代码三种引入方式
内嵌方式（行内方式） 内部方式 外部方式
内嵌方式（行内方式）
需要在每个标签内部加上style属性
属性的值：key1:value1;key2:value2...
内部方式
需要在<head></head>之间定义标签<style>
标签名{
key1:value1;
key2:value2;
}
细节：css的注释: /* 注释内容 */
外部方式 条件：需要引入外部的文件
在外部创建一个css样式文件写样式
在需要的页面将css文件引入 <link rel="stylesheet" href="文件地址">
外部方式可以用于多个页面
外部了解方式：<style type="text/css">
@import url("css文件地址");
</style>
细节：三种引入方式的优先级：就近原则 谁离标签近谁的优先级高
css的选择器（掌握）
作用：用来获取页面的标签的
条件：只能使用内部样式和外部样式来控制选择器
1 基本选择器
元素选择器:可以用来设置所有标签 根据标签名直接获取标签
类选择器:可以用来设置一组标签的 需要在标签上设定class属性根据class属性名获取标签
ID选择器:可以用来设置单个标签 需要在标签上设定ID属性根据id属性名获取标签
细节：ID选择器>类选择器>标签选择器
2 扩展选择器
扫描二维码关注公众号，回复：
5980869 查看本文章
并集(组合)选择器 多个选择器的集合 选择器1，选择器2，选择器3{属性}
层级选择器 父元素下所有的子孙元素 元素1>元素2 元素1 元素2（包含子子孙孙）
<div>
<div>
<div></div>
<div>
<div><div>
<div><div>
<div>
属性选择器 只要包含的有属性名就能被选中
伪类选择器 同一个元素在不同的操作状态下呈现不同的样式 例如超链接
元素:link 正常状态
元素:hover 鼠标悬停
元素:active 正在激活
元素:visited 访问过的
css属性介绍
设定背景
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-repeat 设置背景图像是否重复及如何重复
设定文本
color 设置文本颜色
text-align 对齐元素中的文本
text-indent 缩进元素中文本的首行
text-decoration 去除超链接的下划线
line-height 设置行高
设定字体
font-size 设置字体的尺寸
font-family 设置字体属性（楷体）
font-style 设置字体风格（斜体）
font-weight 设置字体的粗细
元素的显示和隐藏属性
display
取值：
none 设置元素不可见
inline 设置元素为内联元素
block 设置元素为块级元素
css的浮动
作用：可以让div在一行
属性：float 取值：left right
clear清除浮动
left:清除自身的左浮动
right:清除自身的右浮动
both:不管左浮动还是右浮动都清除自身
盒子模型
css认为所有元素就是一个盒子
盒子组成：内容 边框 内边距 外边距
外边距 ：margin 盒子和盒子或盒子和页面之间的距离
取值：left right top bottom
内边距 : padding 盒子中的内容和盒子边框之间的距离
取值：left right top bottom
标准盒子(默认)：内容不变，盒子变化
属性控制（默认）：box-sizing:content-box
怪异盒子：盒子不变 内容变化
属性控制：box-sizing:border-box