HTML不处理样式,应使用标签、外部CSS或内联style属性;等过时标签无效且报错;内联样式需正确书写CSS规则,类选择器更易维护;常见错误包括拼写、单位、继承及默认样式干扰。

HTML 本身不处理样式, 标签或外部 CSS 文件才是控制文本样式的正路;直接用 等过时标签不仅无效(现代浏览器默认禁用或忽略),还会被校验器报错。
内联样式怎么写才有效
用 style 属性写 CSS 规则,是最快上手的方式,适合单处微调。注意等号前后不能有空格,属性值必须加引号,颜色/单位等要写全。
-
color控制文字颜色:灰字
-
font-size设字号:小号字(推荐用rem或em更灵活) -
font-weight控制粗细:style="font-weight: bold"或style="font-weight: 600" -
text-decoration加下划线/删除线:style="text-decoration: underline"、style="text-decoration: line-through" -
line-height调行高:style="line-height: 1.6"(无单位更安全,避免继承问题)
CSS 类怎么定义和复用
把样式抽成 .class,比重复写 style 更可靠、易维护。必须放在 块里或外部 .css 文件中,且要确保 HTML 元素正确引用。
- 定义:
- 使用:
这是备注文字
- 多个类可空格分隔:
class="note small important",对应多个 CSS 规则 - 别漏写点号:
.warning是类选择器,warning(没点)会被当成标签名匹配
哪些文本样式属性最常出错
看似简单,但拼写、单位、继承逻辑一错就失效。尤其注意大小写敏感、冒号与分号位置、以及浏览器默认样式干扰。
立即学习“前端免费学习笔记(深入)”;
-
font-family中英文混排要备选:style="font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;"(引号不能少,逗号后空格可选但建议留) -
text-align只对块级元素生效:给写text-align: center没用,得配合display: block -
vertical-align不是“让文字上下居中”,它只对inline或table-cell元素起作用,且参考线不是父容器中间 -
letter-spacing和word-spacing容易混淆:前者调字母间距,后者调单词间距;负值可用但慎用,影响可读性
真正麻烦的从来不是写几行样式,而是搞清某条规则为什么没生效——查元素是否被更高优先级的 CSS 覆盖,看计算后的样式值(开发者工具里看 computed tab),再倒推是选择器没命中,还是属性被重置,或是 display/position 等布局属性间接影响了表现。










