CSS入门指南:选择器、声明与样式引入解析
需积分: 3 178 浏览量
更新于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框模型**:
框模型描述了元素占据的空间,包括内容区域、内边距、边框和外边距。理解框模型对于布局和定位至关重要。
通过学习这些基础知识,你可以开始创建具有吸引力和功能性的网页,控制元素的外观和布局。随着经验的增长,你还可以深入学习更高级的概念,如浮动、定位、响应式设计和过渡效果等。
点击了解资源详情
点击了解资源详情
点击了解资源详情
2021-10-14 上传
2021-10-25 上传
2021-09-27 上传
2022-11-29 上传
2013-09-24 上传
2021-11-18 上传
HUSH_ICECREAM
- 粉丝: 7
- 资源: 5
最新资源
- 正整数数组验证库:确保值符合正整数规则
- 系统移植工具集:镜像、工具链及其他必备软件包
- 掌握JavaScript加密技术:客户端加密核心要点
- AWS环境下Java应用的构建与优化指南
- Grav插件动态调整上传图像大小提高性能
- InversifyJS示例应用:演示OOP与依赖注入
- Laravel与Workerman构建PHP WebSocket即时通讯解决方案
- 前端开发利器:SPRjs快速粘合JavaScript文件脚本
- Windows平台RNNoise演示及编译方法说明
- GitHub Action实现站点自动化部署到网格环境
- Delphi实现磁盘容量检测与柱状图展示
- 亲测可用的简易微信抽奖小程序源码分享
- 如何利用JD抢单助手提升秒杀成功率
- 快速部署WordPress:使用Docker和generator-docker-wordpress
- 探索多功能计算器:日志记录与数据转换能力
- WearableSensing: 使用Java连接Zephyr Bioharness数据到服务器