CSS入门指南：选择器与文本样式解析

需积分: 3 72 浏览量更新于2024-07-27 收藏 2.47MB PDF 举报

"这是一份关于CSS的学习笔记，涵盖了创建样式和样式表的基础知识，选择器原理，以及文本CSS的应用实例。笔记作者为樊凯，日期为2008年6月12日。" 在CSS（Cascading Style Sheets）中，创建样式和样式表是构建网页视觉效果的关键步骤。下面将详细讲解这部分内容：一、创建样式和样式表 1. **选择器(Selector)**：选择器用于指定CSS规则应用的目标。在示例中，“p”是一个选择器，它表示要改变所有段落（`<p>`标签）的样式。 2. **声明块(Declaration Block)**：选择器后的花括号 `{}` 包含了所有要应用于该选择器的样式声明。在这个例子中，声明块是 `p{color:red;font-size:12px;}`。 3. **声明(Declaration)**：声明由属性（Property）和值（Value）组成，如 `color:red` 和 `font-size:12px`。它们定义了元素的特定样式属性及其对应的值。 4. **属性(Property)**：属性是指CSS中的样式选项，如颜色（`color`）和字体大小（`font-size`）。 5. **值(Value)**：值是给属性设定的具体样式，如红色（`red`）和12像素（`12px`）。二、选择器基础选择器的选择范围广泛，可以根据元素类型、类名、ID等来指定。例如： - **类型选择器**：如 `p` 选择所有的段落元素。 - **类选择器**：如 `.class-name` 选择具有特定类名的元素。 - **ID选择器**：如 `#id-name` 选择具有特定ID的唯一元素。三、文本CSS 文本CSS涉及到如何控制网页中的文本样式，包括字体、颜色、大小、对齐方式等。例如，在给定的实例中，可以看到`<p>`标签内的文本颜色被设为红色，字体大小设为12像素。同时，通过`<span>`标签，可以针对特定文本进行更细致的样式控制。实例中的HTML代码还展示了CSS如何嵌入到文档中，即通过`<style>`标签在`<head>`部分定义CSS规则。`<style type="text/css">`声明了这是CSS样式，并在其中添加CSS代码。最后，CSS还可以通过外部链接的方式引入，例如在`<head>`中添加`<link rel="stylesheet" href="styles.css">`，这样就可以将样式存储在单独的CSS文件中，实现代码分离和更好的维护性。 CSS学习笔记提供了一个基本的框架，帮助初学者理解如何构建和应用CSS规则，以及如何控制文本样式。通过实践和深入学习，可以掌握更高级的概念，如盒模型、布局、响应式设计等，从而创建更加复杂且美观的网页。