引入层叠样式表的几种方法与浏览器浏览器私有前缀
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>
目前简单了解,还待进一步学习