关于前端:CSS-内嵌样式

7次阅读

共计 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/

正文完