HTML和CSS基础
CSS（Cascading Style Sheets）层叠样式表
是一种用于描述网页内容视觉表现的样式表语言。它通过定义 规则（Rules） 控制 HTML 或 XML 文档的布局、颜色、字体、动画等外观特性，实现内容与样式的分离。
CSS添加到HTML的基本方式
1.内联（lnline）：在HTML元素中使用样式属性
<!-- lnline(内联)css样式应用到一个元素上 -->
<h1 style="color: red;">红色标题</h1>
<p style="color: brown;">棕色的段落</p>
2.内部（lnternal）：在<head>部分使用<style>元素，用于定义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>
/* lnternal(内部)CSS */
body{background-color: blue;}
h1{color: rgb(81, 203, 0);}
p{color: brown;}
#p01{color:yellow}
p.error{color: aqua;}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落内容</p>
</body>
</html>
3.外部（External）：使用外部CSS文件，可以用来定义多个HTML页面风格
使用外部样式表，是在HTML页面的<head>部分添加一个css链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="t01.css">
</head>
<body>
<h1>标题</h1>
<p>段落内容</p>
</body>
</html>
外部样式表可以使用任何文本编辑器编写。文件不能包含任何HTML代码，必须保存为一个以 .css 为扩展名的文件。样式如下：
body{
background-color: blanchedalmond;
}
h1{
color: blue;
}
p{
color: red;
}
CSS基本属性
CSS属性 color 定义颜色，font-family 定义字体，font-size 定义文本大小
<!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>
h1{
color: aqua;
font-family: verdana;
font-size: 300%;
}
p{
color: violet;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落内容</p>
</body>
</html>
CSS边框 属性定义一个HTML元素的边框
p{
border: 1px;
/* 边框 */
}
CSS内边距（Padding） 属性定义文本和边框之间的填充（空格）
p{
border: 1px;
padding: 30px;
/* 内边距 */
}
CSS外边距(Margin) 定义边界外的边距
p{
border: 1px solid powderblue;
margin: 50px;
/* 外边距 */
}
id属性
为特定元素定义特定样式，可以为该元素添加特定id，然后为特定id元素定义样式
<!-- id属性，为特定元素添加特定样式 -->
<p id="p01">段落段落</p>
<style>
#p01{color:yellow}
</style>
class 属性，为特殊类型的元素定义样式，可以向元素添加类属性
<!-- 为特殊类型的元素定义样式，请向元素添加类属性 -->
<p class="error">class属性...</p>
然后为特定类定义元素的样式
<style>
p.error{color: aqua;}
</style>
外部样式引用
外部样式表可以引用完整的URL或与当前网页相对应的路径
<link rel="stylesheet" href="填入对应的网页路径">