深入理解前端CSS:外部、内部与行内样式及选择器解析
需积分: 0 171 浏览量
更新于2024-08-03
收藏 9KB MD 举报
"前端三件套CSS学习笔记分享,涵盖了CSS的引用方式、选择器以及字体样式的详细讲解。"
在前端开发中,CSS(层叠样式表)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式语言,是构建网页界面美学的关键技术之一。这篇学习笔记主要讲解了CSS的三种引用方式、选择器的种类以及常见的字体样式设置。
首先,CSS的引用方式分为外部样式表、内部样式表和行内样式表:
1. **外部样式表**:CSS代码存储在单独的`.css`文件中,通过`<link>`标签在HTML文件的`<head>`部分引用,如:
```html
<link rel="stylesheet" type="text/css" href="文件路径"/>
```
这种方式有利于代码的组织和复用,减少代码重复。
2. **内部样式表**:将CSS代码放在HTML文件的`<head>`部分的`<style>`标签内,适用于整个页面统一的样式设定:
```html
<style type="text/css">
……
</style>
```
3. **行内样式表**:直接在HTML元素的`style`属性中定义CSS,适用于特定元素的独特样式:
```html
<元素 style="属性1:取值1; ……; 属性n:取值n;">
```
接下来,笔记详细介绍了CSS选择器,这是CSS中定位元素并应用样式的工具:
1. **元素选择器**:根据元素名称选取元素,如`p`选择所有的段落。
2. **ID选择器**:通过元素的`id`属性选取特定元素,如`#myId`选取id为`myId`的元素。
3. **类选择器**:利用元素的`class`属性选取一组元素,如`.myClass`选取所有class包含`myClass`的元素。
4. **后代选择器**:通过空格分隔,选取父元素内的子元素,如`div p`选取所有`div`元素内的`p`元素。
5. **群组选择器**:使用逗号分隔多个选择器,一次性定义多个元素的样式,如`h1, h2, h3`同时设置所有`h1`、`h2`和`h3`的样式。
最后,笔记还提到了一些基本的字体样式属性:
- **font-family**:定义字体类型,可以设置多个备选字体,如`font-family: "Arial", sans-serif;`
- **font-size**:设置字体大小,可以使用像素等单位,如`font-size: 16px;`
- **font-weight**:控制字体的粗细,取值范围从`100`到`900`,如`font-weight: bold;`(等于`700`)
- **font-style**:设置字体样式,如`italic`表示斜体。
这些基础知识构成了CSS的基础架构,掌握它们是成为合格前端开发者的关键步骤。通过深入理解和实践,可以更好地创建美观、响应式的网页设计。
2024-01-01 上传
2022-05-09 上传
2022-08-05 上传
点击了解资源详情
2019-08-22 上传
Super易
- 粉丝: 75
- 资源: 5
最新资源
- 开源通讯录备份系统项目,易于复刻与扩展
- 探索NX二次开发:UF_DRF_ask_id_symbol_geometry函数详解
- Vuex使用教程:详细资料包解析与实践
- 汉印A300蓝牙打印机安卓App开发教程与资源
- kkFileView 4.4.0-beta版:Windows下的解压缩文件预览器
- ChatGPT对战Bard:一场AI的深度测评与比较
- 稳定版MySQL连接Java的驱动包MySQL Connector/J 5.1.38发布
- Zabbix监控系统离线安装包下载指南
- JavaScript Promise代码解析与应用
- 基于JAVA和SQL的离散数学题库管理系统开发与应用
- 竞赛项目申报系统:SpringBoot与Vue.js结合毕业设计
- JAVA+SQL打造离散数学题库管理系统:源代码与文档全览
- C#代码实现装箱与转换的详细解析
- 利用ChatGPT深入了解行业的快速方法论
- C语言链表操作实战解析与代码示例
- 大学生选修选课系统设计与实现:源码及数据库架构