CSS基础——css样式的四种方式

css样式有四种，行内样式、内部样式、外部样式、导入样式。

行内样式>内部样式>外部样式>导入样式
内部样式>外部样式的前提：内部样式要在外部样式后面

行内样式：<h1 style="color:orange;">哈哈</h1>
内部样式：
        <style>
            div{
                color: lawngreen;   
            }
        </style>
外部样式：<link rel="stylesheet" href="css/css01.css" />
导入样式：
        <style>
            @import url("css/css01.css");
        </style>

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/css01.css" />
		<style>
			@import url("css/css01.css");
		</style>
	</head>
	<body>
		<p>呵呵</p>
		<h1 style="color: lawngreen;
				background-color: orange;">哈哈</h1>
		<div style="color: blue;
				background-color: red;">哎呀</div>
	</body>
</html>

 css/css01.css的代码如下：

p{
	font-size: 30px;
	color: blue;
	font-family: "微软雅黑";
}
h1{
	font-size: 40px;
	color: yellow;
	font-family: "微软雅黑";
	background-color: #0000FF;
}

效果如图所示：

 

posted on 2020-04-21 16:22  难留  阅读(815)  评论(0)  编辑  收藏  举报

导航