CSS与文档

作业链接

1.Css是什么

• 文档相当于一个主干，通过CSS的描述，让人看到一整颗树，可以更好的规划、美化和布局树枝，树叶，花朵，果实，让人看到一个根繁叶茂的大树，很美。

• CSS是可以影响一个或者一组文档的表现样式，是层叠（替代、重写）格式表的意思

2.元素与元素框

• 页面中显示的内容称为元素，元素显示在浏览器为它生成的元素框中
• 根据元素框中的内容提供者，可以将元素分为两大类，置换元素与非置换元素，置换元素是元素框内容由外部资源提供，元素框就是占位符<img><input>
• 非置换元素的元素框内容用户提供，浏览器生成，如<p><span>等

3．元素的显示方式

3.1 元素类型

• 块级元素、行内元素和行内块元素
• 块级元素：生成一个填满父级内容区的元素框，且两侧不能有其他元素，如<div><p>
• 行内元素：在一行文本内生成元素框，不打断所在行，如<a></span>

• 行内块元素：在一行文本内生成元素框，不打断所在行，但是支持宽高变化，如<img>

  3.2 display属性

  每个元素都可以通过 style=”display:type”控制它的显示类型，即生成什么样的元素框

• Inline默认 行内元素 span a

• Block 块级元素 div p
• Inline-block 行内块元素 img
• List-item 块级元素 li
• Table 表格元素
• Flex 弹性元素
• Grid 网格元素

4.css应用到html上

• Link导入
• @import 指令
• Style=属性 直接在元素前面加
• <style></style> 直接在文档内部定义

5.css文档的内容

5.1样式规则

选择符：声明块即 selector{property:value;…}的形式

6.媒体查询

设置浏览器使用指定的样式表的设置

6.1使用场景

• Link <link media=”screen,print”>
• Style <style media=”screen,print”>
• @improt @import url(…)screen,print;
• @media @media screen,print {…}

6.2媒体类型

• All 默认就是ALL
• Print 打印机
• Screen 屏幕，如浏览器等用户代理
• Projection 幻灯片

6.3媒体描述

• 媒体描述符与css样式声明非常类似，如 min-width:500px
• 与css不同之处在于媒体描述符没有值，直接指定如print and (color)
• 多个媒体描述符之间使用逻辑关键字连接，如and和not
• And表示多个媒体描述符必须同时满足，not则是整个查询取反，且必须写在and前面
• Max-width:浏览器显示区域宽度，与关，通常用于pc端
• Max-device-width，设备分辨率的最大宽度，通常用于移动端