HTML5 样式与 CSS 学习笔记HTML5 负责结构骨架CSS (Cascading Style Sheets) 负责表现皮肤。两者分离是现代 Web 开发的核心原则。1. CSS 的三种引入方式在 HTML5 中CSS 可以通过以下三种方式引入推荐优先使用外部样式表。1.1 外部样式表 (External Style Sheet) -推荐将 CSS 代码写在独立的.css文件中通过link标签引入。优点代码复用、易于维护、浏览器可缓存 CSS 文件提升加载速度、结构与表现完全分离。位置必须放在head标签内。headlinkrelstylesheethrefstyles/main.css!-- 针对特定设备加载 --linkrelstylesheethrefmobile.cssmediascreen and (max-width: 600px)/head1.2 内部样式表 (Internal Style Sheet)将 CSS 代码写在style标签中直接嵌入 HTML 文件。优点单文件管理适合小型页面或邮件模板。缺点无法缓存代码耦合不利于大型项目维护。位置必须放在head标签内。headstylebody{background-color:#f4f4f4;font-family:Arial,sans-serif;}h1{color:#333;}/style/head1.3 行内样式 (Inline Style) -不推荐直接在 HTML 标签的style属性中编写 CSS。优点优先级最高用于快速测试或动态生成样式。缺点严重耦合难以维护无法复用违反“关注点分离”原则。pstylecolor:red;font-size:16px;这是一个红色文字段落。/p2. CSS 选择器 (Selectors)选择器决定了样式应用于哪些 HTML 元素。2.1 基础选择器选择器语法示例说明标签选择器elementp { color: blue; }选中所有p标签类选择器.classname.btn { padding: 10px; }选中所有classbtn的元素 (最常用)ID 选择器#idname#header { height: 60px; }选中idheader的元素 (页面唯一)通配符** { margin: 0; padding: 0; }选中所有元素 (常用于重置样式)2.2 组合选择器选择器语法示例说明后代选择器A Bdiv p { color: red; }选中div内部所有的p(不限层级)子元素选择器A Bul li { list-style: none; }选中ul的直接子元素li相邻兄弟A Bh1 p { margin-top: 0; }选中紧跟在h1后面的第一个p通用兄弟A ~ Bh1 ~ p { color: gray; }选中h1后面的所有同级p2.3 伪类与伪元素 (Pseudo-classes Elements)伪类(:)定义元素的特定状态。:hover鼠标悬停时。:active元素被激活点击时。:focus元素获得焦点时。:nth-child(n)选中第 n 个子元素。:first-child/:last-child选中第一个/最后一个子元素。:not(selector)排除特定选择器。伪元素(::)创建不在 DOM 树中的虚拟元素。::before/::after在元素内容前后插入内容需配合content属性。::first-line/::first-letter选中首行或首字母。::placeholder选中输入框的占位符文本。/* 悬停效果 */a:hover{color:orange;text-decoration:none;}/* 插入内容 */h2::before{content:★ ;color:gold;}/* 清除浮动常用技巧 */.clearfix::after{content:;display:table;clear:both;}3. 核心属性详解3.1 文本样式 (Text)p{color:#333;/* 文字颜色 */font-size:16px;/* 字体大小 (推荐用 rem 或 px) */font-family:Microsoft YaHei,sans-serif;/* 字体族 */font-weight:bold;/* 粗细 (normal, bold, 100-900) */text-align:center;/* 对齐 (left, center, right, justify) */text-decoration:none;/* 装饰 (underline, line-through, none) */line-height:1.5;/* 行高 (推荐无单位数值如 1.5) */letter-spacing:2px;/* 字符间距 */text-indent:2em;/* 首行缩进 */}3.2 盒模型 (Box Model) -核心中的核心每个 HTML 元素都是一个矩形盒子由内到外分为内容 (Content) - 内边距 (Padding) - 边框 (Border) - 外边距 (Margin)。.box{width:200px;/* 内容宽度 */height:100px;/* 内容高度 */padding:10px;/* 内边距 (上下左右) */padding:10px 20px;/* 上下 10px, 左右 20px */padding:10px 20px 30px;/* 上 10, 左右 20, 下 30 */padding:10px 20px 30px 40px;/* 上 10, 右 20, 下 30, 左 40 (顺时针) */border:1px solid #ccc;/* 边框宽度 样式 颜色 */border-radius:5px;/* 圆角 */margin:20px;/* 外边距 */margin:0 auto;/* 水平居中 (上下 0, 左右自动) */}重要属性box-sizing默认情况下width只包含内容。如果设置了padding和border元素的总宽度会变大。/* 推荐全局设置让 width 包含 padding 和 border */*{box-sizing:border-box;}content-box(默认)width 内容宽度。border-boxwidth 内容 内边距 边框更符合直觉布局更简单。3.3 背景 (Background)body{background-color:#f0f0f0;/* 背景色 */background-image:url(bg.jpg);/* 背景图 */background-repeat:no-repeat;/* 不重复 */background-position:center;/* 居中 */background-size:cover;/* 覆盖整个容器 (保持比例) *//* 简写 */background:#f0f0f0url(bg.jpg)no-repeat center/cover;}3.4 布局属性 (Layout)Display:block: 块级元素 (独占一行如div,p,h1)。inline: 行内元素 (不独占一行宽高无效如span,a)。inline-block: 行内块 (不独占一行可设宽高)。none: 隐藏元素 (不占空间)。flex: 启用弹性布局。grid: 启用网格布局。Visibility:hidden: 隐藏元素 (占空间)。visible: 显示。Position:static: 默认值正常流。relative: 相对定位 (相对于自身原位置偏移不脱离文档流)。absolute: 绝对定位 (相对于最近的非 static 祖先元素偏移脱离文档流)。fixed: 固定定位 (相对于浏览器窗口脱离文档流)。sticky: 粘性定位 (滚动到阈值时变为 fixed)。4. 现代布局方案4.1 Flexbox (弹性盒子)一维布局行或列非常适合对齐和分布空间。.container{display:flex;flex-direction:row;/* 主轴方向row(行), column(列) */justify-content:center;/* 主轴对齐flex-start, center, space-between */align-items:center;/* 交叉轴对齐flex-start, center, stretch */flex-wrap:wrap;/* 是否换行 */}.item{flex:1;/* 放大比例 */order:2;/* 排序 */align-self:flex-end;/* 单独对齐 */}4.2 Grid (网格布局)二维布局行和列同时控制适合复杂页面结构。.container{display:grid;grid-template-columns:1fr 2fr 1fr;/* 三列比例 1:2:1 */grid-template-rows:100px auto;/* 两行 */gap:20px;/* 间距 */grid-template-areas:header header headersidebar content contentfooter footer footer;}.header{grid-area:header;}.sidebar{grid-area:sidebar;}5. 响应式设计 (Responsive Design)使用媒体查询 (Media Queries)根据设备特性如屏幕宽度应用不同的样式。/* 默认样式 (移动端优先) */body{font-size:14px;}/* 平板及以上 */media(min-width:768px){body{font-size:16px;}.container{width:720px;}}/* 桌面及以上 */media(min-width:992px){.container{width:960px;}.sidebar{display:block;}}/* 大屏幕 */media(min-width:1200px){.container{width:1140px;}}断点 (Breakpoints) 常用值576px: 手机768px: 平板992px: 小桌面1200px: 大桌面6. CSS 优先级 (Specificity)当多个规则冲突时浏览器根据优先级决定应用哪个。优先级从高到低!important(强制最高慎用)行内样式(style...) - 1000ID 选择器(#id) - 100类/伪类/属性选择器(.class,:hover,[typetext]) - 10标签/伪元素选择器(div,::before) - 1通配符(*) - 0计算示例#nav .item a- 100 10 1 111.nav .item a- 10 10 1 21div a- 1 1 2规则优先级高的覆盖低的。优先级相同时后定义的覆盖先定义的。7. 最佳实践与注意事项重置样式 (Reset/Normalize)不同浏览器对默认样式如margin,padding处理不同。建议使用Normalize.css或简单的重置代码*{margin:0;padding:0;box-sizing:border-box;}命名规范使用BEM(Block Element Modifier) 命名法避免冲突。示例.block__element--modifier(如.btn__icon--active)。性能优化避免过深的选择器嵌套如div ul li a span浏览器解析慢。避免使用通配符*在大型页面中频繁计算。使用transform和opacity做动画触发 GPU 加速避免使用top/left。可访问性 (Accessibility)不要仅靠颜色传达信息色盲用户。保留:focus样式方便键盘导航。图片使用alt属性。单位选择px: 固定像素精确但不够灵活。rem: 相对于根元素 (html) 的字体大小推荐用于布局。em: 相对于父元素字体大小常用于组件内部。%,vw,vh: 响应式布局常用。8. 总结结构HTML5 定义内容。表现CSS3 定义样式。核心盒模型 (box-sizing: border-box) 是布局的基础。布局Flexbox 处理一维Grid 处理二维。适配媒体查询实现响应式。原则外部样式表、BEM 命名、低耦合、高内聚。掌握 CSS 是成为前端开发者的必经之路它不仅是画皮更是构建现代 Web 体验的基石。