DHTML样式表总结:CSS规则与动态网站解析

需积分: 11 1 下载量 91 浏览量 更新于2024-08-17 收藏 1.1MB PPT 举报
"本课总结-DHTML样式表编写" 在学习DHTML样式表编写时,我们需要了解以下几个关键知识点: 1. **CSS与HTML的区别** - HTML(HyperText Markup Language)主要用于构建网页的结构,它定义了网页上的元素、标题、段落等基本组件。 - CSS(Cascading Style Sheets)则是用来描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的外观和格式的样式表语言。它的主要任务是分离内容和表现,使得网页设计更加灵活和易于维护。 2. **CSS在网页中的实现方式** - 内联样式:通过在HTML元素内使用`style`属性来定义样式。 - 内部样式表:在HTML文档的`<head>`部分使用`<style>`标签来定义样式,适用于整个文档。 - 外部样式表:将CSS代码存储在单独的`.css`文件中,然后通过`<link>`标签链接到HTML文档,便于多个页面共享样式。 3. **CSS的结构和规则** - CSS选择器用于选择要应用样式的HTML元素,如类选择器、ID选择器、标签选择器等。 - 样式声明由属性和值组成,用冒号分隔,每条声明以分号结束,如`color: red;`。 - 属性可以有多个值,如`margin: 10px auto;`,这表示上下边距为10像素,左右居中。 4. **CSS的伪类与伪元素** - 伪类如`:hover`、`:active`和`:focus`用于根据元素的状态应用样式。 - 伪元素如`::before`和`::after`用于在元素内容之前或之后插入内容。 5. **使用滤镜** - 在CSS中,滤镜可以用于对元素应用视觉效果,如模糊、颜色转换等。在IE浏览器中,使用`filter`属性实现,现代浏览器通常使用CSS3的滤镜功能。 6. **CSS定位** - `position`属性(如`static`、`relative`、`absolute`、`fixed`)用于控制元素在页面上的位置。 - 使用`top`、`right`、`bottom`和`left`属性可以精确调整定位元素的位置。 - 浮动(`float`属性)常用于创建多列布局。 7. **使用CSS控制显示和隐藏** - `display`属性可以控制元素是否显示,例如`none`表示隐藏,`block`或`inline`表示显示。 - `visibility`属性则控制元素是否可见,`hidden`表示不可见,`visible`表示可见,但不会影响元素的布局。 了解这些基础概念后,结合DHTML(Dynamic HTML)的特性,如JavaScript交互和DOM操作,我们可以创建出交互性强、响应迅速的动态网页。在B/S(Browser/Server)架构中,前端技术如HTML、CSS和JavaScript相互配合,实现了客户端的动态效果和用户交互,而服务器端的编程语言(如ASP.NET、PHP、JSP等)负责处理数据和业务逻辑。在C/S(Client/Server)结构中,客户端应用程序直接与服务器通信,提供了更为复杂的交互和定制化界面。无论是B/S还是C/S,都离不开HTML作为页面的基础框架,以及CSS作为美化和布局的核心工具。