css 概念,如何与 HTML 文档结合
演示地址:https://php520.vip
1. css 概念
序号 | 术语 | 描述 | 备注 |
---|---|---|---|
1 | css | Cascading Style Sheets 缩写(层叠样式表) |
概念 |
2 | 样式 | css 可以影响一个或一组”HTML 文档”的表现样式 | 作用 |
3 | 文档 | 包括但不限于 html,也包括 xml(暂不讨论) | 用途 |
层叠和代码解释顺序有关,解释是从上到下的解释规则,新的样式会覆盖旧的样式
HTML 是用来写网页结构的,CSS 就是用来修饰这个结构的,对网页的结构进行描述的
XML 没有属性的,同样使用标签,元素来表示数据的,但是已经被 Jason 替代了
2. 元素与元素框
- HTML 页面中显示的所有内容称为元素, 元素显示在浏览器为它生成的元素框中
- 查看页面中所有元素生成的”框”:
* {outline: 1px dashed red}
- 根据元素框中的内容提供者, 可将元素分为二大类:
序号 | 术语 | 描述 |
---|---|---|
1 | 置换元素 | 元素框内容由外部资源提供,元素框就是占位符<img> ,<input> .. |
2 | 非置换元素 | 元素框内容用户提供,浏览器生成,如<p> ,<span> … |
非置换元素肯定是双标签
置换元素由于历史原因,也存在双标签,例如<video>...</video>
,<script>...</script>
只要是元素中的内容,是通过元素中的属性来导入的就肯定是置换元素
3. 元素的显示方式
3.1 元素类型
序号 | 类型 | 描述 |
---|---|---|
1 | 块级元素 | 默认生成一个填满父级内容区的元素框,且二侧不能有其它元素,如<div> ,<p> … |
2 | 行内元素 | 默认在一行文本内生成元素框,不打断所在行,如<a> ,<span> … |
3 | 行内块元素 | 默认在一行文本内生成元素框,不打断所在行,但支持宽高,如<img> … |
浏览器根据元素类型生成不同的元素框: “块级元素框” 和 “行内元素框”
行内元素有两种,一种是非置换元素,通常不能设置宽高,大小
另一种置换元素,既通过属性引入外部资源内容,例如图片,视频等等,这类可以设置大小,宽高
块级元素是可以设置宽和高的,行内元素是不可以设置宽和高的,但是行内的块级元素可以设置宽高
3.2 display 属性
- 每个元素都可以通过
style="display:type
控制它的显示类型(自定义),即生成什么样的”元素框” display
属性常用值
序号 | 属性值 | 描述 |
---|---|---|
1 | inline 默认 |
行内元素,<span> , <a> |
2 | block |
块级元素,<div> ,<p> |
3 | inline-block |
行内块级元素,<img> |
4 | list-item |
块级: 列表元素,<li> |
5 | table |
块级: 表格元素,<table> |
6 | flex |
弹性元素 |
7 | grid |
网格元素 |
任何一个元素默认是行内元素
flex 把所有元素变成弹性元素,也就是块级变行内
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
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 中的多个空白符, 会全部合并成一个空白符显示
- 空白符,可以由空格, 制表符, 换行符生成
- 当属性值可有多个关键字时, 必须使用空白符分开
- 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.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
: 设备分辨率的最大宽度,通常用于移动端