# css 与 html 文档
[toc]
## 1. css 是什么
| 序号 | 术语 | 描述 |
| ---- | ---- | ---------------------------------------- |
| 1 | css | `Cascading Style Sheets`缩写(层叠样式表) |
| 2 | 样式 | css 可以影响一个或一组"文档"的表现样式 |
| 3 | 文档 | 包括但不限于 html,也包括 xml(暂不讨论) |
---
## 2. 元素与元素框
- 页面中显示的内容称为**元素**, 元素显示在浏览器为期生成的**元素框**中
- 查看页面中所有元素生成的"框": `* {outline: 1px dashed red}`
- 根据元素框中的内容提供者, 可将元素分为二大类:
| 序号 | 术语 | 描述 |
| ---- | ---------- | ------------------------------------------------------------ |
| 1 | 置换元素 | 元素框内容由外部资源提供,元素框就是占位符`<img>`,`<input>`.. |
| 2 | 非置换元素 | 元素框内容用户提供,浏览器生成,如`<p>`,`<span>`... |
---
## 3. 元素的显示方式
### 3.1 元素类型
| 序号 | 类型 | 描述 |
| ---- | -------- | -------------------------------------------------------------------------- |
| 1 | 块级元素 | 默认生成一个填满父级内容区的元素框,且二侧不能有其它元素,如`<div>`,`<p>`... |
| 2 | 行内元素 | 默认在一行文本内生成元素框,不打断所在行,如`<a>`,`<span>`... |
| 3 | 行内块元素 | 默认在一行文本内生成元素框,不打断所在行,但支持宽高,如``... |
> 浏览器根据元素类型生成不同的元素框: "块级元素框" 和 "行内元素框"
### 3.2 display 属性
- 每个元素都可以通过`style="display:type`控制它的显示类型,即生成什么样的"元素框"
- `display`属性常用值
| 序号 | 属性值 | 描述 |
| ---- | ------------ | ------------------------ |
| 1 | `inline`默认 | 行内元素,`<span>`, `<a>` |
| 2 | `block` | 块级元素,`<div>`,`<p>` |
| 3 | `inline-block` | 行内块级元素,`` |
| 3 | `list-item` | 块级: 列表元素,`<li>` |
| 4 | `table` | 块级: 表格元素,`<table>` |
| 5 | `flex` | 弹性元素 |
| 6 | `grid` | 网格元素 |
---
## 4. css 应用到 html 上
| 序号 | 属性值 | 描述 | 备注 |
| ---- | -------------- | -------------------------------------- | -------- |
| 1 | `link`标签 | `<link rel="stylesheet" href="..." />` | 外部样式 |
| 3 | `@import`指令 | `@import url(...) | @import '...'` | 外部样式 |
| 2 | `<style>`元素 | `<style>...</style>` | 内部样式 |
| 4 | `style=""`属性 | `<tag style="...">` | 行同样式 |
> 外部 css 样式表文档,默认扩展名为: `.css`
- `demo1.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css应用到html文档</title>
<link rel="stylesheet" href="style/style1.css" />
<style>
/* 可以使用@import url()指令 */
@import "style/style3.css";
strong {
color: green;
}
</style>
</head>
<body>
<h2>PHP中文网第11期培训班</h2>
<ul>
<li><strong style="color: coral;">前端基础:</strong><a href=""> html5/css3 + flex/grid</a></li>
<li><strong>PHP开发:</strong><a href=""> php + pdo + mvc + composer</a></li>
<li><strong>前端进阶:</strong><a href="">javascript + jquery + layui</a></li>
<li><strong style="color:violet">Laravel开发:</strong><a href="">laravel基础与项目实战</a></li>
</ul>
</body>
</html>
```
- `style/style1.css`
```css
/*@import指令必须写在第一行*/
/* 语法1: */
/* @import url(style2.css); */
/* 语法2: */
@import "style2.css";
h2 {
color: green;
}
```
- `style/style2.css`
```css
ul {
border: 1px solid #ccc;
background-color: #efefef;
padding: 15px 30px 15px;
}
ul > li {
margin: 10px;
}
```
- `style/style3.css`
```css
a {
color: green;
text-decoration: none;
}
a:hover {
color: coral;
}
```
---
## 5. css 文档的内容
### 5.1 样式规则
- css 文档中必不可少的内容就是: 样式规则
- css 语法:`selector {property: value;...}`
| 组成 | 描述 |
| ----------------------- | ---------------------------------------------- |
| `selector` | 选择符,或者称"选择器",决定文档中哪部分受到影响 |
| `{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 声明中的语法
一个样式表中,可以有多个`@media`
```css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>媒体查询</title>
<style>
h1 {
color: green;
}
body {
background-color: cyan;
}
/* 该样式在媒体宽度大小于500px时有效 */
@media screen and (min-width: 500px) {
h1 {
color: red;
}
body {
background-color: wheat;
}
}
</style>
</head>
<body>
<h1>Hello, 欢迎来学习我的课程</h1>
</body>
</html>
```
> 根据这个规则, 其实在任何一个 css 文档内容都可以放在`@media all {...}`内
### 6.3 媒体类型
媒体类型是不同媒体的标识符
| 序号 | 类型 | 描述 |
| ---- | ------------ | ----------------------- |
| 1 | `all` | 所有媒体类型,即不限制 |
| 2 | `print` | 打印机,预打印预览使用 |
| 3 | `screen` | 屏幕,如浏览器等用户代理 |
| 4 | `projection` | 幻灯片 |
> 多种媒体类型之间使用逗号分隔: `@media screen, print`
### 6.4 媒体描述符
- 媒体类型通常会添加"媒体描述符"进行精准限制,例如设置媒体尺寸,分辨率等
- 媒体描述符的语法与 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`: 设备分辨率的最大宽度,通常用于移动端
```html
<!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;
}
/* 局部使用媒体查询: 当屏幕宽度小于400px就不要显示菜单了 */
@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></li>
<li><a href="">视频</a></li>
<li><a href="">问答</a></li>
<li><a href="">下载</a></li>
</ul>
</div>
</body>
</html>
```
- 教学大纲
- HTML5基础
- 1-html基础知识
- 2-语义化结构元素
- 3-语义化文本元素
- 4-链接/列表/图像元素
- 5-表格元素
- 6-表单与控件元素[重点]
- CSS3基础
- 1-css与html文档
- 2-css选择器
- 3-细说盒模型
- Flex布局[精简版]
- 1-Flex概论
- 2-Flex布局是什么
- 3-Flex基本概念
- 4-Flex容器属性
- 5-Flex项目属性
- Flex布局[细说版]
- 1-flex 布局概述
- 2-flex 容器与项目
- 3-flex 容器主轴方向
- 4-flex 容器主轴项目换行
- 5-flex 容器主轴与项目换行简写
- 6-flex 容器主轴项目对齐
- 7-flex 容器交叉轴项目对齐
- 8-flex 多行容器交叉轴项目对齐
- 9-flex 项目主轴排列顺序
- 10-flex 项目交叉轴单独对齐
- 11-flex 项目放大因子
- 12-flex 项目收缩因子
- 13-flex 项目计算尺寸
- 14-flex 项目缩放的简写
- Flex布局[案例版]
- 1-调整项目顺序
- Grid布局[精简版]
- 1. 常用术语
- 2. 容器属性
- 3. 项目属性
- 4. 布局实例
- 1. 经典三列布局
- 2. 媒体查询
- Grid布局[细说版]
- 1-必知术语
- 2-容器创建与行列划分
- 3-单元格常用单位
- 4-项目填充到单元格
- 5-项目填充到网格区域
- 6-对齐容器中的所有项目
- 7-对齐单元格中所有项目
- 8-对齐单元格中某个项目
- 9-容器中行与列之间的间距