css 与元素
- css ：全称层叠样式表，用于影响一个或一组文档的表现样式
- 元素：页面中显示的内容称为元素
- 元素框：每一个元素存在于浏览器为它生成的元素框中
- 元素根据元素框中的内容可以分为两类：
| 类型 | 内容 | 举例 |
|---|---|---|
| 置换元素 | 元素框内容由外部资源提供 | <img> <input>... |
| 非置换元素 | 元素框内容由用户提供，浏览器生成 | <p> <h1> <span>... |
- 元素根据类型可以分为三种：
| 种类 | 特征 | 举例 |
|---|---|---|
| 行内元素 | 默认在一行文本内生成元素框,不打断所在行 | <span> <a> |
| 块级元素 | 默认生成一个填满父级内容区的元素框,且二侧不能有其它元素 | <p> <div> |
| 行内块元素 | 默认在一行文本内生成元素框,不打断所在行,但支持宽高 | <img> |
元素类型转换
- 元素类型的转换方式：在元素标签中使用 display 属性，如
<span style="display:block">
常用的 display 属性值
| 值 | 含义 |
|---|---|
| block | 块级元素 |
| inline | 行内元素 |
| inline-block | 行内块元素 |
| list-item | 列表元素(块级) |
| table | 表格元素(块级) |
| flex | 弹性元素 |
| grid | 网格元素 |
元素与元素类型转换代码示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>元素与转换</title><style>* {outline: 1px dashed red;}</style></head><body><!-- 非置换元素是双标签 --><p>p标签是一个非置换元素(双标签)</p><!-- 置换元素单双标签都有 --><a href="demo1.html">a标签是一个置换元素(双标签)</a><img src="img/1.png" /><hr /><!-- 行内元素不能设置宽高，与其他元素共存于一行块级元素和行内块元素能设置宽高，区别在于能否与其他元素共存一行 --><h1>h1标签定义的是一个块元素</h1><span>span定义的行内元素会跳转到下一行</span><!-- img是一个行内块元素，可以设置宽高，与span共存于一行 --><img src="img/2.jpg" style="width: 150px;" /><hr /><!-- 使用display属性转换元素类型 span转化为块级 p转化为行内块 --><span style="display: block;">span转化为块级元素</span><span>这是一个行内元素</span><p style="display: inline-block; height: 100px;">p转化为行内块元素</p></body></html>
css 在 html 文档中的使用方法
html 文档中导入 css 样式有四方法：
| 方法 | 使用 |
| —————————- | ——————————————————————- |
| import 导入外部样式 | @import 'demo.css'或@import url(demo.css) |
| link 导入外部样式 | <link rel="stylesheet" href="demo.css"/>> |
| 内部样式 | 使用<style>...</style>定义的样式 |
| 内联样式 | 写在标签内部<tag style="xxx"> |
css 样式规则
- css 的样式规则：
selector {property: value;...}
| 选择器 | 使用方法 |
|---|---|
| 标签选择器 | p{color:red; } |
| 类选择器 | .class{padding: 0;} |
| id 选择器 | #id{border: 1px;} |
css 样式规则与使用方法代码示例
/* css1 *//* 导入外部样式 */@import "2.css";ul {border: 1px solid black;padding: 10px 25px 10px;background: #b9ffff;}ul > li {color: blueviolet;}
/* css2 */h2 {color: #ff0000;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>css样式规则与使用方法</title><!-- 外部样式 --><link rel="stylesheet" href="css/1.css" /><!-- 内部样式 --><style>ul :first-child {font-size: 1.5rem;}</style></head><body><h2>css样式规则与使用方法</h2><ul><!-- 使用内联样式 --><li style="color: royalblue;">标签选择器 p{color:red; }</li><li style="color: sandybrown;">类选择器 .class{padding: 0;}</li><li style="color: springgreen;">id 选择器 #id{border: 1px;}</li></ul></body></html>
厂商前缀
厂商前缀：各浏览器厂商用来测试专属规则的,具有实验性和先进性
得到用户广泛认可的厂商前缀规则, 是有可能进入 W3C 标准的
- 随着浏览器之间的差异逐渐消失, 厂商前缀最终会走向消亡
常用厂商前缀:
| 序号 | 前缀 | 描述 |
|---|---|---|
| 1 | -moz- |
基于Mozilla的浏览器,如FireFox(火狐) |
| 2 | -ms- |
基于微软Internet Explorer的浏览器 |
| 3 | -o- |
基于Opera(欧朋)的浏览器 |
| 4 | -webkit- |
基于WebKit内核的浏览器,如Chrome,Safari |
| 5 | -epub- |
基于国际数字出版论坛制定的格式 |
空白符
- html 中的空白符
- 与 html 文档类似, css 也支持使用空白符来格式化文档,增强可读性
- css 中的多个空白符, 会全部合并成一个空白符显示
- 空白符,可以由空格, 制表符, 换行符生成
- 当属性值可有多个关键字时, 必须使用空白符分开
css 注释
- 单行/多行:
/* 注释内容 */ - 注释可以写到样式规则外部,也可以写到内部
- 注释不允许嵌套
媒体查询
- 媒体查询: 设置浏览器使用指定的样式表的媒体
使用场景
| 序号 | 场景 | 描述 |
|---|---|---|
| 1 | <link> |
<link media="screen,print"> |
| 1 | <style> |
<style media="screen,print"> |
| 1 | @import |
@import url(...) screen,print; |
| 1 | @media |
@media screen,print {...} |
媒体类型
媒体类型是不同媒体的标识符
| 序号 | 类型 | 描述 |
|---|---|---|
| 1 | all |
所有媒体类型,即不限制 |
| 2 | print |
打印机,预打印预览使用 |
| 3 | screen |
屏幕,如浏览器等用户代理 |
| 4 | projection |
幻灯片 |
多种媒体类型之间使用逗号分隔: @media screen, print
媒体描述符
- 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
- 媒体描述符的语法与 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: 设备分辨率的最大宽度,通常用于移动端
媒体查询代码示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>媒体查询</title><style>.nav {height: 50px;background-color: #eee;display: flex;align-items: center;}.nav ul {display: flex;list-style: none;}.nav ul a {color: #666;text-decoration: none;padding: 0 15px;}body {background-color: #ffff80;}@media screen and (max-width: 600px) and (min-width: 400px) {body {background-color: #59ffff;}}@media screen and (max-width: 400px) {.nav > ul {display: none;}}</style></head><body><div class="nav"><div class="log">LOGO</div><ul><li><a href="">首页</a><a href="">视频</a><a href="">问答</a><a href="">下载</a></li></ul></div><h1>这是一个媒体查询案例，在页面宽度为400px，600px时背景色发生变化,导航菜单在宽度小于400px时消失</h1></body></html>