理解DIV+CSS布局：从入门到实践

“文本属性-DIV+CSS入门课件” 这篇资料主要介绍了网页设计中的核心概念——DIV+CSS，以及相关的文本属性。DIV+CSS是一种现代网页布局技术，它将内容（HTML）与样式（CSS）分离，提高了网页的可维护性和可访问性。 **CSS（层叠样式表）** 是一种样式语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS描述了如何在媒体（如屏幕、打印机）上展示元素。它的基本语句结构是：选择符{属性1：值1；属性2：值2；属性n：值n；}，例如，`p{font-size:12pt;color:blue}`用来设置段落的字体大小和颜色。 **文本属性** 包括`text-decoration`和`text-align`。`text-decoration`用于设置文本的装饰效果，常见的值有`none`（无装饰）、`underline`（下划线）、`overline`（上划线）、`line-through`（删除线）以及`blink`（闪烁，但在现代浏览器中已被废弃）。`text-align`用于设定文本的对齐方式，可以设置为`left`（左对齐）、`right`（右对齐）、`center`（居中）或`justify`（两端对齐）。 **DIV** 是HTML中的一个块级元素，全称为division，代表“区分”。它可以作为一个容器，包裹其他HTML元素，如段落、标题、表格等。默认情况下，DIV会占据一整行。而`SPAN`是行内元素，常用于文本级别的样式控制，它不会引起换行，只能包含文本内容。 **DIV+CSS布局** 与传统的基于表格（TABLE）的布局相比，具有许多优势，如更好的控制页面布局、提高页面加载速度、更易于维护和适应不同设备的显示。在DIV+CSS布局中，内容通过HTML组织，样式则由CSS定义，这样使得网页设计更加灵活且易于管理。 **DIV与SPAN的区别** 主要体现在它们的元素类型和用途上。DIV是块级元素，可以独立成块，适合布局大块内容；而SPAN是行内元素，常用于文本级别的样式控制，它不会引起换行，适合对单行文本或小块内容进行样式调整。 **盒子模型** 是理解CSS布局的关键概念，每个HTML元素都可以看作一个带有内容、边距、边框和内填充的盒子。这个模型帮助设计师理解元素占用的空间及其相互之间的关系。 这份资料是关于HTML和CSS基础知识的讲解，特别是强调了DIV和CSS在网页设计中的应用，对于初学者来说是非常有价值的入门材料。