CSS样式分类：行内、内嵌与外部样式

需积分: 0 161 浏览量更新于2024-07-13 收藏 712KB PPT 举报

"根据样式代码的位置，可以将CSS样式分为行内样式、内嵌样式和外部样式。良好的编程习惯是在最后一个声明后添加分号。本文将深入探讨CSS层叠样式表，包括其语法规则、分类以及常用样式，并介绍DHTML与CSS的关系。" 在网页设计中，CSS（层叠样式表）扮演着至关重要的角色，它允许我们控制网页的布局、颜色、字体等视觉元素。根据样式代码在HTML文档中的位置，我们可以将其分为以下三类： 1. **行内样式**：行内样式是直接在HTML元素的`style`属性中定义的，如`<p style="color:red;">`。这种方式直接且优先级最高，但不利于代码复用和维护。 2. **内嵌样式**：内嵌样式通常写在HTML文档的`<head>`标签内的`<style>`标签中，可以应用于整个文档或特定的`<div>`等元素。这种方式比行内样式具有更好的复用性，但仍然不如外部样式灵活。 3. **外部样式**：外部样式是指将CSS代码保存在单独的`.css`文件中，然后通过`<link>`标签引入到HTML文档中。外部样式表提供最佳的代码组织和重用，同时方便进行样式更新和维护。了解CSS的语法规则是非常基础且重要的。基本语法包括选择器（如元素名、ID或类）后跟一对花括号，花括号内是样式声明，每个声明由属性名和值组成，两者之间用冒号隔开，声明之间用分号分隔。例如： ``` p { color: red; font-size: 16px; } ``` CSS提供了丰富的样式属性，如颜色、字体、边距、对齐方式等，可以精细控制网页元素的外观。例如，`color`用于设置文字颜色，`font-size`用于设定字体大小，`margin`和`padding`用于调整元素的内外边距。在网页设计中，`<div>`和`<span>`是非常重要的结构元素。`<div>`常用来组织页面的大块内容，而`<span>`则用于更细粒度的文本控制。它们都可以通过CSS来赋予样式，实现复杂的布局效果。 DHTML（Dynamic HTML）是结合HTML、CSS和脚本语言（如JavaScript）来创建交互式和动态网页的技术。CSS在DHTML中负责定义元素的显示样式，决定元素的尺寸、颜色和位置，从而实现网页元素的动态操纵。示例代码展示了如何在HTML中直接应用内嵌样式，使段落文本呈现红色、30像素的隶书字体： ```html <p style="color:red;font-size:30px;font-family:隶书;">这个段落应用了样式</p> ``` 而未指定样式的段落则会按照浏览器的默认样式显示。总结来说，理解并熟练运用CSS的分类和语法规则是提升网页设计技能的关键。通过行内、内嵌和外部样式，以及掌握基本的CSS属性，我们可以创建出美观且功能丰富的网页。同时，结合DHTML，可以进一步实现动态和交互性的网页效果。