前言
本文是笔者初接触CSS时的学习记录，由于之前并未学习过前端的相关知识，如存在错误请各位指出。
正文
CSS简介
CSS是层叠样式表( Cascading Style Sheets ) 的简称，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS 主要用于设置HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化HTML , 让HTML 更漂亮，让页面布局更简单。
CSS语法基础
一.CSS的引入（如何创建CSS？）
- 内部样式表：直接写在HTML文件的结构中。用
<style>和</style>标签包裹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入内部样式表-->
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>外部样式</p>
</body>
</html>
- 外部样式表：单独写在一个CSS文件中，在HTML文件中引入该CSS文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部样式表-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>外部样式</p>
</body>
</html>
- 内联样式（行内式）： 在html标签中直接使用CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--引入内联样式-->
<p style="color: red;text-align: center">外部样式</p>
</body>
</html>
对于三种引入CSS的优先级：如果三种引入方式的属性发生冲突，则按以下规则判定优先级：
- 内联式和外联式冲突，内联式位于外联式上方。 ————由外联式决定
- 内联式和外联式冲突，外联式位于内联式上方。 ————由内联式决定
- 三种方式并存且冲突。 ————由行内式决定
简单理解：就近原则。
二.CSS选择器
选择器语法： 字符 + 选择器名 + 花括号（具体的属性值）
以下为一个使用类选择器的例子：
.red {
color:red;
}
在html标签中只需使用class="red"即可使用该选择器。
三.CSS三大特性
1. 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。
2. 继承性
在CSS中，子标签会继承父标签的某些属性。大部分具有继承特性的属性和文本相关，还有少部分列表和表格的属性。合理运用继承可以大幅度简化代码。
3. 优先级
在CSS中，当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性。选择器不同，则根据选择器权重执行。等级判断从左向右，如果某一位数值相同，则判断下一位数值。如果是复合选择器，则会有权重叠加，需要计算权重。
