1、CSS 是什么
- CSS 是英文
Cascading Style Sheets的缩写 - CSS 可以影响
html中元素的样式,让页面更加美观，但不仅限于 html
2、元素和元素框
- 网页页面中显示的内容称之为元素，元素显示在浏览器为其生成的元素框中，也就是每个元素都有一个对应的元素框。
- 元素框默认是不显示的，可以用
* {outline: 1px dashed red}将其显示出来 元素可以分为两大类：1.置换元素；2.非置换元素；
- 置换元素：元素框的内容由外部提供，通常为单标签，单不局限于单标签；
- 非置换元素：元素框内容由用户或浏览器提供，如
<p></p>,<span></span>等双标签；
3、元素的显示方式
元素的类型
- 块级元素：独占一行
- 行内元素：在一行中独占一块，可与其他元素并排
- 行内块元素：在一行中独占一块，可与其他元素并排，可设置宽高
display 属性
1.每个元素都可以通过
style="display:值"来控制显示类型
|属性值|描述|
|-|-|
|inline|默认值|
|block|块级元素|
|inline-block|行内块级元素|
|list-item|块级列表元素|
|table|块级表格元素|
|flex|弹性元素|
|grid|网格元素|
4、在 html 中引入 css
- link 引入外部 css 文件; 示例：
<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 内部样式；一般写在头部
- style=“…” 行内样式；直接用于标签中：
<p style="color: coral;">你好啊</p>
5、媒体查询
- 设置浏览器使用指定样式表的媒体
媒体查询的使用场景
|场景|描述/示例|
|-|-|
|<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| 设备显示区域最大高度 |
6、利用本节课程学习写代码
<!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>
7、总结
- css 是非常重要的，可以把网页做的非常好看
- CSS 最好做单独的 CSS 文件引入使用，方便管理样式