本文详细介绍了CSS的基础知识，包括CSS的定义、元素分类（置换元素与非置换元素）、元素类型（块级、行内和行内块元素）以及如何通过display属性改变元素类型。此外，还讲解了CSS在HTML中的应用方法，如link标签、内部样式和行内样式。还探讨了CSS的注释、媒体查询的使用，包括不同媒体类型和媒体描述符，以实现响应式设计。最后，提到了厂商前缀的重要性和其在CSS标准演进中的角色。
css是什么(1)css为Cascading style sheets的缩写
(2)在样式方面，css可以影响一个或一组“文档”的表现样式
(3)在文档方面，包括但不限于html
2. 元素与元素框(1)页面中显示的内容称为元素，元素显示在浏览器为它生成的元素框中
(2)查看页面中所有元素生成的元素框，可用*{outline:1px dashed(solid) red}进行查看
(3)元素可分为两大类：序号术语描述1置换元素内容由外部提供。例：
2非置换元素内容由用户提供，用浏览器生成
3. 元素的显示方式
3.1 元素类型元素类型分为三种：
(1)块级元素：独占一行，而且两边没有其他元素。例：
(2)行内元素：在一行中占一块地方，两边可有其他元素存在。例：
(3)内行快元素：在一行中占一块地方，两边可有其他元素存在，可支持宽高。例：
注：浏览器根据元素类型而生成不同类型的元素框：“块级元素框”和“行内元素框”
3.2 display属性(1)每个元素都可以通过style="display:type"来控制它的显示类型
(2)display属性常用值：序号属性值描述1inline(默认)行内元素
2block块级元素
3inline-block行内块级元素
4list-item块级：列表元素
5table块级：表格元素
6flex弹性元素
7grid网格元素
例：
hello world
hello world
hello world
4. 把css应用到html上(重点)序号属性格式备注1link(标签)外部样式
2外部样式
3内部样式
4style=".."(属性)
注：外部css样式表文档，扩展名为 .css
例：(1)
(2)@import "zuo.css";
(3)
(4)
5. css文档的内容
5.1 样式规则css文档中必不可少的内容就是：样式规则
css语法：selectoe{property:value;..}
样式规则有两部分组成：
(1)selector：选择符，或者成为“选择器”，决定文档中哪部分受到影响
(2){pporperty:value;..}:声明快，由“属性”和“属性值”两部分组成
5.2 厂商前缀(1)厂商前缀: 各浏览器厂商用来测试专属规则的,具有实验性和先进性
(2)得到用户广泛认可的厂商前缀规则, 是有可能进入 W3C 标准的
(3)随着浏览器之间的差异逐渐消失, 厂商前缀最终会走向消亡
常用厂商前缀(共5种):序号前缀描述1-moz-基于Mozilla的浏览器,如FireFox(火狐)
2-ms-基于微软Internet Explorer的浏览器
3-o-基于Opera(欧朋)的浏览器
4-webkit-基于WebKit内核的浏览器,如Chrome,Safari
5-epub-基于国际数字出版论坛制定的格式
5.3 处理空白(1)与 html 文档类似, css 也支持使用空白符来格式化文档,增强可读性
(2)css 中的多个空白符, 会全部合并成一个空白符显示
(3)空白符,可以由空格, 制表符, 换行符生成
(4)当属性值可有多个关键字时, 必须使用空白符分开
5.4 css 注释(1)单行/多行: /* 注释内容 */
(2)注释可以写到样式规则外部,也可以写到内部
(3)注释不允许嵌套
6 媒体查询——设置浏览器使用指定的样式表的媒体
6.1 使用场景(共四种)序号场景描述1
2
3@import url(..) screen,print{..}
4@media screen,print
6.2 媒体类型(共四种)——媒体类型是不同媒体的标识符序号类型描述1all所有媒体类型(不限制)
2print打印机，预打印预览使用
3screen屏幕
4projection幻灯片
注：多种媒体类型之间使用逗号隔开：@media screen,print
6.3 媒体描述符(1)媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
(2)媒体描述符的语法与 css 样式声明非常类似,如min-width: 500px
(3)与 css 声明的不同之处在于,媒体描述符允许没有值,如print and (color)
(4)多个 “媒体描述符” 之间使用 “逻辑关键字” 连接, 如 and 和 not
(5)and表示多个”媒体描述符”必须同时满足, not则是整个查询取反,且必须写在and前面
常用 “媒体描述符”(显示区域相关)：序号媒体描述符描述1width显示区域宽度
2min-width显示区域最小宽度
3max-width显示区域最大宽度
4device-width设备显示区域宽度
5min-device-width设备显示区域最小宽度
6max-device-width设备显示区域最大宽度
7height显示区域高度
8min-height显示区域最小高度
9max-height显示区域最大高度
10device-height设备显示区域高度
11min-device-height设备显示区域最小高度
12max-device-height设备显示区域最大高度
注：max-width与max-device-width的区别：(1)max-width:浏览器显示区域宽度，与设备无关，常用于pc端
(2)max-device-width:分辨率的最大宽度，常用于移动端
例：
- 首页 视频 问答 下载
课程总结：(1)css是一个层叠样式表
(2)css中元素分为两类：置换元素和非置换元素
(3)css中的元素类型分为“块级元素”，“行内元素”和“行内块元素”三种
(4)css中可以用属性display来改变类型
(5)css应用到html有四种方式：
link标签|
(6)css的注释用/* */表示
(7)媒体查询使用场景共有四种：
|
(8)多种媒体类型之间用逗号隔开
扫一扫
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
