HTML5&CSS3笔记：CSS3选择器、字体和颜色模式
CSS3 所蕴含的海量利好及精简之道，可以让我们将响应式设 计从“一个普通的可响应网站”提升为一个面向未来的真正响应式网站。使用 CSS3 之后， 可以让响应式设计加载更快，所需资源更少，且在将来更容易维护和修改。
Internet Explorer 6 到 8 对 CSS3 的支持
除少数例外(如@font-face)，老版本的 IE(IE 6、7、8)几乎不支持 CSS3 的新特性。那么我们可以在设计开发中使用 CSS3 吗？和以前一样，答案依然是：“看情况”。
就我个人而言，目前我主要将 CSS3 用作增强网站，而不是用它提供基本功能。我非常喜欢页面元素在不同的浏览器中看起来有点差异，相信你和你的客户也是这样。你会发现“引导客户：网站不必在所有浏览器中表现一致”会很有帮助。评价网站某部分“可行”或“看上去不错”是很主观的。
但是你得知道有很多腻子脚本(polyfill)可以为老版本 IE 增加 CSS3 功能。
私有前缀及其用法
在 CSS3 模块标准尚未被 W3C 批准或者标准所提议的特性尚未被浏览器完全实现时，浏览器厂商会使用所谓的私有前缀来测试“试验性的”CSS 特性。这样，浏览器设计者实现了 CSS3 的新模块，但对使用 CSS3 的开发者来说则很繁琐。
看看 CSS3 中实现圆角的代码：
.round{
-khtml-border-radius: 10px; /* Konqueror */
-rim-border-radius: 10px; /* RIM */
-ms-border-radius: 10px; /* Microsoft */
-o-border-radius: 10px; /* Opera */
-moz-border-radius: 10px; /* Mozilla (如Firefox) */
-webkit-border-radius: 10px; /* Webkit (如Safari和Chrome) */
border-radius: 10px; /* W3C */
}CSS 的工作方式是浏览器逐行下载样式表，应用其可识别的属性，忽略其无法识别的属性。
此外，样式表中后出现的属性优先级高于之前出现的同名属性。正是由于这种层叠，我们就可以先列出私有前缀属性，最后使用无前缀的属性来修正，以确保当该特性被完全实现时，浏览器会运行正确的效果，而不是之前的特定浏览器的试验性效果。
建立包含所有必需的私有前缀属性的代码片段会带来极大便利。这样你就可以直接粘贴代码而不用每次都重新输入。很多代码编辑程序(或者集成开发环境)带有代码片段功能，这样在开发 CSS3 时能节省很多时间。也有可以为 CSS 文件自动追加前缀的 JavaScript 方案，比如“-prefix-free”，很不错的解决方案，网址是 http://leaverou.github.com/prefixfree/。挨个列出每一种私有前缀是最理想的做法，但实际开发中很少有人那样做。相反，他们要么只指定自己期望的浏览器，要么在编写规则之前已经检查过哪些浏览器支持该特性。
随着对 CSS3 研究的不断深入，建议大家去看看这个网站 http:// caniuse.com，在这里你可以知道当前浏览器对特定 CSS3 和 HTML5 特性的支持程度。除了显示浏览器的特性支持情况之外(可按特性搜索)，它还提供了来自于 http://gs.statcounter.com 的最近的全球浏览器使用率统计。快速而有效的 CSS 技巧
CSS3 多栏布局
CSS3 可以让我们将一段或多段内容分布到多列网格中。请看如下代码：
<div id="main" role="main">
<p>lloremipsimLoremipsum dolor sit amet, consectetur // 任意文字 //p>
<p>lloremipsimLoremipsum dolor sit amet, consectetur // 任意文字 //p>
div>你可以通过设定具体栏位宽度(如 12em)或者栏位数量(如 3)来使内容分布在多列网格中，做法如下。
如果设定栏位宽度，语法如下所示(注意，为简洁起见代码中省略了私有前缀):
#main {
column-width: 12em;
}按照上述的设定，无论视口尺寸是多少，内容都会分布在宽度为 12em 的栏位中。视口尺寸发生变化之后，浏览器会自动调整栏位数量。
如果你想保持栏位数量不变而让栏位宽度根据视口自动调整，可以参考如下代码：
#main {
column-count: 4;
}增加栏位间隙和分割线：
#main {
column-gap: 2em;
column-rule: thin dotted #999;
column-width: 12em;
}文字换行
必须得将一个很长的 URL 地址放置在一个狭小的空间内？
word-wrap: break-word;老版本 IE 均支持该声明，甚至可以追溯到 IE 5.5!
CSS3 的新增选择器及其用法
CSS3 属性选择器
现有的 CSS 属性选择器：
img[alt] {
border: 3px dashed #e15f5f;
}这个选择器会匹配页面标签中任意一个含有 alt 属性的图片标签。
还可以通过设定属性值来缩小匹配范围：
img[alt="atwi_oscar"] {
border: 3px dashed #e15f5f;
}这样就仅会匹配 alt 属性值为 atwi_oscar 的图片。刚才说的这些事 CSS2 都能搞定。
CSS3 给我们带来了什么新特性?其实就是三种“子字符串匹配”的属性选择器。
CSS3 的子字符串匹配属性选择器：
CSS3 可以让我们基于属性选择器的子字符串来选择元素，换句话说，现在我们可以根据属性的部分内容来选择元素。三种匹配模式分别是：
以特定前缀开头;
包含特定字符串;
以特定后缀结尾。1、匹配开头”的属性选择器。
Element[attribute^="value"]
img[alt^="film"] {
border: 3px dashed #e15f5f;
}该选择器的关键字符是^符号，它的意思是“以此开头”。
2、“匹配包含内容”的属性选择器。
Element[attribute*="value"]
img[alt*="film"] {
border: 3px dashed #e15f5f;
}该选择器的关键字符是*符号，它的意思是“包含”。
3、“匹配结尾”的属性选择器。
Element[attribute$="value"]
img[alt$="film"] {
border: 3px dashed #e15f5f;
}该选择器的关键字符是$，它的意思是“以此结尾”。
CSS3 结构伪类
CSS2.1 中已经有一个针对列表中第一项的选择器:
li:first-child
CSS3 又增加了一个选择器用以匹配最后一项:
li:last-child原始设计图中的导航栏链接交替使用不同的文字颜色，这个怎么实现呢？CSS3 还提供了一个选择器，可以在不追加额外标签代码的情况下解决该问题：:nth-child(even)
nav ul li:nth-child(even) a {
color: #fe0208;
}提及在 DOM(文档对象模型，或者说简单点就是页面标签中的元素)树形结构中选择元素，CSS3 提供了一些基于 nth 的规则，为我们带来了前所未有的灵活性：
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)。其他几种形式：
使用整数，如:nth-child(2)——这会选中列表中第二个列表项；
使用数值表达式，如:nth-child(3n+1)——这样会从第一个元素开始，然后每三个元素选一个。数值表达式中也可以使用负数，例如:nth-child(3n-2)，即表示从倒数第 2 个元素开 始然后每三个元素选择一个。
child 和 last-child 的区别在于，last-child 是从文档节点树的末尾开始算。比 如:nth-last-child(-n+3)就是从倒数第 3 个元素开始，向后选择之后的所有元素(因为使用了-n，所以方向是向后)。
最后，我们来看看:nth-last-of-type。前面的例子中在对子元素计数时都未考虑元素的类型，:nth-last-of-type 则可以指定你想选择的元素类型。
<ul>
<li class="internal"><a href="#">Why?a>li>
<li><a href="#">Synopsisa>li>
<li class="internal"><a href="#">Stills/Photosa>li>
<li class="internal"><a href="#">Videos/clipsa>li>
<li class="internal"><a href="#">Quotesa>li>
<li class="internal"><a href="#">Quiza>li>
ul>
注意上面的第二个列表项没有 internal 类。看看这个规则:
nav ul li.internal:nth-of-type(n+2) a {
color: #fe0208;
}
上面的代码告诉浏览器:从第二个匹配元素开始，选择每一个类名为 internal 的列表项。tips：如果你经常使用 jQuery 就会知道，jQuery 中的计数是从 0 开始的。比如在 jQuery 中使用整数 1 来选择元素，实际上会选中第二个元素。但在 CSS3 中，计数从 1 开始，所以整数 1 会匹配第一个元素。
否定(:not)选择器：
nav ul li:not(.internal) a {
color: #fe0208;
}除此之外，CSS3 还有很多其他选择器。如果你在开发 Web 应用，那完整的 UI 元素状态伪类列表(http://www.w3.org/TR/selectors/#UIstates)则值得一读。
对伪元素的修正
伪元素在 CSS2 中已经存在，CSS3 标准对其语法做了一些细微的修正。举几个你可能还 有印象的例子，p:first-line 会选中p标签的第一行内容，p:first-letter 会选中其中的第一个字母。
CSS3 要求对伪元素使用两个冒号以便与伪类进行区别。因此刚才的例子应该改写为 p::first-letter。但注意 Internet Explorer 8 及更低版本的 IE 无法识别两个冒号的语法，它们只识别一个冒号。
另外，:first-line 伪元素非常方便的一个特点是它会根据视口自动变化。
p::first-line {
color: #ff0cff;
}视口大小不同时，渲染为粉红色的文字片段也不相同。
自定义网页字体
使用@font-face 嵌入网页字体
首先我们得有字体。
网上有很多很棒的字体资源站点，有免费的也有收费的。
虽然 Google 也提供了免费的网页字体，且基本上都可使用@font-face 规则(www.google.com/webfonts)，但我个人最喜欢 Font Squirrel(www.fontsquirrel.com)。另外还有 Typekit (www.typekit.com) 和 Font Deck(www.fontdeck.com)上也有一些非常优秀的付费字体。
从 Font Squirrel 上下载的@font-face 包是一个 ZIP 文件，里面包含该字体各种格式的文件(WOFF、TTF、 EOT 和 SVG)，以及一个用来演示字体调用规则的 stylesheet.css 文件。例如，使用 Bebas Neue 字体的规则如下：
@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}和浏览器私有前缀的原理类似，浏览器会根据自身特性应用列表中能识别的样式，忽略无法识别的样式。用这种方法能保证无论什么浏览器都有一个可用字体。
将某个导航链接文字的字体修改为 Bebas Neue：
nav ul li a {
font-family: 'BebasNeueRegular';
}标题模糊怎么办
导致该问题的原因是字体粗细。除非显式声明 font-weight 属性，否则大多数浏览器都会为标题元素应用标准的 font-weight(一般都是 700)。因此解决方法就是始终为应用了@font-face 字体的标题元素设定 font-weight 属性。
在响应式设计中使用自定义@font-face 字体的注意事项：
使用@font-face 自定义网页字体的方法总的来说不错。唯一需要注意的，是在响应式设计中使用该技术时要考虑到字体文件大小。需要留意有些字体可能会非常庞大！如果你想保持网站的高性能，那请注意控制自定义字体的文件尺寸。
新的 CSS3 颜色格式和透明度
CSS3 允许我们使用新方法如 RGB 或 HSL 来声明颜色。另外，我们还能在这两个方法后边追加一个透明通道(分别是 RGBA 和 HSLA)。
RGB 颜色
在 CSS3 中，该值可以使用 RGB 值来描述：
nav ul li:nth-child(odd) a {
color: rgb(254, 2, 8);
}HSL 颜色
除了 RGB，CSS3 还可使用 HSL(色相、饱和度、亮度)模式来声明颜色。
HSL 模式基于一个 360°的色相环，第一个数字代表色相，60°时为黄色，120°时为绿色，180°时为青色，240°时为蓝色，300°时为洋红色，360°时为红色。所以前面提到的 HSL 颜色色相为 315，所以很容易看出它介于洋红(300°)和红(360°)之间。其后的两个值分别表示饱和度和亮度，值为百分比，用于改变基础的色相。如果想要更加饱满的颜色，则第二个值使用一个高一点的百分比即可。最后一个值控制亮度，可在 0% 的全黑到 100%的全白之间变化。
针对 IE6、IE7 和 IE8 提供备用颜色值
你可能都猜到了，版本 9 以下的 IE 浏览器不支持 RGB 和 HSL。因此，如果需要针对这些浏览器提供备用的颜色声明，则要将其放在 RGB 或 HSL 值之前。
nav ul li:nth-child(odd) a {
color: #fe0208;
color: hsl(359, 99%, 50%);
}透明通道
HSL 和 RGB 与十六进制颜色值最大的区别，是它们支持透明通道。这意味着可以让元素透明，使其下方的元素可见。
HSLA 颜色声明与标准的 HSL 规则类似。不过颜色必须得声明为 hsla 模式(而不是 hsl)， 增加一个额外的透明度值，该值的格式是一个介于 0(全透明)到1(不透明)之间的小数。
RGBA 的语法和 HSLA 的基本一样，即在颜色值后追加一个透明度值。
background-color: hsla(0, 0%, 100%, 0.8);
background-color: rgba(255, 255, 255, 0.8);