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

最新推荐文章于 2024-04-06 17:06:12 发布

BroveTONGG

最新推荐文章于 2024-04-06 17:06:12 发布

阅读量193

点赞数

分类专栏：响应式web开发

本文链接：https://blog.csdn.net/weixin_43909464/article/details/114390983

版权

响应式web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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>

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

BroveTONGG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
引入层叠样式表的几种方法与浏览器浏览器私有前缀

引入层叠样式表的几种方法与浏览器浏览器私有前缀CSS1.行内式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>行内式</title> </head> <body> <p style="color: red;font-size: 44px;">哈尔滨理工大学</p> </body>
复制链接

扫一扫

专栏目录