5.CSS引入方式

博主： agreatly
发布时间：2022 年 03 月 28 日
269 次浏览
暂无评论
1403字数
分类： H5C3 编程

1.内部样式表

(内嵌样式表)写在html内部，将所有的css代码抽出来单独放到一个<style>标签中

<style>
   div {
     color: red;
     font-size: 20px; 
   }
</style>

2.行内样式表

(内联样式表)是在元素标签内部的style属性中设定css样式，适合于修改简单的样式

<div style="color: red; font-size: 20px;"></div>

style是标签的数学
双引号中间写法要复合css规范
可以控制当前的标签设置样式
不推荐大量使用，对标签单独进行修改的时候可以考虑使用
通常也被称为行内式引用

3.外部样式表

实际开发中都是外部样式表，适用于样式即多的情况，核心是：样式单独写到css文件中，之后再把css文件引入到html页面中使用

新建一个.css的样式文件，把所有css代码写进去
在html页面中，使用<link>标签引入这个文件

<link rel="stylesheet" href="css文件路径">

属性	作用
rel	定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

4.css引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入，吐血推荐	最多	控制多个页面

最后修改：2022 年 03 月 28 日

© 允许规范转载

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

5.CSS引入方式

agreatly • 2022 年 03 月 28 日

<h2>1.内部样式表</h2><p><div class="tip inlineBlock info simple">

</p><p><strong>(内嵌样式表)写在html内部，将所有的css代码抽出来单独放到一个<code>&lt;style&gt;</code>标签中</strong></p><p>
</div></p><pre><code class="lang-html">&lt;style&gt;
   div {
     color: red;
     font-size: 20px; 
   }
&lt;/style&gt;</code></pre><h2>2.行内样式表</h2><p><div class="tip inlineBlock info simple">

</p><p><strong>(内联样式表)是在<code>元素标签内部的style属性中设定css样式</code>，适合于修改简单的样式</strong></p><p>
</div></p><pre><code class="lang-html">&lt;div style=&quot;color: red; font-size: 20px;&quot;&gt;&lt;/div&gt;</code></pre><ul><li><strong>style是标签的数学</strong></li><li><strong>双引号中间写法要复合css规范</strong></li><li><strong>可以控制当前的标签设置样式</strong></li><li><strong>不推荐大量使用，对标签单独进行修改的时候可以考虑使用</strong></li><li><strong>通常也被称为行内式引用</strong></li></ul><h2>3.外部样式表</h2><p><div class="tip inlineBlock info simple">

</p><p><strong>实际开发中都是外部样式表，适用于样式即多的情况，核心是：样式单独写到css文件中，之后再把css文件引入到html页面中使用</strong></p><p>
</div></p><ol><li><strong>新建一个.css的样式文件，把所有css代码写进去</strong></li><li><strong>在html页面中，使用<code>&lt;link&gt;</code>标签引入这个文件</strong></li></ol><pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;css文件路径&quot;&gt;</code></pre><table><thead><tr><th>属性</th><th>作用</th></tr></thead><tbody><tr><td>rel</td><td>定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件</td></tr><tr><td>href</td><td>定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径</td></tr></tbody></table><h2>4.css引入方式总结</h2><table><thead><tr><th>样式表</th><th>优点</th><th>缺点</th><th>使用情况</th><th>控制范围</th></tr></thead><tbody><tr><td>行内样式表</td><td>书写方便，权重高</td><td>结构样式混写</td><td>较少</td><td>控制一个标签</td></tr><tr><td>内部样式表</td><td>部分结构和样式相分离</td><td>没有彻底分离</td><td>较多</td><td>控制一个页面</td></tr><tr><td>外部样式表</td><td>完全实现结构和样式相分离</td><td>需要引入，吐血推荐</td><td>最多</td><td>控制多个页面</td></tr></tbody></table>