CSS与html的四种结合方式

最新推荐文章于 2021-06-19 02:10:04 发布

N_nanshan

最新推荐文章于 2021-06-19 02:10:04 发布

阅读量551

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/N_nanshan/article/details/109505902

版权

CSS与html的结合方式

方式一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Css学习</title>
	</head>
	<body>
		<div Style = "background-color: red ; color:green">hello Css</div>
	</body>
</html>

hello Css

在

标签中添加style属性如background-color：背景颜色 color：字体颜色

方法二
页面属性添加到标签中

如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS与html的结合方式二</title>
		<style type="text/css">
			<div>
			{
				background-color: crimson;
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div>郑州轻工业大学</div>
	</body>
</html>

方法三
在html文件的标签下添加CSS文件的路径
格式如下：

CSS与html的结合方式三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS与html的结合方式三</title>
		<style type = "text/css">
			@import url(div.css);
		</style>
	</head>
	<body>
		<div>
			郑州轻工业大学
		</div>
	</body>
</html>

CSS文件如下

div 
{
	background-color: yellow;
	color: red;
}

方法四
使用标签引入外部CSS样式表格式
格式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS与html结合的方法四</title>
		<link rel = "stylesheet" type = "text/css" href = "div.css">
	</head>
	<body>
		<div>郑州轻工业大学</div>
	</body>
</html>

其中最常用的结合方式是第四种，第三种方式针对一些老版本的浏览器不起作用。

CSS的优先级
由上到下，由外到内，优先级由低到高，后加载的优先级高
CSS的选择器
格式：选择器名称 {属性名：属性值；属性名：属性值…}

CSS基本选择器（三种）
1、标签选择器：使用标签名称作为选择器的名称
如div{
background-color ： “read”;
color : “blue”;
}
p
{
background-color ： “read”;
color : “blue”;
}
2、class选择器：每个html标签都有一个属性class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标签设置</title>
		<style type="text/css">
		div.haha{
			background-color: yellow;
			color: red;
		}
		p.haha{
			background-color: yellow;
			color: red;
		}
		</style>
	</head>
	<body>
		<div class="haha">文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会。
文字按字音和字形，可分为表形文字</div>
	
	<p class="haha">字是人类用表意符号记录表达信息以传之久远的方式和工具。现代</p>
	</body>
</html>

第二种写法
在

<style type = "text/css">
	.haha{
		background-color:yellow;
		color:black;
}
</style>

3、id选择器
每个html都有一个id 标签，调用id标签即可使用css样式
优先级排序：
基本选择器style > id选择器 > class优先级 > 标签选择器