目录
1.什么是CSS
层叠样式表，CSS能够对网页中元素位置的排版进行像素级的精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。
CSS控制页面的展示效果，HTML决定页面结构。
2.CSS基本语法规范
在style标签内编写CSS代码。
选择器+{一条/N条声明}
- 选择器决定针对谁修改（找谁）
- 声明决定修改啥（干啥）
- 声明的属性是键值对。
例子：
<style>
p
{
color: red;
font-size: 40px;
}
</style>3.CSS引入方式——内部样式表
写在style标签中，嵌入到html内部。
理论上来说style放到html的哪里都行，但是一般都是放到head标签中。
- 优点：这样做能够让样式和页面结构分离。
- 缺点：分离的还不够彻底，尤其是css内容多的时候。
外部引入方式可以将css引入，达到完全分离的效果。
4.CSS引入方式——行内样式表
行内优先于内部，但行内样式表不常用。
<h1 style="color: aqua; font-size: 80px;">你好</h1>5.CSS引入方式——外部引入
实际开发中最常用的方式。
- 创建一个CSS文件
- 使用link标签引入CSS
完全隔离CSS文件和HTML文件，做到了很好的解耦。
<link rel="stylesheet" href="./test_4_27_1.css">rel表示引入文件是样式表。
6.CSS选择器——标签选择器
以段落标签p为例：
p
{
color: red;
font-size: 40px;
}7.类选择器
.类名表示类选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.student
{
color:aqua;
font-size: 80px;
}
.teather
{
color:bisque;
font-size: 80px;
}
.s
{
color:black;
}
.t
{
font-size: 100px;
}
</style>
</head>
<body>
<p class="student">张三</p>
<p class="teather">李四</p>
<p class="s t">王五</p>
</body>
</html>类选择器可叠加，.s和.t叠加表示“王五”。
8.ID选择器
#ID表示id选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#fe
{
color:red;
}
</style>
</head>
<body>
<p id="fe">前端开发</p>
<p id="server">后端开发</p>
</body>
</html>9.通配符选择器
*表示通配符选择器，选择浏览器的所有内容。
10.复合选择器
将之前的基础选择器进行组合。
将有序列表的颜色改成红色且将hobby类和id为fe的内容大小设置为100px：
ol li
{
color:red;
}
.hobby #fe
{
font-size: 100px;
}11.伪类选择器
伪类选择器是用来定义元素状态的。
链接伪类选择器：
| 伪类选择器 | 描述 |
| a:link | 选择未被访问过的链接 |
| a:visited | 选择已经被访问过的链接 |
| a:hover | 选择鼠标悬停上的链接 |
| a:active | 选择活动链接（鼠标按下了但是未弹起） |
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link
{
color: red;
}
a:visited
{
color:aqua;
}
a:hover
{
color:black;
}
a:active
{
color:blueviolet;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="#">123</a>
</body>
</html>:root伪类选择器：等同于html选择器，但优先级更高。
:focus选择器，选择获得焦点的输入字段，并设置其样式。
12.字体设置
设置字体类型和大小：
input:focus
{
font-family: 'Microsoft YaHei';
font-size: 30px;
}13.字体颜色
html
{
color:red;
color:#ff0000;
color:rgb(255, 0, 0);
}三种设置方式，直接设置，16进制，rgb。
14.字体粗细
p
{
font-weight: normal;
}除了normal外，还有很多的设置选项。
| 值 | 描述 |
| normal | 默认值，定义标准的字符 |
| bold | 定义粗体的字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100/200/300/400/.../900 | 定义由细到粗的字符 |
| inherit | 从父元素继承字体的粗细 |
15.文字样式
设置div倾斜：
div
{
font-style: italic;
}除了italic外，还有其它三种：
| 值 | 描述 |
| normal | 默认值，浏览器显示一个标准的字体样式 |
| italic | 浏览器会显示一个斜体的字体样式 |
| pblique | 浏览器会显示一个倾斜的字体样式 |
| inherit | 规定应该从父元素继承字体样式 |
16.文本对齐缩进装饰行高
文本对齐用来控制文字水平方向的对齐。
不光能控制文本对齐，也能控制图片等元素居中或者靠右。
a
{
text-align: center;
}三个选项：
| 值 | 描述 |
| center | 居中对齐 |
| left | 左对齐 |
| right | 右对齐 |
缩进：
h2
{
text-indent: 20px;
}装饰：
h3
{
text-decoration: underline;
}总共四个选项：
| 值 | 描述 |
| underline | 下划线（常用） |
| none | 啥都没有 |
| overline | 上划线 |
| line-through | 删除线 |
行高：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.line-height .two
{
line-height:100px;
}
</style>
</head>
<body>
<div class="line-height">
<div class="two">
文本
</div>
</div>
</body>
</html>17.背景属性
设置背景颜色或者背景图片：
body
{
background-color: red;
}
div
{
background-image: url(https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650);
}这里的url不需要加引号。
背景不平铺：
background-repeat: no-repeat;其它选项：
| 值 | 描述 |
| repeat | 平铺 |
| no-repeat | 不平铺 |
| repeat-x | 水平平铺 |
| repeat-y | 垂直平铺 |
默认是repeat。
背景尺寸：
background-size:length|percentage|cover|contine;- 可以填具体的数值：如40px 60px表示宽度为40px，高度为60px
- 也可以填百分比，按照父元素的尺寸设置
- cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
- 把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内部区域
18.圆角矩形
border-radius：length；length是内切圆的半径，数值越大，弧线越强烈。
变成圆形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
width:200px;
height:200px;
border:2px green solid;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>等价于：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
width:200px;
height:200px;
border:2px green solid;
/* border-radius: 50%; */
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>19.元素显示
块级元素：单独占据一行，例如div；
行内元素：不单独占据一行，例如span。
a
{
display: block;
}
<a href="#">链接1</a>
<a href="#">链接2</a>将a转换为块级元素。
20.盒模型（border）
每一个html元素就相当于一个矩形的盒子。
每一个盒子有四个部分构成：
- 边框border
- 内容content
- 内边距padding
- 外边距margin
通过box-sizing属性可以修改浏览器的行为，使边框不再撑大盒子。
box-sizing:border-box;边框属性修改：
border-color：black;
border-style:solid;
border-width:10px;等价于：
border:black 10px solid;21.盒模型（padding）
四种编写方式，都很常见，都需要记住：
| 编写方式 | 描述 |
| padding:5px; | 表示四个方向都是5px |
| padding:5px 10px; | 表示上下内边距是5px，左右是10px |
| padding:5px 10px 20px; | 表示上是5px，左右是10px，下是20px |
| padding:5px 10px 20px 30px; | 表示上是5px，右是10px，下是20px，左是30px |
padding：5px;等价于：
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;22.盒模型（外边距）
控制盒子和盒子之间的距离。
写法同padding，将padding换成margin即可。
块级元素水平居中：
前提：
- 指定宽度（如果不指定宽度，默认和父元素一致）
- 把水平margin设为auto
以下三种写法均可
margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;23.弹性盒子
参考这篇文章：弹性盒子（flexbox）布局属性详解_弹性盒子的属性-CSDN博客
24.总结
以上就是CSS基础部分，后续我会继续向该篇文章中添加内容。