第01章 CSS简介
CSS简介
CSS：Cascading Style Sheet 层叠样式表
CSS的出现就是为了改变色彩单调的网页外观
CSS引入方式
在一个页面中引入CSS有三种方式：外部样式表|内部样式表|行内样式表
外部样式表
# 使用外部样式表必须使用link标签来引入，而link标签是放在head标签内的
<link rel="stylesheet" type="text/css" href="文件路径" />
rel的取值是固定的，表示引入的是一个样式表文件(CSS文件)
type属性取值是固定的，表示这是标准的CSS
href属性表示CSS文件的路径
如何使用外部样式表？
先定义index.css文件，再定义index.html文件，在index.html文件中通过link标签引用index.css文件；
# index.css
p{
color: red;
}
# index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<p>
姓名：<input type="text" />
</p>
<p>
密码：<input type="password" />
</p>
<div>
姓名
<input type="submit" />
<input type="reset" />
</div>
</body>
</html>
内部样式表
内部样式表指的把HTML代码和CSS代码放在同一个HTML文件中。其中，CSS代码放在sytle标签内，并且style标签是放在head标签内部的。
# 通过style标签来设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<style type="text/css">
p{color: red;}
</style>
<!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
</head>
<body>
<p>
姓名：<input type="text" />
</p>
<p>
密码：<input type="password" />
</p>
</body>
</html>
行内样式表
内部样式表的CSS是在"style标签"内定义的，而行内样式表的CSS是在标签的style属性中定义的。
# 通过p标签的style属性设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<p style="color: red;">
姓名：<input type="text" />
</p>
<p style="color: green;">
密码：<input type="password" />
</p>
</body>
</html>