HTML5&CSS3笔记：CSS3选择器、字体和颜色模式

16-10-25 来源：[db:作者]

收藏我要投稿

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="#">Synopsis</a></li>
  <li class="internal"><a href="#">Stills/Photos</a></li>
  <li class="internal"><a href="#">Videos/clips</a></li>
  <li class="internal"><a href="#">Quotes</a></li>
  <li class="internal"><a href="#">Quiz</a></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);

点击复制链接与好友分享!回本站首页