CSS:层叠样式表，Cascading Style Sheets 层叠样式表
内容和样式分离解耦，便于修改样式。
特殊说明：
- 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号
- 为了使用样式更加容易阅读，可以将每条代码写在一个新行内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS概述</title>
<!--外链的css可以可以影响多个html影响多个页面起作用，作用域大优先级低-->
<link rel="stylesheet" href="css/style.css">
<!-- style就是css样式的设置,这是内嵌样式，对当前页面的html的结构发生变化-->
<style>
p {
font-size: 24px;
color: cornflowerblue;
font-weight: bolder;
}
</style>
</head>
<body>
<!--行内css标签优先级 > 内嵌css样式 > 外链css样式 -->
<p style="color: darkgreen">天使投资早期投资，尤其指的是个人早期投资</p>
<p>VC:VC是一种将资本投入高成长型企业的私募股权基金。VC往往在创业公司的早期阶段进行投资，同时提供战略和管理方面的支持</p>
<p>PE:PE是指利用私募基金投资于不公开交易的公司或不上市公司的股权</p>
</body>
</html>
外链代码
p {
font-size: 24px;
color: red;
font-weight: bolder;
}
执行结果
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
body{
background-color: white;
text-align: center;
font-size: 12px;
}
p{
font-family: Arial;
font-size: 18px;
}
h1{
font-family: '宋体';
font-size: 30px;
}
hr{
width: 100px;
}
</style>
</head>
<body>
<h1>标题</h1>
<hr/>
<p>正文的段落</p>
版权所有
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
</head>
<!--类选择器和其他标签不一样的是，需要用.开头表示一个类-->
<style>
.one {
font-size: 18px;
color: darkred;
}
.two {
font-size: 28px;
color: aquamarine;
}
</style>
<body>
<p class="one">类别1</p>
<p class="one">类别2</p>
<p class="two">类别3</p>
<p class="two">类别4</p>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 使用id选择器的原因是为了保证唯一性，它的特点是id不重复，style用#开头-->
<title>id选择器</title>
<style>
#one {
font-size: 26px;
color: darkgreen;
}
#two {
font-size: 18px;
color: darkred;
}
</style>
</head>
<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>
</html>
执行结果
