引入层叠样式表的几种方法与浏览器浏览器私有前缀

引入层叠样式表的几种方法与浏览器浏览器私有前缀

CSS

1.行内式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内式</title>
	</head>
	<body>
		<p style="color: red;font-size: 44px;">哈尔滨理工大学</p>
	</body>
</html>

直接在标签的style属性中设置样式

2.内嵌式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
     
     
				color: green;
				font-size: 36px;
			}
		</style>
	</head>
	<body>
		<p>哈尔滨理工大学</p>
	</body>
</html>

​ 将CSS代码集中写在HTML文档中的head标签中,并且用style标签包起来,这里就需要用到选择器。

<style>
	选择器 {属性1:属性值1;属性2:属性值2;}
</style>

3.外链式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外链式</title>
		<link rel="stylesheet" type="text/css" href="css/外链式.css"/>
	</head>
	<body>
		<p>哈尔滨理工大学</p>
	</body>
</html>

外链式也叫链入式,将所有样式放在一个或者多个以.css为拓展名的外部样式表文件中,通过link标签将外部样式表文件链入到html文档中。

<link href="css文件的路径" type="text/css" rel="stylesheet"/>
<!--link标签需要放在head头部标签中,并且指定标签的三个属性-->
<!--
	href:定义所链接外部样式表的URL
	type:定义所链接文档的类型,text/css表示链接文件为CSS样式表
	rel:定义当前文档与被链接文档主键的关系,stylesheet表示被链接的文档式一个样式表文件
-->

私有前缀

​ 为了更好的兼容不同内核的浏览器,CSS3中部分属性需要添加浏览器的私有前缀,将某个样式以-xx-开头
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 400px;
				background: linear-gradient(left,red,green);
				background: -webkit-linear-gradient(left,red,green);
			}
		</style>
	</head>
	<body>
		<div>
		</div>
	</body>
</html>

目前简单了解,还待进一步学习

猜你喜欢

转载自blog.csdn.net/weixin_43909464/article/details/114390983
今日推荐