CSS选择器详解与样式表位置介绍
需积分: 9 193 浏览量
更新于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学习的关键，它能帮助我们精确地定位和美化页面上的每一个元素。
第 1 页
Css 基础（二）
１ 复习昨天知识
1.1 Css 层叠样式表（级联样式表）
Css 的作用就是美好 html 标签。
１.2 书写位置
<head>
<style type=”text/css”>
样式代码
</style>
</head>
属性 解释 值
font-style
文本风格
Normal | italic
font-weight
文本粗细
700 | bold
font-family
字体
font-size
文字大小
line-height
行高
color
文本颜色(前景色)
Background-color
背景颜色
text-align
内容的水平的对齐方式
Left | right | center
text-indent
首行缩进
2em
２ 选择器
选择器是一个选择谁的过程。
下载后可阅读完整内容，剩余8页未读，立即下载
2013-08-27 上传
2009-09-19 上传
2010-04-11 上传
2018-10-29 上传
2012-10-08 上传
2008-10-21 上传
2021-10-10 上传
2022-12-23 上传
2009-05-02 上传
章鱼有三颗心
- 粉丝: 0
- 资源: 4
我的内容管理
展开
最新资源
- 平尾装配工作平台运输支撑系统设计与应用
- MAX-MIN Ant System：用MATLAB解决旅行商问题
- Flutter状态管理新秀：sealed_flutter_bloc包整合seal_unions
- Pong²开源游戏：双人对战图形化的经典竞技体验
- jQuery spriteAnimator插件：创建精灵动画的利器
- 广播媒体对象传输方法与设备的技术分析
- MATLAB HDF5数据提取工具：深层结构化数据处理
- 适用于arm64的Valgrind交叉编译包发布
- 基于canvas和Java后端的小程序“飞翔的小鸟”完整示例
- 全面升级STM32F7 Discovery LCD BSP驱动程序
- React Router v4 入门教程与示例代码解析
- 下载OpenCV各版本安装包，全面覆盖2.4至4.5
- 手写笔画分割技术的新突破：智能分割方法与装置
- 基于Koplowitz & Bruckstein算法的MATLAB周长估计方法
- Modbus4j-3.0.3版本免费下载指南
- PoqetPresenter：Sharp Zaurus上的开源OpenOffice演示查看器
