CSS基础入门：选择器、样式设置与优先级详解
需积分: 9 201 浏览量
更新于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 上传
论文
2023-04-03 上传
2023-06-02 上传
2023-05-26 上传
2023-09-13 上传
2023-05-25 上传
2023-05-25 上传
samlee
- 粉丝: 1
- 资源: 21
我的内容管理
展开
最新资源
- 李兴华Java基础教程：从入门到精通
- U盘与硬盘启动安装教程：从菜鸟到专家
- C++面试宝典：动态内存管理与继承解析
- C++ STL源码深度解析：专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手：数据管理与企业增值的战略
- Eclipse IDE基础教程：从入门到精通
- Shell脚本专家宝典：全面学习与资源指南
- Tomcat安装指南：附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华：必备术语集锦
