CSS3选择器与文本样式总结
需积分: 5 89 浏览量
更新于2024-08-05
收藏 701KB PDF 举报
"这是一个关于CSS3基础知识的总结,涵盖了选择器、字体与文本样式等多个核心概念,旨在方便查阅和学习。"
在CSS3中,选择器是定位和应用样式的基石,它们包括:
1. **标签选择器**:通过元素名称来指定样式,如`p{css样式}`。
2. **类选择器**:使用`.`号前缀,如`.className{css样式}`,用于选取具有特定类名的元素。
3. **ID选择器**:使用`#`号前缀,如`#uniqueId{css样式}`,用于选取具有唯一ID的元素。
4. **通配选择器**:`*{css样式}`,应用于所有元素。
5. **后代选择器**:使用空格分隔,如`div p{css样式}`,选择`div`内的所有`p`元素。
6. **子代选择器**:使用`>`符号,如`div > p{css样式}`,仅选择`div`的直接子元素`p`。
7. **并集选择器**:使用`,`分隔,如`div, p{css样式}`,同时选择`div`和`p`元素。
8. **交集选择器**:直接紧挨着,如`div.className{css样式}`,选择既是`div`又是`.className`的元素。
9. **伪类选择器**:如`:hover`用于鼠标悬停时的样式,`:focus`用于元素获得焦点时的样式。
10. **属性选择器**:如`[type='text']`,选取具有特定属性的元素。
选择器的优先级是决定样式应用的关键,遵循以下顺序:
1. 继承的样式
2. 通配选择器
3. 标签选择器
4. 类选择器
5. ID选择器
6. 行内样式(`style`属性)
7. `!important`规则
复合选择器权重计算方式为:每级权重分别对应0、10、100、1000,例如`#id.class`的权重是1011。
**字体与文本样式**:
1. **字体粗细**:`font-weight`,如`normal`、`bold`或数值100-900。
2. **字体倾斜**:`font-style`,如`normal`或`italic`。
3. **字体家族**:`font-family`,列举多个字体,按顺序备用,如`'Arial', 'Helvetica', sans-serif`。
4. **文本阴影**:`text-shadow`,定义水平、垂直偏移、模糊程度和颜色。
5. **垂直对齐**:`vertical-align`,如`baseline`、`top`、`middle`、`bottom`。
6. **首行缩进**:`text-indent`,如`2em`,用于设置文本首行缩进。
7. **文本对齐**:`text-align`,控制文本在容器中的对齐方式,包括`left`、`center`、`right`。
8. **文本装饰**:`text-decoration`,如去除下划线`text-decoration: none`。
结构伪类选择器如`:first-child`、`:last-child`、`:nth-child(n)`和`:nth-of-type(n)`,用于选择特定位置的子元素。`n`可以是整数、偶数(even)、奇数(odd)或其他数学表达式。
注意,编写CSS时应遵循语法规则,并合理规划选择器以避免冲突,确保样式正确应用。了解并熟练掌握这些基本概念,将有助于你更好地控制页面的布局和视觉表现。
2021-10-04 上传
2021-11-12 上传
2020-05-16 上传
2010-06-01 上传
2023-09-09 上传
2008-07-14 上传
2021-09-30 上传
2023-02-28 上传
2010-03-12 上传
oh97
- 粉丝: 3
- 资源: 2
最新资源
- 单片机串口通信仿真与代码实现详解
- LVGL GUI-Guider工具:设计并仿真LVGL界面
- Unity3D魔幻风格游戏UI界面与按钮图标素材详解
- MFC VC++实现串口温度数据显示源代码分析
- JEE培训项目:jee-todolist深度解析
- 74LS138译码器在单片机应用中的实现方法
- Android平台的动物象棋游戏应用开发
- C++系统测试项目:毕业设计与课程实践指南
- WZYAVPlayer:一个适用于iOS的视频播放控件
- ASP实现校园学生信息在线管理系统设计与实践
- 使用node-webkit和AngularJS打造跨平台桌面应用
- C#实现递归绘制圆形的探索
- C++语言项目开发:烟花效果动画实现
- 高效子网掩码计算器:网络工具中的必备应用
- 用Django构建个人博客网站的学习之旅
- SpringBoot微服务搭建与Spring Cloud实践