行内样式，内联样式，外联样式，导入样式

0*..

已于 2022-10-23 15:02:57 修改

阅读量256

点赞数

分类专栏：笔记文章标签： html css

于 2020-10-17 00:54:13 首次发布

本文链接：https://blog.csdn.net/weixin_46714278/article/details/109127655

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

人机交互
行内样式，内联样式，外联样式，导入样式
复习

行内样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>

<body>
	<h1>行内样式</h1>
	<p>顾名思义是在HTML标签内的样式控制命令</p>
	<p style=" color:red">在P标签里加入“style="样式属性：取值"”</p>
</body>
</html>

内联样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内联样式</title>
	<style type="text/css">
		p{
			color:aqua
		}
		p1{	
			color: antiquewhite
		}
		h1{
			color: #B14F51
		}
	</style>
</head>

<body>
	<h1>内联样式</h1>
	<P>css自主复习，内联样式，将样式设置直接写在HTML中</P>
	<p>讨论嵌入样式是否控制多个P标签</p>
	<P>结果一幕了然</P>
	<p1>在p标签加上下标会如何呢</p1><br/>
	<p1>发现在head标签中的style标签不能控制</p1><br/>
	<p1>如果在style中加入P1的控制代码呢</p1><br/>
	<p1>结果和预期的一样</p1>
</body>
</html>

CSS代码

@charset "utf-8";
/* CSS Document */
p{
	color:pink;
}
p1{
	color:red;
}

外联样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外联样式</title>
	<link rel="stylesheet" href="css1.css">
	*外联样式表，引入CSS的代码*
</head>

<body>
	<p>尝试一下，是否是在css中输入限制后，HTML输入样式表引入代码，以此来控制P标签</p>
	<p>引入代码后，CSS是可以控制NTML的P标签的</p>
	<p>我们再尝试一下加入，P1标签，是否和内联样式一样，也可以控制</p>
	<p1>输入内容发现，P1标签的色彩改变了</p1><br/>
	<p1>我们也实现了结构与样式的分离</p1>
</body>
</html>

导入样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导入样式</title>
	<style type="text/css">
		@import url("css1.css");*分号不可省*
	</style>
</head>

<body>
	<p>在@import url(外部样式表文件)，输入的文件我并不清楚，只有尝试加入CSS文件，查看效果</p>
	<p>运行发现后，插入的CSS样式表文件是可以运行的，猜想没有错</p>
	<p1>试一下用P1标签是否有一样的结果，</p1><br/>
	<p1>一目了然</p1>
	<p1>查找资料发现CSS文件就是外部样式表，不知道是否还有其他的外部样式表文件，有待考察，后续更新</p1>
</body>
</html>