CSS样式代码决定了网页最终的视觉呈现，无论页面结构写得多规范，样式代码组织得不好，后期维护都会变得非常痛苦。要真正用好HTML样式代码，既要掌握它在文档中的三种引入方式，也要理解新版CSS规范带来的写法变化。本文从基础用法讲起，逐步过渡到新版CSS特性对样式代码的影响，帮助你建立完整的样式编写思路。
一、CSS样式代码的三种引入方式及适用场景
第一种是行内样式，直接写在HTML标签的style属性中，例如<p style="color: red;">。这种方式的优先级最高，但完全违背了结构与表现分离的原则，样式无法复用，除非是临时调试或者邮件模板这种特殊场景，否则不推荐使用。行内样式的另一个问题是无法使用伪类、伪元素和媒体查询，功能上受到很大限制。
第二种是内部样式表，把样式代码写在HTML文档head部分的<style>标签中。这种方式适合单页面小项目或者需要做局部演示的场合，浏览器只需一次请求就能拿到全部样式，首屏渲染速度有一定优势。但当页面增多之后，每个页面都要重复一份样式代码，维护成本会成倍增长。
第三种是外部样式表，也是实际项目中最推荐的方式。样式单独保存为.css文件，通过<link>标签引入：
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="css/main.css">
</head>外部样式表的好处是浏览器可以缓存文件，多个页面共享同一份样式，结构与表现彻底分离。值得注意的是，如果同一个元素同时被多种方式作用，行内样式优先级最高，其次是内部和外部样式表，具体取决于选择器的权重和书写顺序。
二、选择器优先级与盒模型：样式代码绕不开的两个基础
写样式代码之前必须理解优先级规则。浏览器计算选择器权重的方式是：行内样式记为1000，id选择器记为100，类选择器、属性选择器和伪类记为10，元素选择器和伪元素记为1。当多个规则冲突时，权重高者生效；权重相同时，写在后面的规则覆盖前面的。!important可以强行提升优先级，但滥用会导致样式体系混乱，一般只在覆盖第三方库样式时才考虑使用。
/* 权重：10 */
.box {
padding: 10px;
}
/* 权重：20，覆盖上面的规则 */
.box.highlight {
padding: 20px;
}
/* 权重：101，覆盖前两者 */
#main .box {
padding: 30px;
}盒模型是另一个容易踩坑的地方。默认情况下，width只包含内容区域，padding和border会向外撑开元素的实际占位，导致计算尺寸时经常出错。新版CSS普及之后，几乎所有的项目脚手架都会加上box-sizing: border-box，让width直接等于内容加padding加border，尺寸计算直观了很多。理解这两个基础概念，后面学习新版CSS特性会顺畅很多。
三、新版CSS特性对样式代码写法的影响
影响最深远的是布局方式的变革。早期依赖float和position做布局，需要清除浮动、计算负边距，代码冗长且脆弱。Flexbox和Grid出现之后，居中、等分、自适应这些需求都可以用几行声明式代码完成。比如经典的垂直水平居中，旧写法要配合绝对定位和负边距，现在只需要：
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}其次是自定义属性（CSS变量）的普及。过去想统一修改主题色，只能借助预处理器的变量功能；现在原生CSS就支持定义变量，还能配合JavaScript动态修改，暗色模式切换因此变得非常简单：
:root {
--main-color: #1677ff;
--bg-color: #ffffff;
}
[data-theme="dark"] {
--main-color: #4096ff;
--bg-color: #141414;
}
body {
background-color: var(--bg-color);
color: var(--main-color);
}另外，逻辑属性让样式代码天然支持多语言排版。margin-left在阿拉伯语等从右向左排版的页面中语义会反转，而margin-inline-start会根据文档方向自动适应，国际化项目使用逻辑属性可以省去大量方向判断代码。容器查询（Container Queries）则让组件可以根据父容器尺寸响应，而不是只能依赖视口宽度，组件化开发中的样式封装能力大大增强。
四、组织样式代码的实践建议
新版CSS提供了嵌套语法，可以在选择器内部直接写子选择器规则，写法接近Sass，减少了类名的重复书写。不过嵌套层级建议控制在三层以内，层级过深会让优先级计算复杂化，也会降低样式的复用性。命名上推荐采用BEM或者功能类的方式，让类名本身表达用途，避免出现box1、div2这类无意义的命名。
最后要注意浏览器兼容性。Grid、Flexbox、CSS变量在主流浏览器中支持已经很好，可以放心使用；而容器查询、:has选择器等较新特性，建议查询Can I Use的兼容数据后再决定是否采用，必要的时候通过@supports做特性检测，为旧浏览器提供降级方案。样式代码写得清晰规范，项目才能在长期迭代中保持可维护性，这也是学习新版CSS的真正价值所在。