CSS入门指南：选择器、声明与样式引入解析
需积分: 3 164 浏览量
更新于2024-09-07
收藏 222KB PDF 举报
"这是一份关于CSS的笔记整理，涵盖了CSS的基本概念、语法、样式引入方式，以及一些核心样式属性的介绍，如背景、文字和边框等。笔记旨在帮助学习者理解CSS在前端开发中的作用，掌握CSS的编写规则，并了解如何在HTML中应用CSS样式。"
CSS是层叠样式表，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS描述了如何在媒体（如屏幕、打印机）上展示元素。CSS3将不同功能模块化，便于更新和浏览器支持。
**CSS语法**：
CSS规则由选择器和声明组成。选择器指向要应用样式的元素，如`p`元素。声明包含属性和对应的值，用冒号分隔，多个声明用分号隔开。例如：
```css
p {
color: red;
font-size: 12px;
}
```
**CSS注释**：
注释以`/*`开始，`*/`结束，对代码进行解释，浏览器会忽略。
**CSS样式引入**：
1. **内联式CSS**：将样式直接写在HTML元素的`style`属性中，如`<p style="color:red">`，多条样式用分号隔开。
2. **嵌入式CSS**：样式放在`<style>`标签内，通常位于`<head>`标签中，可为整个页面定义样式。
3. **外部式CSS**：样式存储在`.css`文件中，通过`<link rel="stylesheet" href="样式文件路径">`引入到HTML中，适用于多页面共享样式。
**CSS选择器**：
选择器用于选取要设置样式的元素，如`p`选择器选取所有段落，`#id`选择器选取ID为特定值的元素，`.class`选择器选取类名匹配的元素。
**CSS核心样式属性**：
- **background（背景）**：包括背景颜色、图像、重复方式等，如`background-color: blue;`。
- **font（文字）**：管理文本样式，如`font-size`, `font-family`, `font-weight`等。
- **border（边框）**：定义元素边框的宽度、样式和颜色，如`border: 1px solid black;`。
**CSS框模型**：
框模型描述了元素占据的空间，包括内容区域、内边距、边框和外边距。理解框模型对于布局和定位至关重要。
通过学习这些基础知识，你可以开始创建具有吸引力和功能性的网页，控制元素的外观和布局。随着经验的增长，你还可以深入学习更高级的概念，如浮动、定位、响应式设计和过渡效果等。
1. 英文圆点开头
2. 其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
3. ID选择器选择器
#idName以 # 开头且只可出现一次，其命名要求于 .className 相同。在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1. 为标签设置id="ID名称"，而不是class="类名称"。
2. ID选择符的前面是井号（#）号，而不是英文圆点（.）。
3. ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多
次。
4. 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID
选择器是不可以的（不能使用 ID 词列表）。
栗子：
4. 通配符选择器通配符选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字
体颜色全部设置为红色：
* {color:red;}
伪类伪类
:link{} 此链接未被访问过
:visited{} 此链接已访问
:hover{} 鼠标移入
:active{} 鼠标按下
L-V-H-A
:target 点击后出发hash值 类似锚点a
:checked 被选中的单选框或复选框
文本伪类文本伪类
p:first-letter 第一个字
p:first-line 第一行
p:selection 选中的颜色改变
p:after 元素末尾
p:before 元素开始
p:not （命的名） 排除掉谁
结构性伪类：结构性伪类：
box h2:nth-child(3){background:Red;}
剩余12页未读，继续阅读
2019-08-10 上传
2021-10-14 上传
2021-10-25 上传
2021-09-27 上传
2022-11-29 上传
2013-09-24 上传
2021-11-18 上传
HUSH_ICECREAM
- 粉丝: 7
- 资源: 5
我的内容管理
展开
最新资源
- Android圆角进度条控件的设计与应用
- mui框架实现带侧边栏的响应式布局
- Android仿知乎横线直线进度条实现教程
- SSM选课系统实现：Spring+SpringMVC+MyBatis源码剖析
- 使用JavaScript开发的流星待办事项应用
- Google Code Jam 2015竞赛回顾与Java编程实践
- Angular 2与NW.js集成：通过Webpack和Gulp构建环境详解
- OneDayTripPlanner：数字化城市旅游活动规划助手
- TinySTM 轻量级原子操作库的详细介绍与安装指南
- 模拟PHP序列化:JavaScript实现序列化与反序列化技术
- ***进销存系统全面功能介绍与开发指南
- 掌握Clojure命名空间的正确重新加载技巧
- 免费获取VMD模态分解Matlab源代码与案例数据
- BuglyEasyToUnity最新更新优化：简化Unity开发者接入流程
- Android学生俱乐部项目任务2解析与实践
- 掌握Elixir语言构建高效分布式网络爬虫
