![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：表格显示不对, 你没有发现吗
Collection
Collection
Cascading Style Sheets的缩写html中元素的样式,让页面更加美观，但不仅限于 html* {outline: 1px dashed red} 将其显示出来元素可以分为两大类：1.置换元素；2.非置换元素；
<p></p>,<span></span>等双标签；元素的类型
display 属性
1.每个元素都可以通过style="display:值"来控制显示类型
|属性值|描述|
|-|-|
|inline|默认值|
|block|块级元素|
|inline-block|行内块级元素|
|list-item|块级列表元素|
|table|块级表格元素|
|flex|弹性元素|
|grid|网格元素|
<link rel="stylesheet" href="css/style.css">@import 引入外部 css 文件；
1、在 html 中引用：<style type="text/css">@import url(css/style.css);</style>
2、在 css 文件中引用：@import url(css/style.css);
style 内部样式；一般写在头部
<p style="color: coral;">你好啊</p>媒体查询的使用场景
|场景|描述/示例|
|-|-|
|<link>|<link media="screen,print">|
|<style>|<style media="screen,print">|
|@import|@import url(...) screen,print;|
|@media|@media screen,print {...}|
媒体类型；多种媒体之间用逗号分隔
|类型|描述|
|-|-|
|all|全部类型|
|print|打印机|
|screen|屏幕，如浏览器等用户代理|
|projection|幻灯片|
媒体描述符
| 序号 | 媒体描述符 | 描述 |
| —— | —————————- | —————————— |
| 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 | 设备显示区域最大高度 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>h2 {background-color: gold;color: indigo;}@media screen and (max-width: 500px) {h2 {background-color: indigo;color: gold;}a {display: none;}}</style></head><body><header><h2>LOGO</h2><a href="">首页</a><a href="">教程</a><a href="">个人中心</a></header></body></html>