html之css基础

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端兼容了，我相信以后这个功能运用的也会很多。