CSS网页布局技巧与实战解析

"别具光芒CSS网页布局案例剖析摘要和经验.pdf" 这篇文档主要涵盖了CSS在网页布局中的应用，以及一些HTML与CSS的基础知识。以下是关键知识点的详细说明： 1. **DOCTYPE**: 它用于声明文档类型，有两种类型，即`transitional`和`strict`。`transitional`允许使用一些在新标准中被废弃的元素和属性，而`strict`则不支持这些过时的元素和属性，鼓励更纯净的HTML编写。 2. **XHTML**: 是HTML的一个严格版本，它要求所有标签都必须正确闭合，使用小写字母，并且属性值需用双引号包围，旨在推动网页标准化。 3. **块级元素与行内元素**: 块级元素如`div`会在新的一行开始，可以设置宽高、内外边距；行内元素如`a`、`span`不会自动换行，不能直接设置宽高和内外边距，但可以通过`display:block`转换为块级元素。 4. **HTML与CSS关系**: HTML负责内容，CSS负责样式，分离内容和表现形式，方便管理和维护。 5. **Dreamweaver(Dw)软件技巧**: Dw提供了自动添加结束标签的功能，便于快速编写HTML代码；通过双击可以选中标签内的内容，便于编辑。 6. **类(class)的使用**: 同一个类名可以应用于多个元素，一个元素也可以有多个类，但当类名冲突时，CSS定义的顺序决定优先级。 7. **选择器优先级**: 行内样式 > ID样式 > 类别样式 > 标记样式。同时，行内样式优先级高于内部样式表和外部样式表。 8. **CSS引入**: 导入式`@import`在某些旧版本浏览器中可能无效，如IE8、Firefox18和360安全浏览器6。 9. **图片CSS设置**: 使用`margin`设置图片边距，`border`属性用于设置边框，例如`border:1px #9999cc dashed;`创建1像素的虚线边框。 10. **文本样式**: `text-indent:2em;`实现首行缩进两个字符的距离，`line-height:1.5;`设置1.5倍行间距。 11. **页面边距设置**: 在调整整体页面边距时，通常会针对`body`元素设置`margin`。 12. **CSS代码示例**: 文档可能包含了实际的CSS代码，用于展示如何使用选择器和其他属性创建特定的布局效果。 这些知识点构成了CSS网页布局的基础，对于理解CSS如何影响网页的呈现和布局至关重要。掌握这些概念有助于创建更加美观、响应式的网页设计。