CSS 的使用方式
1、内联式
- 将CSS的内容定义在单独的HTML元素中
- 语法：<div style=“样式声明”></div>
样式声明
- 1、每个样式声明都是由键值对组成 （属性名：值）
- 2、一个style中可以有多个样式声明，每个样式声明之间使用分号（；）隔开
常用属性和值
| 属性 | 值 | 说明 |
|---|
| font-size | 数字 | 设置文字大小，以px为单位 |
| color | 颜色英文单词 | 设置文字颜色 |
| background-color | 颜色英文单词 | 设置背景颜色 |
<body>
<div style="font-size: 24px;color: red;background-color: grey">
静夜思
</div>
</body>
2、内部样式表
- 作用：让定义好的样式适用在多个元素中
- 语法：在<head></head>中
<head>
<style>
样式规则1
样式规则2
...
</style>
<head>
- 样式规则：由 选择器 和 样式声明 组成
- 选择器：规范了页面中哪些元素可以使用声明好的样式
- 语法：选择器 { 样式声明1 ; 样式声明2 ; …}
<style>
div{
font-size: 24px;color: red;background-color: grey
}
</style>
3、外部样式表
- 作用：让声明好的样式能够在多个网页中使用
- 用法：将样式规则声明定义在独立的CSS文件中（***.css），在使用的网页上对CSS文件进行引用
<head>
<link rel="stylesheet" href="***.css">
</head>
CSS 样式表的特征
1、继承性
2、层叠性
- 可以为一个元素定义多种使用方式（内联，内部样式表，外部样式表），如果定义的属性不冲突的话，那么所有的属性都可以应用到元素上
3、优先级
- 如果样式属性声明冲突的情况下，则按照不同的优先级来应用
| 使用方式 | 优先级 |
|---|
| 浏览器缺省设置 | 低 |
| 内部或外部样式表 | 中（就近原则：后定义优先） |
| 内联方式 | 高 |
本文介绍了CSS的使用方式，包括内联式、内部样式表和外部样式表，说明了各自的语法、作用和用法。同时阐述了CSS样式表的特征，如继承性、层叠性和优先级，帮助读者了解如何在网页中正确应用CSS样式。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
