css引入的三种方式

程序媛_MISS_zhang_01102023-11-24 15:30

一、内联样式

内联样式也被称为行内样式。它是将 CSS 样式直接应用于 HTML 元素的 style 属性中的一种方式

javascript 复制代码

<p style="color: blue; font-size: 16px;">这是一个带有内联样式的段落。</p>

内联样式（Inline Styles）：

定义：将 CSS 样式直接写在 HTML 元素的 style 属性中。

作用范围：仅适用于特定的元素。

优点：简单直接，能够针对具体的元素提供个性化的样式。

缺点：难以维护，当需要应用样式到多个元素时，代码变得冗长且重复。

javascript 复制代码

<link rel="stylesheet" href="./style.css">

定义：将 CSS 样式规则写入一个独立的 .css 文件中，并通过链接（）标签引入到 HTML 文档中。

作用范围：可在整个网站或文档中使用。

优点：易于维护，可以在多个页面共享样式，减少重复代码。

缺点：相对于内联样式，引入外部样式表需要额外的网络请求。

javascript 复制代码

<style>
        tr {
            mso-height-source: auto;
            mso-ruby-visibility: none;
        }
</style>

定义：在 HTML 文档内使用的 HTML 文档内。

优点：与外部样式表类似，能够在整个文档内使用，并可以与 HTML 结构紧密关联。

缺点：样式表与内容混合，当样式较多或需要在多个页面共享时，难以维护。

总结起来，内联样式适用于少量特定元素的个性化样式，外部样式表适用于整个网站或文档的样式定义和共享，而内部样式表则适用于样式与特定 HTML 文档紧密关联的情况。选择适当的方法取决于项目需求、代码维护性和性能要求。

具体想用哪个，自己看情况哈

一个表格，在我的电脑上显示样式没问题，在我同事的电脑上显示是有问题的，用的是style引入的样式，同事的电脑上没有正确引入，同样的代码，我这边是可以的，可能是浏览器的兼容问题吧，具体情况也不是很清楚，最后改成行内样式是解决了

结束啦~~~~~~~~~