Cascading Style Sheets(CSS)对于未document添加样式是一个强有力的工具，而且已经渗透到web开发的各个角落。举几个例子，基于Gecko的浏览器使用CSS来支持自己的chrome浏览器渲染，很多RSS的客户端也支持用户自定义feeds和feed entries的CSS样式，另外很多即时通讯的客户端也利用CSS来生成他们的聊天窗口。
web样式的简史
CSS首次被发布是在1994年，那时前端也才刚刚兴起。浏览器将所有样式的任务都交给了用户-the Presentation preferences in Mosaic
Elements
待添加
多种方式连接CSS与HTML
待添加
Stylesheet 内容
待添加
Media Queries媒体查询
最基本的媒体查询形式就是media types，首次是在CSS2被引入。下面就列举下不同类型的媒体media：
- all: 针对所有媒体；
- print: 只有当为用户打印文档或显示预览时候使用；
- screen: 在电脑等屏幕上呈现时使用，所有的web浏览器都属于屏幕介质
如果有多个媒体类型需要设置，只需要用逗号分隔，下面举例说明同时在scree和print下的样式：
<link type="text/css" href="frobozz.css" media="screen, print">
<style type="text/css" media="screen, print">
@import url(frobozz.css) screen, print;
@media screen, print {...}
</style>
当然样式的特征属性还不止以上这点，用户还可以添加特征描述符（feature-specific descriptors），例如屏幕分辨率的值或是给定介质的颜色深度。
媒体描述符
其实只要是media属性可以设置的地方就可以设置对应的描述符，下面的例子就展示如何实现：
// 添加描述符前
<link href="print-color.css" type="text/css" media="print and (color)" rel="stylesheet">
@import url(print-color.css) print and (color);
// 添加描述符后
<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);
上面例子中任意一个媒体查询为true，则下面的样式就会被应用。上面的@import print-color.css将会在一个彩色的打印机上呈现。如果是一个黑白的打印机，那么两个query都将是false，所以print-color.css就不会应用。同理对屏幕也是一样的。
每一个媒体查询都由两部分组成，一个media type和一系列的media features，每个feature都要用括号包含。如果没有指定media type，那么默认为all，所以说下面两个query是一样的：
@media all and (min-resolution: 96dpi) {...}
@media (min-resolution: 96dpi) {...}
一般来说，一个media feature描述符就是一个css中的键值对，不过存在些许的不同，很多features不需要设定具体值。所以说针对有颜色的介质可以直接用color属性，而针对16位色深的介质就要具体指定为color：16.事实上，不带值的描述符其默认值为true或是false。
而多个feature描述符可以通过下面的逻辑关键词来链接，事实上就以下两种：
- and：逻辑与，链接的所有query都必须为true
- not：取反操作，举个列子not (color) and (orientation: landscape) and (min-device-width: 800px)意思是三个条件都满足，计算结果为false。
注意not只能被用在查询的开头，用在中间例如(color) and not (min-device-width: 800px)是无效的。另外注意有些太老的浏览器因为无法识别前面加not的查询就会直接跳过这个样式。
有些人想是不是还漏了个OR关键词，但是在查询里是没有OR的，对应的逗号分隔的一系列查询就等于代替了OR。
还有一个关键词only，这个主要是为了向后兼容用的
- only： 只被用来隐藏那些不支持media query的老浏览器做兼容，举例说下，想要在能识别查询的所有页面上添加new.css，可以这样写@import url(new.css) only all。那些太老的浏览器看到only就会直接忽略掉这个样式。跟not一样，only也必须在查询的开头设置。
feature描述符和赌赢的类型
上面的很多例子中我们看到了不少的feature描述符，但还不是全部，下面来看看截止到2017年末的最新的全部描述符吧：
- 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
另外，两个新的值类型被加入，它们是：
- <radio>
- <resolution>
如何使用它们将在后面的章节中介绍
Feature Queries
待添加
小结
借助CSS可以完全改变浏览器渲染DOM元素的方式。既可以通过设置display属性来实现，也可以通过多种方式连接css和对应的document。用户是永远不会知道哪些样式是外部的，哪些是内嵌的。而外部样式赋予开发者将站点所有的信息都统一放到一个地方进行管理，这不仅使得站点的升级和维护相当轻松，而且还因为所有的呈现都从document中移除而节省了带宽。另外借助@supports()，我们可以对原生CSS做进一步的优化。
为了想要完全掌握CSS的威力，开发人员需要了解如何将样式绑定到对应的element中，而为了完全理解CSS背后的机制，则需要进一步通过下一章的选择器来深入学习。
网友评论