作业链接：http://test.fmlove.top/zuoye/
css 是什么
-就是网页的皮肤
元素框
-网页中每个被叠起来的块就是元素框，框里面的东西就是元素
-元素分为两大类 置换元素和非置换元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><p>这是非内元素</p><span>这是非内元素</span><a href="">这是置换元素</a><img src="" alt="我也是置换元素"></body></html>
display 属性
-dinslpay 有7个属性值
| 序号 | 属性值 | 描述 |
|---|---|---|
| 1 | inline默认 |
行内元素,<span>, <a> |
| 2 | block |
块级元素,<div>,<p> |
| 3 | inline-block |
行内块级元素,<img> |
| 4 | list-item |
块级: 列表元素,<li> |
| 5 | table |
块级: 表格元素,<table> |
| 6 | flex |
弹性元素 |
| 7 | grid |
网格元素 |
| 8 | none |
还有个none 是不显示 |
css的引入方式
-css的四种引入方式
| 序号 | 属性值 | 描述 | 备注 |
|---|---|---|---|
| 1 | link标签 |
<link rel="stylesheet" href="..." /> |
外部样式 |
| 3 | @import指令 |
@import url(...) , @import '...' |
外部样式 |
| 2 | <style>元素 |
<style>...</style> |
内部样式 |
| 4 | style=""属性 |
<tag style="..."> |
行内样式 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--第一种--><link rel="stylesheet" href="./css.css"><!--第二种--><style>/*第三种*/@import "./css.css";/* 将style1.css复制到这个位置 */h2 {color: green;}</style></head><body><div><!--第四种--><h2 style="color: red;">你猜猜</h2><ul><li>我的</li><li>你的</li><li>她的</li></ul></div></body></html>
css注释
- 单行/多行:
/* 注释内容 */媒体查询
- 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
- 媒体描述符的语法与 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 |
设备显示区域最大高度 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css.css"><style>@media screen and (max-width: 500px){body{background: red} .show{color: gold;display: block}.heidn{display: none} }@media screen and (min-width: 500px){ body{background: #666666} .heidn{color: aqua;display: block} .show{display: none} }</style></head><body><div><h1 class="show">小于500px 我就显示了 我的背景变红了 </h1><h1 class="heidn">大于500px 我就显示了 我的背景变灰了 </h1></div></body></html>