理解HTML中的<span>与<div>及CSS样式表应用

需积分: 10 43 浏览量更新于2024-08-18 收藏 1.32MB PPT 举报

该资源是一份关于HTML组织元素`<span>`和`<div>`以及CSS样式的教程资料，适合Java开发者学习Web前端基础知识。它包括了如何使用`<span>`和`<div>`来组织网页内容，以及如何通过CSS来控制网页元素的样式、布局和行为。 ### HTML组织元素——`<span>`与`<div>` `<span>`是一个行级（inline）容器标签，主要用来包裹文本内容，如字体强调、颜色改变等。它不会在内容周围自动换行，因此不适合包含大段内容或结构化的元素，如图片、标题或段落。`<span>`通常与其他CSS样式结合使用，以实现特定的文本样式效果。相反，`<div>`是一个块级（block）容器标签，它可以包裹几乎所有的HTML元素，包括图片、标题、段落等。`<div>`会在内容前后自动换行，形成一个独立的区块，常用于布局和组织页面结构。多个`<div>`可以组合使用，创建复杂的页面布局。 ### CSS样式表 CSS（层叠样式表）是一种样式语言，用于定义HTML或XML（包括SVG、XHTML等）文档的呈现。CSS让设计者能够将样式（如颜色、字体、布局）与网页内容分离，使得内容和表现形式分离，提高了网页的可维护性和重用性。 CSS的基本语法是选择器（selector）+花括号（{}）内的属性（property）和值（value），例如：`p {color: red;}` 表示设置所有段落的文本颜色为红色。 CSS有三种应用方式： 1. **行内样式表（style属性）**：直接在HTML元素中使用`style`属性，如`<p style="color:red;">`。 2. **内部样式表（style元素）**：在HTML `<head>` 标签内使用`<style>`元素定义样式，如`<style>p{color:red;}</style>`。 3. **外接样式表（引用样式表文件）**：通过`<link>`标签链接到外部CSS文件，如`<link rel="stylesheet" type="text/css" href="style.css">`。通过CSS，你可以控制网页元素的颜色、大小、位置，甚至实现交互效果，是创建动态和响应式网页的关键技术。这份资料提供了不同方式使用CSS的实例，包括行内样式、内部样式和外部样式表的插入方法，以及如何通过`<link>`标签引用外部CSS文件，帮助学习者理解和掌握CSS在网页设计中的应用。