CSS选择器详解与样式表位置介绍

需积分: 9 0 下载量 141 浏览量 更新于2024-09-02 收藏 279KB DOC 举报
"Css基础(二).doc" 在CSS(层叠样式表)中,选择器是用于指定HTML或XML文档中元素的关键工具,它们决定了哪些元素将应用特定的样式。本资料主要介绍了CSS的选择器种类,包括基础选择器、复合选择器以及样式表的书写位置,帮助初学者更好地理解和运用CSS。 1. 基础选择器: - **标签选择器**:通过HTML标签名来选择元素,例如`p{样式}`会应用到所有段落元素。 - **类选择器**:使用`.`前缀,如`.myClass{样式}`,可应用于任何调用该类名的元素,一个元素可以有多个类选择器。 - **ID选择器**:使用`#`前缀,如`#uniqueId{样式}`,每个ID在页面上只能出现一次,适用于唯一标识元素。 - **通配符选择器**:`*{样式}`,应用于所有元素。 2. 复合选择器: - **交集选择器**:`标签 + .class` 或 `标签 + #id`,选择同时满足标签和类或ID的元素。 - **后代选择器**:`parent selector > child selector`,选择父元素内的所有子元素,不限层级。 - **子代选择器**:`parent selector > child selector`,仅选择父元素的直接子元素。 - **并集选择器**:`selector1, selector2, selector3`,将多个选择器组合,应用相同的样式。 3. 样式表书写位置: - **内嵌式写法**:在`<head>`标签内使用`<style>`标签,样式仅作用于当前文档。 - **外链式写法**:通过`<link rel="stylesheet" href="1.css">`引入外部CSS文件,便于样式复用和管理。 - **行内样式表**:直接在HTML元素的`style`属性中写样式,优先级最高,但不推荐,因为不利于维护。 了解这些基本概念后,开发者可以更灵活地控制页面元素的外观,如设置`font-style`、`font-weight`、`font-family`、`font-size`来改变文本样式,用`line-height`调整行间距,通过`color`和`background-color`设定文本和背景颜色,利用`text-align`控制文本对齐,以及`text-indent`实现首行缩进。掌握选择器的运用是CSS学习的关键,它能帮助我们精确地定位和美化页面上的每一个元素。