web前端：CSS的三种导入方式
马六甲海峡
2024-04-23 23:38
随着html的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是css便诞生了。
CSS的三种导入方式
内联样式表
<pstyle="font-size:50px;color:blue">css内联样式表</p>
内部样式表
<styletype="text/css">
p{
font-size:100px;
color:red;
}
</style>
<p>css内部样式表</p>
外部样式表
创建一个cssTest.css的css文件
p{
font-size:50px;
color:green;
}
span{
font-size:50px;
color:yellow;
}
使用外部样式表
<linkrel="stylesheet"type="text/css"href="../css/cssTest.css">
<p>优先级：内联样式表>内部样式表>外部样式表</p>
<span>外部样式表</span>
完整测试代码
<!--文件名cssTest.html-->
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>cssTest</title>
<styletype="text/css">
p{
font-size:50px;
color:red;
}
</style>
<linkrel="stylesheet"type="text/css"href="../css/cssTest.css">
</head>
<body>
<pstyle="font-size:50px;color:blue">css内联样式表</p>
<p>css内部样式表</p>
<p>优先级：内联样式表>内部样式表>外部样式表</p>
<span>外部样式表</span>
</body>
</html>
css文件
<!--文件名cssTest.css-->
p{
font-size:50px;
color:green;
}
span{
font-size:50px;
color:yellow;
}
css三种导入方式的优先级
内联样式表>内部样式表>外部样式表
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
![web前端：[前端第三课]HTML元素的简介与使用方法](https://static.528045.com/imgs/22.jpg?imageMogr2/format/webp/blur/1x0/quality/35)
