CSS基础入门：选择器、样式设置与优先级详解
需积分: 9 60 浏览量
更新于2024-09-11
收藏 2KB TXT 举报
本文档是一份关于级联样式表（CSS）的学习笔记，详细介绍了CSS的设置方式、各种选择器的应用以及相关概念。以下是主要内容的概要：
1. CSS设置方式：
- 内联样式：直接在HTML元素的`style`属性中定义，如 `<body style="font-size:20pt;color:blue;font-family:">`，适用于简单或临时样式调整。
- 外部样式表：
- 直接在`<head>`标签中的`<style>`标签中编写样式，例如`<style type="text/css">`。
- 链接外部CSS文件，使用`<link rel="stylesheet" href="my.css" type="text/css">`，方便管理样式。
2. 样式选择器：
- HTML选择器：
- 基于元素名称，如`.stop{color:red}`表示所有`<p>`元素中的`stop`类应用红色文本。
- 类选择器 `.blueone{color:blue}`用于指定带有`blueone`类的元素。
- 类别选择器（Class selector）：
- 类内联样式：针对具有相同类别的元素设置样式。
- 类别独立定义：如`.warning`、`.normal`等，与HTML元素结合使用，如`<p class="warning">`。
3. ID选择器：
- 使用`#id`标识特定的元素，如`<p id="uniqueID">`，对应的CSS是`#uniqueID {color: red;}`。
4. 关联选择器和组合选择器：
- 关联选择器，如`:hover`，当鼠标悬停在元素上时改变样式，如`a:hover {color: red;}`。
- 组合选择器，如`div p`, 选取嵌套在`div`内的所有`p`元素。
5. 伪元素选择器：
- 用于操作元素的不同状态，如`:first-child`选择第一个子元素，`:before`和`:after`用于添加虚拟元素。
6. 其他概念：
- 注释：CSS中使用`/* ... */` 或 `<!-- ... -->` 进行注释。
- 样式继承：内层元素会继承外层元素的样式定义，但可以通过内层元素的重定义（覆盖）来修改。
- 优先级规则：不同方式定义的样式有优先级顺序，比如内联样式最高，然后是ID选择器、类选择器等。
通过这份学习笔记，读者可以系统地理解CSS的工作原理，掌握如何有效地应用不同类型的样式选择器，并了解CSS的组织结构和注释技巧，以便更高效地进行网页设计和开发。
2019-03-06 上传
2014-07-10 上传
2011-08-05 上传
2020-10-23 上传
103 浏览量
2021-05-02 上传
2023-10-09 上传
2023-11-02 上传
2021-02-09 上传
samlee
- 粉丝: 1
- 资源: 21
我的内容管理
展开
最新资源
- 平尾装配工作平台运输支撑系统设计与应用
- 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演示查看器
