CSS 初体验
css 案例演示
1. css 是什么
| 序号 |
术语 |
描述 |
| 1 |
css |
Cascading Style Sheets缩写(层叠样式表) |
| 2 |
样式 |
css 可以影响一个或一组”文档”的表现样式 |
| 3 |
文档 |
包括但不限于 html,也包括 xml |
2. 元素与元素框
- 网页中显示的内容称为“元素”，元素显示在浏览器为它生成的“元素框”中。
- 查看页面中的所有元素“框”：
*{outline:1px dashed red}。 - 根据元素框中的内容来源，可将元素分为两大类：
| 序号 |
术语 |
描述 |
| 1 |
置换元素 |
所占元素框的内容从外部资源引入 |
| 2 |
非置换元素 |
元素框的内容直接写入 |
3. 元素的显示方式
3.1 元素类型
| 序号 |
术语 |
描述 |
| 1 |
块级元素 |
默认会生成填满父级的元素框，且两侧不能有其它元素 |
| 2 |
行内元素 |
默认多个行内元素排列在一行 |
| 3 |
行内块元素 |
可以多个排列一行内，但是支持宽高属性 |
3.2 display 属性
- 每个元素都可以通过样式
style="display:tyoe"控制它的显示类型，即生成什么类型的元素框。 display属性常用值：
| 序号 |
属性值 |
描述 |
| 1 |
inline默认 |
行内元素 |
| 2 |
block |
块级元素 |
| 3 |
inline-block |
行内块级元素 |
| 4 |
list-item |
块级: 列表元素 |
| 5 |
table |
块级: 表格元素<table> |
| 6 |
flex |
弹性元素 |
| 7 |
grid |
网格元素 |
4. css 应用到 html 上
| 序号 |
属性值 |
描述 |
备注 |
| 1 |
link标签 |
<link rel="stylesheet" href="..." /> |
引用外部样式文件 |
| 2 |
@import指令 |
@import url(...) / @import '...' |
导入外部样式文件 |
| 3 |
<style>元素 |
<style>...</style> |
写在 html 文档内部 |
| 4 |
style=""属性 |
<tag style="..."> |
写在标签的属性上 |
css 样式表文档,默认扩展名为: .css
5. css 文档的内容
5.1 样式规则
- css 文档的主要内容就是“样式规则”。
- css 语法：
selector{property:value;...}
| 序号 |
内容 |
说明 |
| 1 |
selector |
选择符或称选择器，决定页面中哪些元素受影响 |
| 2 |
{property:value;...} |
设置样式。由属性和值组成 |
5.2 厂商前缀
- 厂商前缀: 各浏览器厂商用来测试专属规则的,具有实验性和先进性
- 得到用户广泛认可的厂商前缀规则, 是有可能进入 W3C 标准的
- 随着浏览器之间的差异逐渐消失, 厂商前缀最终会走向消亡
常用厂商前缀:
| 序号 |
前缀 |
描述 |
| 1 |
-moz- |
基于Mozilla的浏览器,如FireFox(火狐) |
| 2 |
-ms- |
基于微软Internet Explorer的浏览器 |
| 3 |
-o- |
基于Opera(欧朋)的浏览器 |
| 4 |
-webkit- |
基于WebKit内核的浏览器,如Chrome,Safari |
| 5 |
-epub- |
基于国际数字出版论坛制定的格式 |
5.3 处理空白
- 与 html 文档类似, css 也支持使用空白符来格式化文档,增强可读性
- css 中的多个空白符, 会全部合并成一个空白符显示
- 空白符,可以由空格, 制表符, 换行符生成
- 当属性值可有多个关键字时, 使用空白符分开
5.4 css 注释
- 单行/多行:
/* 注释内容 */ - 注释可以写到样式规则外部,也可以写到内部
- 注释不允许嵌套
6 媒体查询
- 媒体查询：设置浏览器使用指定的样式表，不同媒体使用不同的样式
6.1 使用场景
| 序号 |
场景 |
描述 |
| 1 |
<link> |
<link media="screen,print"> |
| 1 |
<style> |
<style media="screen,print"> |
| 1 |
@import |
@import url(...) screen,print; |
| 1 |
@media |
@media screen,print {...} |
6.2 媒体类型
媒体类型是不同媒体的标识符
| 序号 |
类型 |
描述 |
| 1 |
all |
所有媒体类型,即不限制 |
| 2 |
print |
打印机,预打印预览使用 |
| 3 |
screen |
屏幕,如浏览器等用户代理 |
| 4 |
projection |
幻灯片 |
多种媒体类型之间使用逗号分隔: @media screen, print
6.3 媒体描述符
- 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
- 媒体描述符的语法与 css 样式声明非常类似,如
min-width: 500px - 与 css 声明的不同之处在于,媒体描述符允许没有值,如
print and (color) - 多个 “媒体描述符” 之间使用 “逻辑关键字” 连接, 如
and 和 not and表示多个”媒体描述符”必须同时满足, not则是整个查询取反,且必须写在and前面
常用 “媒体描述符”(显示区域相关)：
| 序号 |
媒体描述符 |
描述 |
| 1 |
width |
显示区域宽度 |
| 2 |
min-width |
显示区域最小宽度 |
| 3 |
max-width |
显示区域最大宽度 |
| 4 |
device-width |
设备显示区域宽度 |
| 5 |
min-device-width |
设备显示区域最小宽度 |
| 6 |
max-device-width |
设备显示区域最大宽度 |
| 7 |
height |
显示区域高度 |
| 8 |
min-height |
显示区域最小高度 |
| 9 |
max-height |
显示区域最大高度 |
| 10 |
device-height |
设备显示区域高度 |
| 11 |
min-device-height |
设备显示区域最小高度 |
| 12 |
max-device-height |
设备显示区域最大高度 |
max-width与max-device-width区别:
max-width: 浏览器显示区域宽度,与设备无关,通常用于 PC 端
max-device-width: 设备分辨率的最大宽度,通常用于移动端
