html之css基础
作业地址：点击查看
1.css是什么
css简单的说就是我们的房屋装修，可以改变我们的房屋的外观，让页面更加的美观。对于不同的行业，叫法也不一样，在html中，我们叫做层叠样式表，它主要应用在文档中，就是html和xml样式可以改变这个文档的外观。
2.元素与元素框
在我们装修中，地板要放到地上，在我们网页当中，称为元素，元素就要放到我们的元素框中，就像地板要放到地板坑当中。
在装修中，要看所有地板的位置，就要划线，网页要查看所有元素生成的线（框），就要使用我们的代码
{outline: 1px dashed red}根据我们装修材料的提供者，可以将元素分为两种，一种是用户的，一种是装修公司的，那文档中也分为两种。
| 术语 | 描述 |
|---|---|
| 置换元素 | 元素框内容由外面的资源提供,元素框就是占位符<img>,<input>等 |
| 非置换元素 | 元素框里面的内容由用户提供，浏览器生成,如<p>,<span>等 |
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 |
网格元素 | 将网页化为网格，产生不用布局 |
4.css应用到 html 中
| 序号 | 属性值 | 描述 | 备注 | |
|---|---|---|---|---|
| 1 | link标签 |
<link rel="sylesheet" href="..." /> |
用在文档中引用外部样式 | |
| 2 | @import指令 |
@import url(...) |
@import '...' |
在文档或样式表中引用别的样式表 |
| 3 | <style>元素 |
<style>...</style> |
在文档头部添加内部样式 | |
| 4 | style=""属性 |
<tag style="..."> |
在标签内添加样式，为行内样式 |
外部css样式表文档，默认为
.css的扩展名
5.css文档的内容
5.1 样式规则
既然有了样式表就要有样式规范，来约束元素
- css 文档就必须有的：样式设置
- css 语法：
selector{property: value;…}`
| 组成 | 描述 | 解释 |
|---|---|---|
selector |
选择器，决定着文档中那部分收到影响 | 比如ul,li |
{property: value;...} |
声明块，由 “属性” 与 “属性值” 二部分组合 | 比如text-align:center |
5.2 厂商前缀
- 厂商前缀 ：是浏览器生产商经常使用的一种，它表示该规则未成为w3c的一部分
- 如果某个标准得到大家的广泛认可，就有可能被w3c认可
- 随着浏览器之间的差异逐渐小时，厂商前缀最终会走向灭亡
5.3 处理空白
- css也像html一样支持空白符，增强可读性
- css 中的多个空白符，在css 中会被当成一个空白符来看
- 空白符，只要能产生空白的都能用，比如回车，空格，tab
- 当属性值可有多个关键字时，必须使用空白符分开
5.4 css注释
- 单行注释通常用
/*----*/,多行也一样，不过中间不能放css代码，否则不能执行代码 - 注释可以写到样式规则外部,也可以写到内部
- 注释不允许像html那样嵌套
6.媒体查询
- 媒体查询:就是用相同的样式表将如何在不同媒体上呈现。可以显示在屏幕上，纸张，或听觉浏览器
6.2 使用场景
| 序号 | 场景 | 描述 |
|---|---|---|
| 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 |
幻灯片 | 用javascrip实现 |
多种媒体类型之间使用逗号分隔：
@media screen,print
6.4 媒体描述符
- 媒体类型通常搭配”媒体描述符”,调整显示大小，
- 媒体类型的语法和 css 差不多，都是用，”属性名：属性值”的方法
- 与 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: 根据屏幕设备的尺寸来设置相应的样式,通常用于移动端
总结
今天学习了css样式表与媒体类型，css样式表主要有四种应用方式，
| 位置 | 描述 |
|---|---|
| 标签行内 | 代码写在行内，只作用与这个标签，不能实现复用,尽量少用 |
| 头部 | 作用于整个页面，在写一些简单的页面，推荐使用，多页面不适用 |
| 外部 | 有单独的css文件，且css页面还可以引用别的css样式，写一些复杂的页面时，推荐使用，首选 |
媒体类型非常的好用，我们写完页面之后，不同的屏幕尺寸实现的效果不一样，我们就可以通过设置媒体类型，展示出来，这样把移动端和pc端兼容了，我相信以后这个功能运用的也会很多。