持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情
CSS基础教程1——CSS简介
在学习CSS之前，至少需要对HTML或者XHTML有所了解！！！
什么是CSS
CSS(层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言，通过使用 CSS 我们可以大大提升网页开发的工作效率！
CSS实例
CSS由两个主要的部分构成：选择器(选择器通常是您需要改变样式的HTML元素，也可以是自定义的类选择器或者id选择器等等)，以及一条或多条声明(每条声明由一个属性和一个属性值组成，属性是我们需要修改样式的属性，每个属性有一个值，属性与值之前用 : 隔开每条声明之间用 ; 隔开)，例如：p{color:red;text-align:center;}。
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
为了让CSS代码更具有美观，建议每一条声明独占一行。
p{
color:red;
text-align:center;
}
CSS注释
注释是用来解释你的代码(防止自己后续维护时更高效的读懂代码，也可以让其他开发者更快明白自己代码的作用)，并且可以随意编辑它，浏览器会忽略它，CSS注释以 /* 开始, 以 */ 结束。
/*这是一个注释，不会在浏览器中显示*/
p{
color:red;
text-align:center;
}
实现CSS方式
CSS引入方式有三种，内嵌式、外联式、行内式。
内嵌式
内嵌式CSS用<style>标签实现，一般写在HTML文件的<head>标签中(基本用于小案例)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS内联式</title>
<style type="text/css">
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
外联式
外联式CSS代码写在.css文件中，通过在HTML文件的<head>标签中用<link rel="stylesheet" type="text/css" href="CSS文件的相对路径">引入(一般用于大的案例或者项目)，CSS文件推荐存放在项目文件中的CSS文件夹。
假设index.css文件存放于css文件夹中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS外联式</title>
<link rel="stylesheet" type="text/css" href="./css/index.css"/>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
行内式
行内式写在HTML文件中需要修改样式的标签中用style="一条声明或者多条声明"(一般配合js使用)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS行内式</title>
</head>
<body>
<p style="color: red; font-size: 20px;">这是一个段落</p>
</body>
</html>
