使用 CSS 重新做了下昨天的登录
![]()
1.什么是 CSS？
CSS 是“Cascading style sheets”的缩写（层叠样式表）。
CSS 可以影响一个或一组“文档”的表现样式
文档包括但不限于 HTML，还有 XML 等等
![]()
2.元素与元素框
页面中显示的所有内容称为“元素”
元素显示在元素框中。
元素分为两种
| 元素名 | 举例 | 描述 |
|---|---|---|
| 置换元素 | <img><input> | 元素框内容由外部资源提供 |
| 非置换元素 | <p></p><span></span> | 元素框内容是自己写进去的 |
![]()
3.元素的显示方式
![]()
3.1 元素类型
元素类型分为三种
块级元素
行内元素
行内块元素
| 类型 | 描述 |
|---|---|
| 块级元素 | 独占一行的元素，如<div></div> |
| 行内元素 | 非独占一行，由从左到右，从上到下的方式排列，如<a><span> |
| 行内块元素 | 与行内元素相同，但支持宽高 |
以上只是默认的元素类型
我们可以通过 CSS 的
display属性，可以改变他的元素类型
![]()
3.2 display 属性
每个元素都可以通过
style="display:属性值"改变他的元素类型display 常用属性值
| 属性值 | 描述 |
|---|---|
| inline 默认 | 行内元素 |
| biock | 块级元素 |
| inline-block | 行内块元素 |
| list-item | 块级：列表元素 |
| table | 块级：表格元素 |
| flex | 弹性元素 |
| grid | 网格元素 |
![]()
4.CSS 如何应用到 HTML 上？
四种方式
| 序号 | 方式 | 描述 | 备注 |
|---|---|---|---|
| 01 | link标签 | <link rel="stylesheet" href="CSS地址" | 外部样式 |
| 02 | @import指令 | @import:url(..)或者@import "..." | 外部样式 |
| 03 | <style></style>元素 | <style>....</style> | 内部样式 |
| 04 | style=""属性 | style="..." | 行内样式 |
注意：外部 CSS 样式表的扩展名为
.css
![]()
5. css 文档的内容
![]()
5.1 样式规则
css 文档中必不可少的内容就是: 样式规则
css 语法:
selector {property: value;...}
| 组成 | 描述 |
|---|---|
selector | 选择符,或者称”选择器”,决定文档中哪部分受到影响 |
{property: value;...} | 声明块,由 “属性” 与 “属性值” 二部分组成 |
简单说就是你想给什么标签添加样式。选择符就写该标签名或类名，如
<head> <style> div { width: 800px; } /*规定当前页所有div标签的宽度为800px*/ .nav { width: 300px; } /*规定当前页所有类名为nav的标签宽度为300px*/ </style></head><body> <div></div> <!--此时它的宽度为800px--> <header class="nav"></header> <!--此时他的类名为nav，他的宽度为300px--></body>![]()
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和notand表示多个”媒体描述符”必须同时满足,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: 设备分辨率的最大宽度,通常用于移动端
![]()
7. 总结
单一的HTML文档，阅读体验不佳，使用css给html中的元素一些样式，可以使html文档更美观。
课内重点1：媒体查询 他可以使同一个html在不同的设备中显示不同的样式。更有利于pc与移动端的显示
课内重点2：使用display属性可以改变元素的元素类型
课内重点3：CSS应用到HTML的四种方式，
<link type="stylesheet" href=""
href中写入css外部地址<style>/*这里写样式*/</style>@import "外部css地址 "
此指令可以写入外部css文件中，亦可写入<style></style>标签中style="样式"
行内样式，写入起始标签中
