标签：媒体 简介 元素 文档 样式表 概述 CSS 属性

第一章：CSS和文档

1.1 Web样式简介

• 1994年，正值Web开始广泛流行开来，CSS的第一个提案发布了。那时，浏览器为用户提供了各种样式的定制功能，而文档编写人员却做不到这一点。文档编写人员只能把内容标记成一个个段落、一级级标题、一块块预排格式文本，或者一些其他类型的元素。如果用户愿意，可以把一级标题设为粉红色的小字，而把六级标题设为红色的大字

• CSS就是在这样的背景下诞生的。它的目的就是提供一个简单的声明式样式语言，而且具有一定的灵活性，能为文档编写人员和用户提供等同的样式化功能。文档编写人员和用户都有话语权，不过最终的决策权在用户手里

• 草案制定的速度很快，到1996年年末，CSS1完成了。此后，刚组建的CSS工作组开始着手制定CSS2，而各浏览器则相互协作，努力实现CSS1

• CSS2规范于1998年年初定案。随后，CSS工作组立即投身CSS3的制定工作，以及CSS2的修订工作（制定CSS2.1）

• 与以往不同的是，CSS3由多个（理论上）独立的模块构成，而不是单独的一个臃肿的规范。CSS3分成了多个模块的根本原因是各模块可以独立演进。尤其是重要的（或受众广的）模块可以按照W3C的规划向前推进，而不必受其他模块拖累

• 截至2012年年初，有三个CSS3模块（CSS Color Level3、CSS Selectors Level3、CSS Namespaces）变成了全力推荐状态，而有七个模块处于候选状态，还有七个模块处在不同的草案状态。如果采用以前的机制，要等其他部分完成才能在一份完成的规范中发布颜色、选择符和命名空间的新条款。得益于模块化，我们无需再等待

• 但是，这样也有缺点，即“CSS规范”不能涵盖一切

1.2 元素

元素（element）是文档结构的根基。文档中的每个元素都对文档的表现起一定作用

置换元素：指用来置换元素内容的部分不由文档内容直接表示。最常见的置换元素要数 img，它的内容由文档之外的图像文件替换

非置换元素：即元素的内容由用户代理（通常是浏览器）在元素自身生成的框中显示

块级元素：默认生成一个填满父级元素内容区域的框，旁边不能有其他元素。也就是说，块级元素在元素框的前后都“断行”

行内元素：在一行文本内生成元素框，不打断所在的行。行内元素不在自身所在的元素框的前后“断行”，因此可以出现在另一个元素的内容中，且不影响所在的元素

1.3 把CSS应用到HTML上

1️⃣ link标签

<style rel="stylesheet" type="text/css" href="sheet.css" media="all">

link标签位置：link标签必须放在head元素内，不能放在其他元素中。Web浏览器遇到link标签时，会查找并加载指定的样式表，使用样式表中的样式渲染HTML文档

link标签属性：

• rel属性：rel是“relation”关系的简称。这里指定的关系是stylesheet
• type属性：type属性值始终为"text/css"，说明通过link标签加载的数据类型。这样Web浏览器才知道加载的样式表是CSS样式表，然后确定如何处理加载的数据
• href属性：它的值是样式表的URL，可以是绝对地址，也可以是相对地址，具体由需求而定。另外，文件扩展名不是必须的，但是如果文件名不以“.css”结尾，即使在link元素中把type属性值设为“text/css”，有些浏览器也不会将其识别为包含样式表的文件
• media属性：它的值是一个或多个媒体描述符，指明媒体的类型和具有的功能，多个媒体描述符以逗号分开

注意：

• 外部样式表不能包含任何文档标记，只能有CSS规则和CSS注释
• 如果外部样式表中有标记，可能导致部分或全部样式失效

补充——样式表分类：

候选样式表：把rel属性的值设为“alternate stylesheet” ；仅当用户自己选择，文档才会使用候选样式表渲染

首选样式表：为rel属性的“stylesheet”的link元素设定title标题属性；显示文档时默认使用，而选择候选样式表之后，首选样式表就不使用了

永久样式表：把rel属性的值设为“stylesheet”；始终用于显示文档，这通常正是文档编写人员想要的行为

---

2️⃣ style元素

<style type="text/css">
    ……
</style>

• style元素可以直接包含应用到文档上的样式，也可以通过@import指令引入外部样式表
• 开始和结束style标签之间的样式称为文档样式表或嵌入式样式表
• style元素应该始终设定type属性，对CSS文档来说，正确的值是“text/css”
• style元素也有media属性

---

3️⃣ @import指令

@import url(sheet.css) all;

• Web浏览器遇到@import指令时会加载外部样式表，使用其中的样式渲染HTML文档
• @import指令在style元素内部，而且必须放在其他CSS规则前面，否则不会起作用
• 一个文档中可以有多个@import语句
• @import指令也可以显示导入的样式表应用于何种媒体，方法实在样式表的URL后面提供媒体描述符

---

4️⃣ HTTP链接

为文档关联CSS还有一种鲜为人知的方式：使用HTTP首部

在Apache中，若想使用这种方式，可以在 .htaccess 文件中引用CSS文件。这样设置之后，支持这种方式的浏览器^[1]在加载受此.htaccess文件管理的文档时便会使用指定的样式表，就像通过link元素链接的样式表一样。

Header add Link "</ul/testing.css>;rel=stylesheet;type=text/css"

此外，还可以在服务器的 httpd.conf 文件中添加等效的规则，这样可以更高效。在支持这样方式的浏览器中^[1:1]，这样做的效果与前面一样，唯一的区别就是设置所在的文件不同。

<Directory /path/to /public/html/directory>
    Header add Link "</ul/testing.css>;rel=stylesheet;type=text/css"
</Directory>

---

5️⃣ 行内样式

• 如果只想为单个元素提供少量样式，不值得动用嵌入式样式表或外部样式表，可以利用HTML元素的style属性设置行内样式

• 除了body元素之外的标签，所有HTML标签都能设定style属性

• style属性的值只能是一系列规则声明，而不能包含整个样式表。因此，不能在style属性中使用@import指令，也不能有完整的规则

• 通常不建议使用style属性

1.4 样式表中的内容

1️⃣ 标记

样式表中不能有标记，不过HTML注解标记除外（历史原因）

2️⃣ 规则的结构

• 一个样式表由一系列规则构成
• 一个规则由选择符和声明块构成
• 一个声明块由一个或多个声明组成
• 一个声明包含一个属性和对应的值

声明的格式是固定的：

• 先是属性，然后是冒号，后面再跟上值和分号
• 冒号和分号后面可以有零个或多个空白
• 值几乎都是一个关键字或以空格分隔的多个关键字
• 如果声明中的属性或值有误，整个规则都将被忽略
• 属性的值可以是多个关键字，关键字之间通常以空格分隔，有时则使用斜线（/）或逗号

3️⃣ 厂商前缀

厂商前缀：浏览器厂商通过它标记实验性或专属（或二者兼具）的属性、值或其他内容

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

4️⃣ 处理空白

• CSS对规则之间的空白基本没有严格要求，对规则内部的空白也没有严格要求

• 一般来说，CSS对待空白的方式跟HTML差不多：解析时，连续的空白会合并成一个空白

5️⃣ CSS注释

/* CSS注释内容 */

CSS注释不能嵌套

1.5 媒体查询

1️⃣ 媒体查询用法

媒体查询可以在下述几个地方使用：

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

媒体查询可以是简单的媒体类型，也可以是复杂的媒体类型和特性的组合

一个样式表中可以有任意多个@media块，而且每一个都有自己的一套媒体描述符；如果愿意，可以把所有规则都放在一个@media块里

一个媒体描述符包含一个媒体类型和一个或多个媒体特性列表，其中特性描述符要放在圆括号中；如果没有媒体类型，那就应用到所有媒体上

2️⃣ 简单的媒体查询

一个样式表中可以有任意多个@media块，而且每一个都有自己的一套媒体描述符；如果愿意，可以把所有规则都放在一个@media块里

@media all {
    h1 { color: maroon; }
    body { background: yellow; }
}

3️⃣ 媒体类型

• 媒体查询最基本的形式就是媒体类型，由CSS2引入

• 媒体类型就是指明不同媒体的标注

媒体类型	说明
all	用于所有展示媒体
print	为有视力的用户打印文档时使用，也在预览打印效果时使用
screen	在屏幕媒体（如桌面电脑的显示器）上展示文档时使用 在桌面计算机上运行的所有Web浏览器都是屏幕媒体用户代理
projection	能以幻灯片的形式展示文档

4️⃣ 媒体描述符

<link href="print-color.css" type="text/css" media="print and (color),screen and (color-depth:8)" rel="stylesheet">

@import url(print-color.css) print and (color),screen and (color-depth:8);

@media all and (min-resolution: 96dpi) {……}
@media (min-resolution: 96dpi) {……}

• 可以通过一个逗号分隔的列表，列出多个查询

• 一般情况下，媒体特性描述符的格式类似于CSS中的一对属性和值。二者之间最大的区别是，特性描述符可以不指定值。因此，任何彩色媒体都符合(color)指定的条件，任何色深为16位的彩色媒体都符合(color:16)指定的条件。其实不指定值时，是在做判断，比如说(color)的意思是“这个媒体是彩色的吗？”

多个特性描述符之间使用逻辑关键字链接

• and： 连接的两个或多个媒体特性必须同时满足条件，整个查询得到的结果才是真值。例如：(color) and (orientation: landscape) and (min-device-width: 800px)表示三个条件都要满足：当媒体环境是彩色的、横向放着、而且设备的屏幕宽至少为800像素，才会应用样式表
• not：对整个查询取反。假如所有条件都为真，那样式表不会应用到文档上。例如：not (color) and (orientation: landscape) and (min-device-width: 800px)表示三个条件都满足时，整个语句得到的结果与之相反。因此，当媒体环境是彩色的、横向放着，而且设备的屏幕宽度至少为800像素，样式表不会应用到文档上。除此之外的情况下，都将应用样式表
• only：在不支持媒体查询的旧浏览器中隐藏样式表。例如：如果想在所有媒体中应用一个样式表，但是只在支持媒体查询的浏览器中应用，可以这样写：@import url(new.css) only all; 在支持媒体查询的浏览器中，only关键字被忽略，样式表会应用到文档上。而在不支持媒体查询的浏览器中，媒体类型为only all，而这是无效的，因此不会应用样式表。注意：only关键字只能在媒体查询的开头

5️⃣ 媒体特性描述符和值的类型

媒体特性描述符：

此外，还有两种新增的值：

• <ratio>
• <resolution>

1.6 特性查询

• 特性查询：根据用户代理是否支持特定的CSS属性及其值来应用一段样式

• 特性查询可以嵌套，其实还可以嵌套在媒体查询中，而且反过来嵌套也可以

• 与媒体查询一样，特性查询也支持使用逻辑运算符

• 特性查询中既要写属性也要写值。因为，浏览器可能支持某个属性，但不支持它的全部取值

案例一：假设想在用户代理支持color属性时，为元素设定颜色

/* 如果能识别并处理color:black这样的属性和值组合，那就应用这段样式；否则，跳过这段样式如果用户代理不支持@supports，整段样式都会跳过*/@supports (color:black) {    body { color: black; }    h1 { color: purple; }    h2 { color: navy; }}

案例二：嵌套查询

/* 使用弹性盒布局编写针对屏幕和印刷媒体的样式，可以把媒体查询块放在@supports(display:flex)块里 */@supports (display: flex) {    @media screen {        /* 针对屏幕媒体的弹性盒样式 */    }    @media print {        /* 针对印刷媒体的弹性盒样式 */    }}/* 反过来，也可以在实现响应式设计的媒体查询块中添加@supports()块 */@media screen and (max-width: 30em) {    @supports (display:flex) {        /* 针对小屏的弹性盒样式 */    }}@media screen and (min-width: 30em) {    @supports (display:flex) {        /* 针对大屏的弹性盒样式 */    }}

案例三：假如想在用户代理同时支持栅格布局和CSS形状时应用一段样式

@supports (display:grid) and (shape-outside:circle()) {    /* 栅格和形状样式 */}

---

1. “支持这种方式的浏览器”：截至2017年末，广泛支持HTTP链接样式表的浏览器有Firefox系列和Opera ↩︎ ↩︎

标签：媒体,简介,元素,文档,样式表,概述,CSS,属性
来源： https://www.cnblogs.com/feeder/p/15017034.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。