1）css 是什么
- CSS是层叠式样式表，通过css可以定义一些标签的属性，展示在浏览端就是样式；
- CSS可以应用到各类网页中，html,php,asp等；
2）元素和元素框
- 网页中显示的内容都是元素，每一个元素都有一个框，
- 一般元素框都有默认为none;
根据元素显示的类型，我们把元素分为两类，
| 类形 | 说明 | 例子 |
|---|---|---|
| 非置换无素 | 元素框内就是内容，通过浏览器显示,一般如文字，链接，色块 | <p>这是内容</p> |
| 置换元素 | 元素框只是占位符，真实内容由外部导入如图片、视频、style,script, | <img>,<iput> |
3) display属性
通过dispay来显示元素框的内容形式
display属性主有有
| 序号 | 属性值 | 描述 |
| —— | ——————— | ———————————— |
| 1 | inline默认 | 行内元素,<span>, <a> |
| 2 | block | 块级元素,<div>,<p> |
| 3 | inline-block | 行内块级元素,<img> |
| 4 | list-item | 块级: 列表元素,<li> |
| 5 | table | 块级: 表格元素,<table> |
| 6 | flex | 弹性元素 |
| 7 | grid | 网格元素 |
4）应用CSS 的方式
- 应用CSS的四种方式
~~~ html - 引用css文件，一个文件可以引用多个CSS，一个CSS也可以被多个文件引用，
格式<style rel="csssheet" href="style.css"> - 在css文件中导入，必须写在第一行： @import “style.css” @import url(style.css’)
- 文件内部应用 ：只对本文件有效，（这里也可以导入外部文件，但必需在第一行；）<style>h2{border:0px;}</style>
- 直接对某一个元素进行定义，对元素的属性进行定义：<div style="border:0px;">block</div>
~~~
5）CSS的内容
5.1） CSS的规则
- css 文档中必不可少的内容就是: 样式规则
- css 语法:`selector {property: value;…}
如：h2{color:red;size:14px;}
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.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: 设备分辨率的最大宽度,通常用于移动端