探索网页前端设计：CSS引入方法解析

发表时间: 2023-10-27 22:16

想要在一个页面引入CSS，共有以下3种方式

1、外部样式表

2、内部样式表

3、行内样式表

一、外部样式表

外部样式表是最理想的CSS引入方式，指的是CSS代码和HTML代码都单独放在不同文件种，然后在HTML文档中使用link标签引用CSS样式表

语法：

rel表示引入的是一样样式文件（即CSS文件）

type属性取值也是固定的，即"text/css"，表示这是标准的CSS

href属性表示CSS文件的路径，

举例：

	<head>		<meta charset="UTF-8">		<title>09input</title>				<link rel="stylesheet" type="text/css" href="css/index.css" />	</head>

注：如果使用外部样式表，必须使用link标签来引入，而link标签是放在head标签内的

二、内部样式表

内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，并且style标签是放在head标签内部的。

语法：

<style type="text/css">    ……</style>

type="text/css"是必须添加的，表示这是标准的CSS。

举例

<!DOCTYPE html><html>		<head>		<meta charset="UTF-8">		<title>09input</title>			 <style type="text/css">	 	 div{color:red;}	 </style>	</head> 	<body><div>你好啊</div><div>这个字变颜色了哦</div>	</body></html>

注：如果你使用内部样式表，CSS样式必须在style标签内定义，而style标签是放在head标签内的。

三、行内样式表

行内样式表跟内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。

举例：

<!DOCTYPE html><html>		<head>		<meta charset="UTF-8">		<title>09input</title>				</head> 	<body><div style="color: red;">你好啊</div><div style="color: red;">这个字变颜色了哦</div>	</body></html>

探索网页前端设计：CSS引入方法解析

热门阅读

推荐阅读