共计 849 个字符,预计需要花费 3 分钟才能阅读完成。
后面一节咱们讲了行内款式,然而行内款式的毛病就是款式不能重用。例如当有好多个 <p>
标签,咱们心愿所有的 <p>
标签的款式都统一,那么须要在每个标签中都写一遍,这么会很麻烦,也会减少很多代码。
那么为了解决这个问题,本节咱们学一下内嵌款式,也能够叫做外部款式。
什么是内嵌款式
内嵌款式就是将 CSS 代码写在 HTML 页面中的 <head>
标签中的 <style>
标签内。因为它与 HTML 内容位于同一个文件中,所以叫做内嵌样式表。
示例:
例如上面这个例子就是应用了内嵌款式:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS 学习 (9xkd.com)</title>
<style>
h2{color: lightsalmon;}
p{
color:limegreen ;
font-size: 18px;
line-height: 20px;
}
span{
color: mediumpurple;
font-weight: bold;
}
</style>
</head>
<body>
<h2>《木兰花令 拟古决绝词》</h2>
<p> 人生若只如初见,何事秋风悲画扇 </p>
<p> 等闲变却故人心,却道故人心易变。</p>
<p> 骊山语罢清宵半,泪雨零铃终不怨。</p>
<p> 何如薄幸锦衣郎,<span> 比翼连枝当日愿。</span></p>
</body>
</html>
在浏览器中的演示成果:
记得内嵌款式必须写在 <style>
标签中,否则有效。
总结
应用内嵌款式来书写 CSS 款式,相较于行内款式来说,显著要更加不便,代码量也更少。
然而内嵌款式也有一个毛病,就是它仅在同一个页面中才不便,对于多页面开发来说,任然不利于页面间共享复用代码以及保护,对内容与款式的拆散也不够彻底。所以内嵌款式比拟适宜那些单页面信息具备独特格调的页面,不须要多个页面共享。
在理论开发中,咱们不可能只写一个页面,所以内嵌款式不满足咱们的需要,通常咱们都会抉择应用内部款式,下一节会讲到。
链接:https://www.9xkd.com/
正文完