CSS3笔记001 - 第01章 CSS简介

第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>
posted @ 2020-08-23 07:04  测试工匠麻辣烫  阅读(96)  评论(0)  编辑  收藏  举报