上一篇
HTML样式可通过内联style属性、内部标签或外部.css文件定义，内联直接应用于元素，内部适用于当前页，外部便于多页共享，推荐使用外部样式表实现结构与样式分离，提高维护性。
样式的基本应用方式
-
内联样式（Inline Styles）
直接在HTML元素的style属性中添加CSS规则，适用于单个元素的简单样式调整。<p style="color: blue; font-size: 16px;">这是一段蓝色的文字。</p>
优点：快速生效，优先级高。
缺点：难以维护,重复代码多。 -
内部样式表（Internal Stylesheet）
在HTML文件内使用<style>标签定义样式规则，推荐用于单个页面的样式管理。<head> <style> p { color: red; margin: 10px; } .highlight { background-color: yellow; } </style> </head>优点：集中管理页面样式，减少代码重复。
缺点：多页面需重复编写。
-
外部样式表（External Stylesheet）
将CSS代码写入独立的.css文件，通过<link>标签引入，适合多页面复用。<head> <link rel="stylesheet" href="styles.css"> </head>
优点：代码复用性高，便于维护和SEO优化。
缺点：需额外HTTP请求。
常用CSS选择器
- 元素选择器
按标签名匹配元素：p { ... } - 类选择器
按class属性匹配：.class-name { ... } - ID选择器
按id属性匹配：#element-id { ... } - 后代选择器
层级匹配：div p { ... } - 伪类选择器
响应交互状态：a:hover { ... }
/* 示例：类选择器与伪类结合 */
.button {
padding: 10px 20px;
border-radius: 5px;
}
.button:hover {
background-color: #f0f0f0;
}
样式布局的核心技巧
-
盒模型（Box Model）
每个元素由content、padding、border、margin组成，可通过box-sizing控制计算方式：
* { box-sizing: border-box; /* 宽度包含padding和border */ } -
Flexbox布局
实现弹性容器内的对齐与分布：.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } -
Grid布局
二维网格布局,适合复杂排版：.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 三等分列 */ gap: 20px; /* 间隔 */ }
响应式设计与媒体查询
通过@media规则适配不同设备屏幕,示例如下：
/* 默认样式（PC端） */
.container {
width: 1200px;
}
/* 平板设备（屏幕宽度≤768px） */
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}
/* 手机设备（屏幕宽度≤480px） */
@media (max-width: 480px) {
.menu {
display: none;
}
}
样式优化建议
- 语义化HTML
使用<header>、<nav>、<article>等语义标签,提升可访问性和SEO效果。 - CSS命名规范
采用BEM（Block-Element-Modifier）等命名规则，.card__title--large。 - 性能优化
- 避免过多嵌套选择器
- 使用CSS预处理器（如Sass）管理代码
- 压缩CSS文件（如通过Webpack、Gulp）
注意事项
- 避免过度内联样式：不利于维护和SEO。
- 浏览器兼容性：部分CSS属性需添加前缀（如
-webkit-、-moz-）。 - 样式优先级：
!important慎用,可能导致代码混乱。
通过合理应用上述方法，可以高效地为HTML元素添加样式，同时确保代码的可维护性和网页性能，建议优先使用外部样式表，结合现代布局技术（如Flexbox/Grid），并在发布前通过W3C CSS验证工具检查语法错误。
引用来源：
- MDN Web Docs – CSS入门
- W3C标准 – CSS语法规范
