CSS样式全解：外部、内部与内联样式

需积分: 0 125 浏览量更新于2024-08-04 收藏 23KB TXT 举报

本文档是关于CSS样式的总结，涵盖了样式的基本使用方法和常见参数，旨在帮助新手入门和老手复习。文档详细介绍了外部样式、内部样式和内联样式的应用，并提供了各种选择器的使用示例，以及CSS注释的格式。在Web开发中，CSS（Cascading Style Sheets）是用于控制网页元素呈现样式的关键技术。本总结主要分为以下几个部分： 1. **样式应用方式**： - **外部样式**：将样式定义在一个单独的`.css`文件中，通过`<link>`标签引入到HTML文档的`<head>`部分。这种方式便于样式管理，提高代码复用。 - **内部样式**：将样式写在HTML文档的`<style>`标签内，位于`<head>`部分，适用于整个页面的统一风格设置。 - **内联样式**：直接在HTML元素中使用`style`属性定义样式，如`<p style="color:sienna;margin-left:20px">`，方便快速调整特定元素样式，但不推荐大量使用，因为降低了代码可维护性。 2. **CSS语法基础**： - 声明以分号` ; `结尾，包裹在大括号` {} `内，如`p{color:red;text-align:center;}`。 - 注释使用`/* ... */`包围，用于解释代码。 3. **选择器类型**： - `.class`：选择所有class匹配的元素，如`.intro`选择所有class为"intro"的元素。 - `#id`：选择特定ID的元素，如`#firstname`选择id为"firstname"的元素。 - `*`：选择所有元素。 - `element`：选择特定类型的元素，如`p`选择所有段落。 - `element,element`：选择多种类型的元素，如`div,p`选择所有div和p元素。 - `element element`：选择嵌套关系的元素，如`div p`选择div内的所有p元素。 - `element>element`：选择直接子元素，如`div > p`选择所有直接作为div子元素的p。 - `element+element`：选择紧邻的同级元素，如`div + p`选择紧跟在div后面的p元素。 - `[attribute]`：根据属性选择元素，如`[target]`选择所有有target属性的元素。 - `[attribute=value]`：根据属性值选择元素，如`[target="_blank"]`选择target属性等于"_blank"的元素。 - `[attribute~=value]`：选择属性值包含空格分隔的单词，如`[title~=flower]`选择title属性包含单词"flower"的元素。 - `[attribute|=language]`：选择属性值以指定字符串开头，如`[lang|=en]`选择lang属性以"en"开头的元素。 4. **CSS版本说明**：上述选择器的CSS版本标注表示该选择器最早在哪一版CSS规范中被引入。例如，`element`和`.class`在CSS1就已经存在，而`element>element`在CSS2中引入，`[attribute|=language]`在CSS2.1中引入。这个总结文档对理解CSS基本概念和操作非常有帮助，无论是初学者还是有一定经验的开发者，都可以从中找到所需的样式知识和技巧。通过学习和实践这些内容，可以提升网页设计的灵活性和专业度。