web技术作业71

【知识点详解】 1. **CSS 层叠样式表 (Cascading Style Sheets)**：CSS 是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们将表现（样式）与内容分离，使得网页设计更加灵活且易于维护。 2. **CSS 选择器与类名**：在示例中，`<ol class="outer">`、`<li id="compact">`等是CSS选择器，用来定位和应用样式。`class`属性用于定义共享相同样式的元素组，而`id`属性则用于唯一标识一个元素。 3. **CSS 属性**：`list-style-type`是一个CSS属性，用于设置列表项标记的类型。例如，`upper-roman`表示大写的罗马数字，`upper-alpha`表示大写字母，`decimal`表示阿拉伯数字。 4. **颜色属性**：在CSS中，我们可以使用颜色名称（如`pink`、`blue`、`red`）、十六进制值（如`#FF0000`为红色）或RGB值来设置背景颜色。例如，`background-color: pink;`将背景颜色设置为粉色。 5. **嵌套列表**：HTML中的`<ol>`元素用于创建有序列表，而`<li>`元素用于定义列表项。在这个作业中，我们看到三个嵌套的`<ol>`列表，每个内部列表都具有不同的`class`以区分样式。 6. **CSS 样式继承**：当一个元素是另一个元素的后代时，它会继承父元素的一些样式。在这个例子中，所有段落（`<p>`元素）由于是`body`元素的子元素，所以它们继承了`body`的红色背景色。 7. **CSS ID 选择器**：`#compact`、`#midsize`和`#sports`是ID选择器，用于唯一标识页面上的特定元素。在CSS中，ID选择器的优先级高于类选择器，因此可以覆盖类选择器设定的样式。 8. **CSS 属性值预设**：`predefined`在上下文中可能指的是CSS中某些属性（如`border`、`padding`和`margin`）的预设值。这些属性可以定义元素的边框、内边距和外边距。 9. **CSS 边框属性**：`border`属性定义元素的边框，包括宽度、样式和颜色。例如，`border: 1px solid black;`会添加1像素宽的实线黑色边框。 10. **内边距和外边距**：`padding`定义元素内容区域与其边框之间的空间，而`margin`定义元素与其他元素之间的距离。两者都是透明的，因此不会影响元素本身的内容。 11. **对齐属性**：`alignment`通常指的是`text-align`属性，用于控制文本在块级元素内的水平对齐方式，如左对齐、居中或右对齐。 12. **间隔属性**：`spacing`可能指的是`letter-spacing`（字符间距）、`word-spacing`（单词间距）或`line-height`（行高），它们分别控制字符、单词间的距离以及行之间的高度。 13. **排序属性**：在HTML和CSS中，`order`属性是CSS Flexbox的一部分，用于控制弹性容器中项目的顺序。在这里，可能是指HTML列表中的排序逻辑，但这个概念在CSS中不直接适用。 通过这个作业，学生可以学习到CSS的核心概念，包括选择器、属性、值以及如何组织和嵌套HTML元素来实现特定的布局和样式效果。这有助于理解Web页面的呈现机制，并为创建更复杂的交互式和响应式网页打下基础。