目录
CSS是什么
层叠样式表（Cascading Style Sheets）
能够对网页中元素位置的排版进行像素级的精准控制。实现美化页面的效果。能够实现页面的样式和结构分离
基本语法
选择器+{声明}：
- 选择器决定针对谁进行修改
- 声明表示修改的内容
- 生命的属性是键值对。
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>【注】
- CSS要写在style标签中；
- style标签可以放在页面的任意位置（一般放在head标签中）；
- CSS使用/* */注释
引入方式
【1】作为html标签属性
通过style属性，指定某个标签的样式。只适合于简单的样式。适合单一标签。无法对多个标签生效（这种写法优先级较高，会覆盖掉其他的样式）。
<!-- 设置当前块的背景颜色为蓝色 -->
<div style="height:500px;width: 500px;background-color:blue"></div>
【2】<sytle>标签
写在style标签中，嵌套在html内部，存放在head标签中。
<head>
<style>
div{
<!-- 这里只设置了高度 -->
height: 500px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
【3】<link>引入外部的CSS文件
创建一个CSS文件，使用link标签引入CSS。
<!-- 首先需要创建一个CSS文件 -->
<link rel="stylesheet" href="[CSS文件路径]">选择器
选中页面中指定的标签元素，才能设置元素的属性
【1】基础选择器
（1）标签选择器
- 快速的将同一类型的标签选择出来；
- 但是不能差异化选择。
<style>
/* 所有的p标签的内容为红色,div标签的内容颜色为蓝色 */
div{
color: blue;
}
p {
color: red;
}
</style>（2）类选择器
为任意地html标class，一个class可以绑定多个元素。这样选择某个类，就可以为该类的元素设置样式:
- 类名使用.开头；
- 标签使用class属性来调用；
- 一个类可以被多个标签使用，一个标签也可以使用多个类；
<head>
<style>
.blue {
color:red;
}
</style>
</head>
<body>
<!-- 这里只设置了高度 -->
<div>水浒传</div>
<div class="blue">三国演义</div>
<p class="blue">红楼梦</p>
</body>
（3）id选择器
和类选择器相似。
- 使用#开头表示id选择器
- id选择器的值和html中某个元素的id相等；
- id是唯一的，不能被多个标签使用（和类选择器的区别）
<head>
<style>
#num {
color: blue;
}
</style>
</head>
<body>
<div id="num">小苹果</div>
</body>
【4】通配符选择器
使用*定义，选取页面所有内容。
* {
color: red;
}【2】复合选择器
（1）后代选择器
包含选择器。选择某个父元素中某个子元素或者孙子元素。
- 元素之间使用空格间隔。
- 只选最后的元素，不影响其他的元素。
ol li {
color: red;
}修改ol中li标签的颜色。也可以是孙子元素。
（2）子选择器
和后代选择器类似。但是只能选择子标签。
- 使用>分割
- 只选择亲儿子。
/*后代选择器，会将链接1和链接2都选中*/
.two a {
color: red;
}
/*子选择器，只选中链接1*/
.two>a {
color: red;
}
<div class="two">
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div（3）并集选择器
用于选中多组标签：
- 通过逗号分割多个元素；
- 任何基础选择器都可以使用并集选择器。
（4）伪类选择器
- 链接伪类选择器
- a:link选择未被访问过的链接
- a:visited选择已经被访问过的链接
- a:hover选择鼠标指针悬停的链接
- a:active选择活动链接（鼠标按下了但是为弹起）
- :force伪类选择器
选择获取焦点的input表单元素。（设置表单元素被选中时的格式）
常见元素的属性
【1】字体属性
（1）设置字体
- 字体格式可以用中文；
- 多个字体之间使用空格隔开。（从左到右查找字体，没找到使用默认字体）
- 字体名有空格，使用引号包裹。
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
</style>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>（2）大小
p {
font-size: 20px;
}（3）粗细
- 可以使用数字表示粗细；
- 700==bold，400==normal；
- 取值范围：100~900.
p {
font-weight: bold;
font-weight: 700;
}（4）斜体
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;【2】文本属性
（1）文本颜色
RGB色光三原色，对于R、G、B三个分量，分别是用一个字节表示。数值越大表示该分量的颜色就越浓。255,255,255表示白色；0,0,0表示黑色。
表示颜色的三种方式：
- 预定义的颜色值
- 十六进制形式
- RGB方式
color: red;
color: #ff0000;
color: rgb(255, 0, 0);（2）文本对齐
控制文字水平方向的对齐，也可以控制图片等元素居中或者靠右。
- center：居中对齐；
- left：左对齐；
- right：右对齐
text-align: [值];（3）文本装饰
- underline：下划线；
- none：啥都没有，可以用来给标签去除下划线；
- overline：上划线；
- line-through：删除线。
text-decoration: [值];（4）文本缩进
控制段落的首行缩进：
- 单位可以使用px或者em；
- em表示当前文字的大小；
- 缩进可以是负的，表示向左缩进。
text-indent: [值];（5）行高
行高指的是上下文本之间的基线距离。HTML中展示文字涉及到这几条线：
- 顶线；
- 中线；
- 基线；
- 底线。
内容区为顶线和底线之间的区域。
line-height: [值];【注】
- 行高=上边距+下边距+字体大小；
- 行高也可以取normal值；
- 行高等于元素高度，可以实现文字居中对齐（垂直居中）
【3】背景属性
（1）背景颜色
默认是transparent（透明），可以通过设置修改。
background-color: [指定颜色]（2）背景图片
background-image: url(...);比image更方便控制位置。url可以是相对位置，也可以是绝对位置。可以加引号，也可以不加引号。
（3）背景平铺
- repeat：平铺；
- no-repeat：不平铺；
- repeat-x：水平平铺；
- repeat-y：垂直平铺。
背景图片和背景颜色可以同时存在，背景图片在背景颜色的上方；
background-repeat: [平铺方式]（4）背景位置
参数的三种风格：
- 方位名词（top、left、right、bottom）
- 精确单位：坐标或者百分比（以左上角为原点）
- 混合单位：同时包含方位名词和请确单位
background-position: x y;
- 如果参数是两个方位词，与顺序无关；
- 如果只指定了一个方位，第二个默认居中；
- 如果参数是混合单位，第一个值为x，第二个值为y。
（5）背景尺寸
background-size: length|percentage|cover|contain;
- 可以填充具体的数值；
- 也可以填百分比：根据父元素的尺寸设置；
- cover：把背景图像扩展至足够大，是背景图片完全覆盖背景区域，
- contain：把背景图像扩展至最大尺寸，宽度和高度完全适应内容区域。
【4】圆角矩形
通过border-radius使边框带圆角效果。length表示内切圆的半径。
border-radius: length;（1）生成圆形
设置宽和高相等，使内切圆的半径等于宽的一半即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（2）生成圆角矩形
设置内切圆的半径等于矩形高度的一半即可。
border-radius实际上是一种复合的写法，可以针对四个角进行分别设置（按照顺时针的方式，上右下左）。
border-radius: 10px 20px 30px 40px;
元素的显示模式
【1】块级元素
常见元素：
h1~h6、p、div、ul、ol、il等
特点：
- 独占一行
- 高度、宽度、内外边距、行高都可以控制
- 宽度默认和父级元素相同
- 是一个容器，里面可以放内联或块级元素
【2】内联元素
常见元素：
a、strong、em、b、i、del、span等
特点：
- 不独占一行，一行可以显示多个
- 设置高度、宽度、行高无效
- 左右外边距有效，上下无效；内边距有效
- 内联元素只能容纳文本或其他内联元素，不能放块级元素
【3】改变显示模式
使用display属性修改元素的显示模式。
- display: block 改成块级元素
- display: inline 改成行内元素
- display: inline-block 改成行内块元素
- display：none隐藏元素
盒模型
每一个HTML元素相当于一个盒子，由下面几部分组成：
- 边框：border
- 内容：content
- 内边框：padding
- 外边框：margin
【1】边框
（1）基础设置
- border-width：粗细
- border-style：边框样式（默认无边框）。solid实线边框，dashed虚线边框，dotted点线边框
- border-color：颜色
支持简写，没有顺序要求。可以改变四个方向任意的边框（border-top/bottom/left/right））
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 100px;
width: 200px;
background-color: red;
border: 5px blue solid;
}
</style>
</head>
<body>
<div></div>
</body>
（2）边框会撑大盒子
可以看到，上面设置盒子的高为100px，宽为200px，但实际的高为110px，宽为210px。
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子。
【2】内边距/外边距
（1）基础写法
padding设置内容和边框之间的距离。可以为四个方向都添加边距：
- padding-top
- padding-bottom
- padding-left
- padding-right
【注】
- 内边距也会撑大盒子；
- 使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子
（2）复合写法
可以将四个方向的padding写在一起（外边距也类似）：
- padding：5px（表示四个方向都是5px）
- padding：5px 10px（上下内边距5px，左右内边距10px）
- padding：5px 10px 20px（上内边距5px，左右内边距10px，下内边距20px）
- padding：5px 10px 20px 30px（顺时针方向）
使用控制台可以清楚的查看：
（3）块级元素水平居中
将水平margin设置为auto。
【注】
- 这个水平居中的方式和text-align不一样；
- margin：auto使使用在块级元素的；
- text-align是行内元素或者行内块元素居中。
不能使用上下margin为auto的方式设置上下居中。
弹性布局
任何一个元素都可以通过display:flex完成弹性布局。flex布局的本质是给父盒子添加display：flex属性，来控制盒子的位置和排列方式。
常用属性
justify-content
设置主轴上的子元素排列方式。
| 值 | 属性 |
| flex-start | 默认值，位于容器的开头 |
| flex-end | 位于容器结尾 |
| center | 位于容器中央 |
| space-between | 行与行之间留有间隔 |
| space-around | 行之前、行之间、行之后都留有空间 |
align-items
设置侧轴上的元素排列方式。
| 值 | 属性 |
| stretch | 默认值，行拉伸占据剩余空间 |
| center | 实现侧轴方向居中 |
| flex-start |
位于侧轴开头 |
| flex-end | 位于侧轴结尾 |
| space-between | 行均匀分布在弹性容器中 |
| space-around | 行均匀分布在弹性容器中，两端各一半 |
