1. 元素
1.1 替换元素和非替换元素
替换元素: <img src="howdy.gif" > 它会被存储在文档外部的一个图片文件所替代。
非替换元素: <span>hi there</span>是一个非替换元素，文字“hi there”会由用户代理显示。对于段落、标题、表格单元格、列表以及 HTML 中的其他大部分元素都是如此。
1.2 元素显示角色: 块级元素行内元素
通常HTML 的层级结构允许行内元素作为块级元素的后代，而不是相反。
2. 结合CSS和HTML
2.1 link标签
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">
一个文档可以关联多个样式表。
最初的目的是允许 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备用样式表
<link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="Big Text">
它们只有被用户选择的时候才会用于文档显示
2.2 style
<style type="text/css">...</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
另外还加入了两个新的值类型
<ratio>
<resolution>
5. 特性查询
通过判断用户代理是否支持特定的属性-值组合来应用样式块，被称作特性查询。
@supports (color: black) {
body {color: black;}
h1 {color: purple;}
h2 {color: navy;}
}
网友评论