一、CSS简介
1.什么是CSS？
CSS：Cascading Style sheet层叠样式表或级联样式表
是一种样式设置规则，用于控制页面的外观的样式
2.为什么使用CSS？
实现内容与样式的分离，方便团队开发
样式复用，便于网站后期维护
页面的精确控制，让页面更精美
3.CSS作用
页面外观美化
布局和定位
二、基本用法
1.CSS语法
<head>
<style type="text/css">
选择器{
样式名1:样式值1;
样式名2:样式值2;
}
</style>
</head>
选择器：要修饰的对象(东西)
样式名：修饰对象的每个样式
样式值：样式的取值
注意：多个样式之间以分号隔开，样式名和样式值之间以冒号隔开
2.CSS引用方式
有三种方式：内部样式、行内样式、外部样式
2.1 内部样式
也称为内嵌样式，在页面头部通过style标签定义
对当前页面所有符合样式选择器的标签起作用
2.2 行内样式
也称为嵌入样式，使用HTML标签的style属性来定义
只对设置style属性的标签起作用
注意：几乎所有HTML标签都具有style属性
2.3 外部样式
使用单独的css文件来定义，然后在页面中使用link标签或@import指令来引入
使用link标签链接外部样式表(推荐)
<link rel="stylesheet" type="text/css" href="css文件的路径">
使用@import指令导入外部样式表
<style>
@import url(css文件的路径);
</style>
三、选择器
1.基础选择器
1.1 标签选择器
也称为元素选择器，以HTML标签的名字作为样式应用依据
1.2 类选择器
使用自定义名称，以.作为前缀，然后通过HTML标签的class属性值作为依据
注意事项：
同时调用多个类选择器，以空格隔开
类选择器不能以数字开头
注意：几乎所有的HTML标签具有class属性
1.3 ID选择器
使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性值作为样式的应用依据，一对一的关系
注意：几乎所有的HTML标签都具有id属性，且id的值必须唯一
2.复杂选择器
2.1 复合选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
2.2 组合选择器
也称为集体声明
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
2.3 嵌套选择器
在某个选择器内再设置选择器，通过空格隔开
只有满足层次关系最里层选择器的标签才能应用样式
注意：使用空格不区分父子还是后代，表示的后代，使用>表示的是父子关系才可以
2.4 伪类选择器
根据不同的状态显示不同的样式，一般多用于a标签，即超链接
四种状态：
link ：未访问的链接
visited：已访问过的链接
hover ：鼠标移动到a标签上，即悬浮在链接上
active ：选定的链接，被激活
注意：书写顺序：link–>visited–>hover–>active
2.5 伪元素选择器
first-letter：对应元素内容中的第一个字符
first-line：对应元素内容中的第一行
after：配合content属性使用，在指定元素后面增加内容
before：配合content属性使用，在指定元素前面增加内容
四、选择器的优先级
1.优先级
行内样式>ID选择器>类选择器>标签选择器
原因：首先加载标签选择器，再加载类选择器，然后再加载ID选择器，最后加载行内样式
后加载的样式会覆盖最先加载的同名样式
2.内、外部样式加载顺序
就近原则
原因：按照书写顺序，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离得越近越优先
3.!important
可以使用!important使某个样式属性具有最高的优先级
五、常用CSS样式属性
1.字体属性
定义字体相关的样式
| 样式名 | 含义 | 解释 |
| ———– | —– | ——– |
| font-size | 大小、尺寸 | 可以使用多种单位 |
| font-weight | 粗细 | |
| font-family | 字体 | |
| font-style | 样式 | |
| font | 简写 | |
1.1 font-size
取值：
inherit 继承，默认从父标签继承字体大小（默认值），所有的css属性默认值都为inherit
HTML根元素默认字体大小是16px,也称为基础字体大小
px 像素，pixel
chrome浏览器不支持12px以下的字体大小，其他浏览器没问题
%百分比，相对于父标签的字体的大小的百分比
em 倍数，相对于父标签字体大小的倍数
1.2 font-weight
取值：
normal 普通
bold 粗体
自定义值（400 normal 700 bold）
1.3 font-family
一般建议写3种字体(首选、其次、备用)，以逗号隔开
1.4 font-style
取值：
normal 普通
italic 斜体
1.5 font
简写属性： font:font-style|font-weight|font-size|line-height|font-family
必须按照特定的顺序书写
2.文本属性
| 样式名 | 含义 | 解释 |
| ————— | ——- | ————————————— |
| color | 颜色 | |
| line-height | 行高 | 行之间的距离 |
| text-align | 水平对齐方式 | 取值：left、center、right |
| vertical-align | 垂直对齐方式 | 取值：top、middle、bottom，一般用于图片和文字的对齐方式 |
| text-indent | 首行缩进 | |
| text-decoration | 文本修饰 | 取值：underline、overline、line-through、none |
| text-transform | 字母大小写 | 取值：lowercase、uppercase、capitalize |
| letter-sapcing | 字符间距 | |
| word-spacing | 单词间距 | 只对英文有效 |
| white-space | 空白的处理方式 | 文本超出后是否换行，取值：nowrap（直行，不换行）、normal |
取值：四种写法
颜色名称，使用英文单词
16进制的RGB，#RRGGBB
特定情况下，可以进行缩写
#CCCCCC----->#ccc
#FF0000----->#F00
#FF7300----->无法缩写
注意：不区分大小写
rgb函数，rgb(red,green,blue)
每个颜色的取值范围，[0-255]
rgb(255,0,0)---->红色
rgb(0,255,0)---->绿色
rgb(0,0,255)---->蓝色
rgba函数：rgba(red,green,blue,alpha)
可以设置透明度，alpha取值范围[0,1],0表示完全透明，1完全不透明
rgba(255,0,0,1);----->纯红
rgba(255,0,0,0.5);----->红色半透明
3.背景属性
| 属性 | 含义 | 解释 |
| ——————— | ———- | —- |
| background-color | 背景颜色 | |
| background-image | 背景图片 | |
| background-repeat | 背景图的重复方式 | |
| background-position | 背景图片的位置 | |
| background-attachment | 背景图片是否跟随滚动 | |
| background | 简写 | |
3.1 background-color
取值：transparent(透明)
3.2 background-image
必须使用url()方式指定图片的路径
如果是在css文件中使用相对路径，此时是相对于css文件，而不是html文件
3.3 background-repeat
取值：repeat（默认）、no-repeat、repeat-y、repeat-x
3.4 background-position
默认背景图片显示左上角
取值：
关键字top、bottom、left、right、center
坐标，左上角(0,0)坐标，向右为x正方向，向下为y正方向
CSS雪碧图，即CSS Sprites，也称为CSS精灵，是一种css图像合并技术
含义：将网页许多非常小的图标/图片整合在一张大图中，当访问该页面的时候只需要下载一次，可以减少访问服务器的次数，提高性能
原理：使用background-position进行背景定位，定位出背景图片的位置
3.5 background-attachment
取值：scroll(默认值)、fixed固定不动
3.6 background
简写属性：background:background-color|background-image|background-repeat|background-position
书写顺序是没有要求
4.显示相关
4.1 display
通过display属性设置元素是否显示，以及是否独占一行
常用取值：
| 取值 | 含义 | 解释 |
| ———— | —————- | —————— |
| none | 不显示 | |
| inline | 显示为内联元素，行级元素的默认值 | 将块级元素变为行级元素，不再独占一行 |
| block | 显示为块级元素，块级元素的默认值 | 将行级元素变为块级元素，独占一行 |
| inline-block | 显示为内联元素，但可以设置宽和高 | 在inline的基础上设置宽和高 |
注意:
行级元素默认是无法设置宽和高，可以为行级元素设置display:inline-block，然后就可以设置宽和高了
4.2 visibility
也可以通过visibility属性设置元素是否显示
常用取值：
| 取值 | 含义 | 解释 |
| ——- | —- | —- |
| visible | 显示 | |
| hidden | 隐藏 | |
4.3 两者的区别
display隐藏时候不再占据页面的空间，后面的元素会占用其位置
visibility隐藏时候会占据页面的空间，位置还保留在页面中，只是不显示
5.列表属性
| 属性 | 含义 | 解释 |
| ——————- | ———– | ——————- |
| list-style-type | 设置列表项前的标记 | |
| list-style-image | 将图像作为列表前的标记 | |
| list-style-position | 设置列表前标记的位置 | outside(默认值)、inside |
| list-style | 简写 | |
| | | |
5.1 list-style-type
取值：none、disc、circle、square、decimal
5.2 list-style
简写属性：list-style:list-style-type|list-style-image|list-style-position
书写顺序没有要求
6.表格属性
border-collapse 表格中相邻的边框是否合并(折叠)为单一边框
取值：seperate（分离、默认值）、collapse（合并）
六、盒子模型
1.概念
盒子模型是网页布局的基础，将页面中所有的元素看成是一个盒子，盒子都包含以下几个属性：
width 宽度
height 高度
border 边框
padding 内边距
margin 外边距
2.盒子属性
2.1 border
表示的盒子的边框
分为四个方向：
border-top、border-right、border-bottom、border-left
每个边都包含三种样式：；
颜色color、粗细width、样式style
border-top-color、border-top-width、border-top-style
border-right-color、border-right-width、border-right-style
border-bottom-color、border-bottom-width、border-bottom-style
border-left-color、border-left-width、border-left-style
border-style的取值：
solid实线、dashed虚线、dotted点状线、double双实线、inset内嵌3D线、outset外嵌3D线
简写，三种方式：
按方向简写
border-top、border-right、border-bottom、border-left
书写顺序：width style color
按样式简写
border-color、border-style、border-width
必须按顺时针方向书写，即上、右、下、左，同时可以缩写
border-width:2px —->四个边都是2px
border-width:2px 4px —->上下2px ,左右4px
border-width:2px 5px 10px —->上2px 左右5px 下10px
border-width:2px 3px 4px 5px —->上2px 右3px 下4px 左5px
终极简写
如果四个边都一样，border:width stylle color
2.2 padding
表示盒子的内边距，即内容与边框之间的距离
同样也分为四个方向，也可以简写(按顺时针方向)
2.3 margin
表示盒子的外边距，即盒子与盒子之间的距离
同样也分为四个方向，也可以简写
3 其他
3.1 元素所占的空间
页面中的元素所占空间：
宽=width+左右padding+左右margin+左右border
高=height+左右padding+上下margin+左右border
