css文档

2020-11-23 本文已影响0人莣忧草_3b53

1. 元素

1.1 替换元素和非替换元素

替换元素: <img src="howdy.gif" > 它会被存储在文档外部的一个图片文件所替代。

非替换元素: <span>hi there</span>是一个非替换元素，文字“hi there”会由用户代理显示。对于段落、标题、表格单元格、列表以及 HTML 中的其他大部分元素都是如此。

1.2 元素显示角色: 块级元素行内元素

通常HTML 的层级结构允许行内元素作为块级元素的后代，而不是相反。

2. 结合CSS和HTML

2.1 link标签

一个文档可以关联多个样式表。
最初的目的是允许 HTML 开发者把包含链接标签的文档与其他文档关联起来。CSS使用Link标签把样式表链接到文档中

链接必须放置在head元素内，外部样式才能成功加载，与title不同，它不能被放置在任何其它元素里。

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

@import规则必须放在其他除了@charset规则以外的CSS规则的前面，除此之外没有限制。

2.1.1属性

rel：表示“关系”（relation）。
type：始终设置为text/css，这个值描述了被link标签加载的数据的类型。
href：这个属性的值是样式表的 URL
media：一个或多个媒体描述符

2.1.2备用样式表

2.2 style

2.3 @import指令

@import url(sheet2.css);
与link一样，@import可以指示浏览器加载一个外部样式然后把它应用到 HTML 文档渲染中。它们之间主要的区别只是在于语法和命令的位置。正如我们看到的这样，@import是被包含在style中的。命令必须放在其他 CSS 规则之前，否则它不会生效。

类似link，你可以在样式表的 URL 后添加媒体描述符，来限制样式表被用于一个或多个媒体：

如果你想要在一个外部样式表中使用另一个外部样式表，@import非常有用。因为外部样式表不能包含任何文档标记，link元素就无法使用，但@import却可以。

3 样式表内容

3.1规则结构

前缀厂商
-epub- 国际数字出版论坛 epub 格式
-moz- 基于 Mozilla 的浏览器（如：Firefox）
-ms- Microsoft Internet Explorer
-o- 基于 Opera 的浏览器
-webkit- 基于 WebKit 的浏览器（如：Safari 和 Chrome）

4 媒体查询

通过媒体查询，开发者可以定义不同媒体环境中浏览器可以使用的样式表。过去，这是通过使用media属性来为link元素或style元素设置媒体类型，以及通过@import或@media声明的媒体描述符来处理的。

4.1媒体查询可以使用在以下位置

link元素的media属性。
style元素的media属性。
@import声明的媒体描述符部分。
media声明的媒体描述符部分。

@media projection {    body {background: yellow;}  }

4.2媒体类型

all: 用于所有演示媒体。

print:用于可视用户打印文档以及显示文档的打印预览。

screen:用于在桌面电脑显示器等屏幕媒体中显示文档。在此类系统上运行的所有 Web 浏览器都是屏幕媒体用户代理。

4.3媒体描述符

彩色打印机上渲染文档时应用外部样式表的两种基本等效

<link href="print-color.css" type="text/css" media="print and (color)" rel="stylesheet">
 = 
@import url(print-color.css) print and (color);

and: 只有当每个媒体特性都为真，总的查询结果才为真。
not: 如果所有的条件都为真，样式表则不会被使用。not关键字只能用在媒体查询的开头。(color) and not (min-device-width: 800px)
only:

4.4媒体特性描述符和值类型

width
min-width
max-width
device-width
min-device-width
max-device-width
height
min-height
max-height
device-height
min-device-height
max-device-height
aspect-ratio
min-aspect-ratio
max-aspect-ratio
device-aspect-ratio
min-device-aspect-ratio
max-device-aspect-ratio
color
min-color
max-color
color-index
min-color-index
max-color-index
monochrome
min-monochrome
max-monochrome
resolution
min-resolution
max-resolution
orientation
scan
grid
另外还加入了两个新的值类型

5. 特性查询

通过判断用户代理是否支持特定的属性-值组合来应用样式块，被称作特性查询。

@supports (color: black) {
    body {color: black;}
    h1 {color: purple;}
    h2 {color: navy;}
}

https://legacy.gitbook.com/book/jack-sparrow/css