这是一个使用内部样式表设置样式的段落。

• 优点： 适用于单个页面样式较少，或者仅为某个页面定制样式的情况。所有的样式都在同一个HTML文件中，便于快速查看和修改。对于一些简单的演示或小型项目，这倒也挺方便。
• 缺点： 样式不能在多个页面之间复用。如果网站有多个页面，每个页面都需要维护一份独立的样式，这会造成代码冗余和维护困难。而且，它仍然将样式信息混入HTML文件，虽然比内联样式好一些，但依然没有完全实现结构与表现的分离。

2. 外部样式表（External CSS）

这是目前最推荐、也是最主流的CSS引入方式。你将所有的CSS代码写在一个独立的.css文件中，然后在HTML文件的标签内通过标签引用这个外部文件。

styles.css文件内容：

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}
h1 {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 25px;
}
p {
    line-height: 1.8;
    color: #34495e;
    text-indent: 2em;
}
.highlight {
    background-color: #ecf0f1;
    padding: 5px;
    border-radius: 3px;
}

index.html文件内容：

    
    
    


    
外部样式表的优势
    
这是一个使用外部样式表设置样式的段落。这种方式将CSS代码与HTML结构完全分离。
    
你可以通过修改一个CSS文件，来改变整个网站的外观，非常高效。

• 优点：
  • 职责分离： HTML负责结构，CSS负责样式，代码清晰，易于理解和维护。
  • 高度复用： 同一个CSS文件可以被多个HTML页面引用，实现样式的统一管理和复用。
  • 缓存优化： 浏览器会缓存外部CSS文件。当用户访问网站的不同页面时，如果CSS文件没有变化，浏览器会直接从缓存中读取，减少了网络请求，提高了加载速度。
  • 团队协作： 不同的开发者可以专注于HTML或CSS，互不干扰。
• 缺点： 首次加载时，浏览器需要额外发送一个HTTP请求来获取CSS文件。不过，现代浏览器和优化技术（如HTTP/2、CDN）已经大大缓解了这个问题。

大多数时候，外部样式表是我的首选，它让项目结构清晰得像一份整洁的文档，查找问题也方便。

CSS样式优先级是如何计算的？内联样式处于什么地位？

CSS的样式优先级，也就是我们常说的“特异性”（Specificity），是浏览器用来决定当多个CSS规则作用于同一个元素时，哪条规则最终生效的机制。理解这个机制非常关键，否则你可能会觉得有些样式“不听话”。

优先级通常通过一个四位数的权重值来计算：A-B-C-D。

• A（行内样式）: 如果样式是作为HTML元素的style属性存在的，则A位为1，否则为0。
• B（ID选择器）: 样式规则中包含的ID选择器（#id）的数量。
• C（类选择器、属性选择器、伪类）: 样式规则中包含的类选择器（.class）、属性选择器（[attribute]）和伪类（:hover、:focus等）的数量。
• D（元素选择器、伪元素）: 样式规则中包含的元素选择器（p、div等）和伪元素（::before、::after等）的数量。

计算规则：

1. !important声明： 这是最高优先级，可以覆盖任何其他规则，包括内联样式。但它应该被视为“核武器”，慎用，因为它会打破正常的优先级流，让调试变得异常困难。例如：color: red !important;
2. 内联样式： 优先级权重为 1-0-0-0。它比任何ID选择器、类选择器或元素选择器都高。这意味着，如果你在HTML元素上直接写了style="color: blue;"，那么即使你的外部CSS文件里有#myElement { color: red; }，蓝色也会生效。
3. ID选择器： 优先级权重为 0-1-0-0。例如：#header { color: green; }
4. 类选择器、属性选择器、伪类： 优先级权重为 0-0-1-0。例如：.button { color: purple; } 或 [type="text"] { border: 1px solid gray; } 或 :hover { background-color: lightblue; }
5. 元素选择器、伪元素： 优先级权重为 0-0-0-1。例如：p { font-size: 16px; } 或 ::before { content: "Prefix "; }
6. 通配符、组合器、否定伪类： 通配符（*）、组合器（+、>、~）本身不增加特异性。否定伪类（:not()）的特异性由其括号内的选择器决定。
7. 继承： 某些属性（如color、font-size）可以从父元素继承。继承的样式优先级最低。

比较优先级： 浏览器会从左到右比较这些权重值。哪个权重值在最左侧的非零位更大，哪个规则的优先级就更高。

• 1-0-0-0 (内联样式) 总是高于 0-1-0-0 (ID选择器)。
• 0-1-0-0 (ID选择器) 总是高于 0-0-1-0 (类选择器)。
• 0-0-1-0 (类选择器) 总是高于 0-0-0-1 (元素选择器)。

当优先级相同时： 如果两条规则的特异性完全相同，那么在样式表中后出现的规则会覆盖先出现的规则。这就是所谓的“就近原则”。

内联样式的地位： 从上面的权重计算可以看出，内联样式拥有非常高的优先级，仅次于!important声明。这意味着它非常强大，可以轻易地覆盖通过外部或内部样式表定义的规则。我曾经遇到过一个样式怎么也改不掉，最后才发现是被一个不起眼的内联样式给“锁死”了，那感觉就像侦探破案，得一层层剥开。所以，在使用内联样式时，一定要清楚它的这种“霸道”特性，避免不必要的样式冲突和调试困扰。

本篇关于《HTML内联样式怎么用？简单又直接》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！