响应式设计入门-05CSS3：选择器、字体和颜色模式.ppt

CSS3：选择器、字体和颜色模式,本章内容,CSS3 给前端开发人员带来了什么 快速而便捷的CSS3 技巧（多列布局和文字换行） CSS 规则解析 私有前缀的来源和用法 新的 CSS3 选择器的工作原理 使用font-face 设定字体 如何使用带有透明度的RGB 和HSL 颜色模式,仅需要几行代码（而且不用图片），CSS3 就可以创造出各种效果：圆角、背景渐变、文字阴影、盒阴影、自定义字体以及多重背景图片（当然，这个效果确实需要图片）。 如果这还不够神奇，甚至我们之前需要依赖JavaScript 的一些基本交互效果如悬停动画，也可以使用纯CSS3 来实现,CSS术语,在探索 CSS3 带给我们的新特性之前，为避免混淆，我们先来定义一下用来描述CSS 规则的一些术语。看看如下的例子： .round border-radius: 10px; 这条规则由选择器（.round）和声明（border-radius: 10px;）组成。而声明则由属性（border-radius:）和值（10px;）组成。,几个能让工作更轻松的CSS3 小技巧,CSS3 多栏布局 如果设定栏位宽度，语法如下所示（注意，为简洁起见代码中省略了私有前缀）。视口尺寸发生变化之后，浏览器会自动调整栏位数量。 #main column-width: 12em; 如果你想保持栏位数量不变而让栏位宽度根据视口自动调整，可以参考如下代码： #main column-count: 4; 增加栏位间隙和分割线 增加栏位间隙和分割线可以让多列布局的效果更好，代码如下： #main column-gap: 2em; column-rule: thin dotted #999; column-width: 12em; 效果如何，需要自行验证。,文字换行 CSS3 使用了一个简单的声明解决了这个问题，凑巧的是老版本IE 均支持该声明，甚至可以追溯到IE 5.5！ word-wrap: break-word; 需要给外层的包裹元素追加该声明,CSS3 属性选择器,CSS的属性选择器 imgalt border: 3px dashed #e15f5f; 这个选择器会匹配页面标签中任意一个含有alt 属性的图片标签： 还可以通过设定属性值来缩小匹配范围。如下代码所示： imgalt=atwi_oscar border: 3px dashed #e15f5f; 这样就仅会匹配alt 属性值为atwi_oscar 的图片,CSS3可以根据属性的部分内容来选择元素： 三种匹配模式分别是： 以特定前缀开头； 包含特定字符串； 以特定后缀结尾。,如果我想选择网站中所有alt 属性值以film 开头的图片，则对应代码如下： imgalt=film border: 3px dashed #e15f5f; 该选择器的关键字符是符号，它的意思是“以此开头”,如果我想选择网站中所有alt 属性值中包含film 字符串的图片，则对应代码如下： imgalt*=film border: 3px dashed #e15f5f; 该选择器的关键字符是*符号，它的意思是“包含”,如果我想选择网站中所有alt 属性值以film 结尾的图片，则对应代码如下： imgalt$=film border: 3px dashed #e15f5f; 该选择器的关键字符是$，它的意思是“以此结尾”。,想一想,bodyid=2 .navHistory color: #00b4ff; 该选择器选择了什么？（注意组织语言。）,如何做一个导航栏,导航栏使用非常普遍，导航栏的标签代码如下： Why? Synopsis Stills/Photos Videos/clips Quotes Quiz ,首先，我们设定nav 元素使用table 布局： nav display: table; /* more code. */ ,注：这些表格只会存在于CSS 中，并不会对页面标签产生任何影响。我们只是告诉浏览器让这些元素表现得如同表格一样，但其实它们并不是表格。,然后将显示为table-row： nav ul display: table-row; /* more code. */ 最后将列表项显示为table-cells： nav ul li display: table-cell; /* more code. */ ,最后，使用CSS3 选择器将最后一个列表项的文字置为右对齐，将第一个列表项的文字置为左对齐。 nav ul li:last-child text-align: right; nav ul li:first-child text-align: left; ,注意那个“：”号，称做伪选择器。,进阶：交替样式,导航栏链接交替使用不同的文字颜色，这个怎么实现呢？ CSS3 还提供了一个选择器，可以在不追加额外标签代码的情况下解决该问题： :nth-child(even) 如： nav ul li:nth-child(even) a color: #fe0208; ,再进阶：nth规则,CSS3 提供了一些基于nth 的规则（伪选择器），为我们带来了前所未有的灵活性。这些规则包括:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)以及:nth-last-oftype(n)。前面的例子中已经示范了使用(odd) 或 (even)参数（用以修正导航链接），(n)这个参数还可以有其他几种形式： 使用整数，如:nth-child(2)这会选中列表中第二个列表项； 使用数值表达式，如:nth-child(3n+1)这样会从第一个元素开始，然后每三个元素选一个。,试一试,从第一个元素开始，然后每三个元素选一个？ ：nth-child(3n+1) 从第3 个元素开始，每两个元素选择一个？ 选择第二个列表项之后的所有列表项？ 选择序号为3 的倍数的元素？ 数值表达式中也可以使用负数，例如:nth-child(3n-2)，即表示从倒数第2 个元素开始然后每三个元素选择一个。,child 和last-child 的区别在于，last-child 是从文档节点树的末尾开始算。 比如:nth-last-child(-n+3)就是从倒数第3 个元素开始，向后选择之后的所有元素（因为使用了-n，所以方向是向后）。,再进一步：,选择元素时，还可以指定元素类型： 前面的例子中在对子元素计数时都未考虑元素的类型，:nth-of-type和:nth-last-of-type 则可以指定你想选择的元素类型。 见教材的例子。,最后还有一个,另一个便利的选择器是否定伪类选择器，用于选择不满足某些条件的元素。 nav ul li:not(.internal) a color: #fe0208; 选择没有internal 类的列表项,至此我们已经学习了结构伪类,伪元素,区别伪类和伪元素 CSS3 要求对伪元素使用两个冒号以便与伪类进行区别。 p:first-letter选择中的第一个字母 p:first-line选择中的第一行文字 :first-line 伪元素非常方便的一个特点是它会根据视口自动变化。例如如下的规则： p:first-line color: #ff0cff; 总是只有第一排被特殊显示。,自定义网页字体,想要好看的字体？以往的做法是 CSS3 提供了一种自定义网页字体的方法，用它可以描绘美丽的新时代。,font-face 规则,使用font-face 嵌入网页字体 首先下载字体（请注意控制自定义字体的文件尺寸） 解压到一个文件夹，如fonts 在css中添加： font-face font-family: BebasNeueRegular; src: url(./fonts/BebasNeue-webfont.eot); src: url(./fonts/BebasNeue-webfont.eot?#iefix) format(embedded-opentype), url(./fonts/BebasNeue-webfont.woff) format(woff), url(./fonts/BebasNeue-webfont.ttf) format(truetype), url(./fonts/BebasNeue-webfont.svg#BebasNeueRegular) format(svg); font-weight: normal; font-style: normal; 看起来很难记忆，但是复制粘贴很容易,使用新字体 nav ul li a height: 42px; line-height: 42px; text-decoration: none; text-transform: uppercase; font-family: BebasNeueRegular; font-size: 1.875em; /*30 16 */ color: black; 将文字大小转换为相对尺寸 使用百试不爽的“目标元素尺寸上下文元素尺寸=百分比尺寸”公式,一个新问题,字体模糊.因为 大多数浏览器都会为标题元素应用标准的font-weight（一般都是700） 解决方法就是始终为应用了font-face 字体的标题元素设定font-weight 属性： .productIntro h1 font-family: CaudexBold, Times New Roman, Times, serif; font-weight: 400; font-size: 2.63636364em; line-height: 1em; ,新的CSS3 颜色格式和透明度,CSS3 允许我们使用新方法如RGB 或HSL 来声明颜色。 另外，我们还能在这两个方法后边追加一个透明通道（分别是RGBA 和HSLA）。,颜色用#号加上一个16进制值来表示： nav ul li:nth-child(odd) a color: #fe0208; 在CSS3 中，该值可以使用RGB 值来描述： nav ul li:nth-child(odd) a color: rgb(254, 2, 8); ,问题：如何知道RGB数值？,大多数图片编辑器在它们的颜色选择器中会同时显示颜色的十六进制值和RGB 值。如Photoshop：,HSL（有点跨界了）,除了 RGB，CSS3 还可使用HSL（色相、饱和度、亮度）模式来声明颜色。 HSL 被广泛使用是因为它非常容易理解（真的么？），根据该模式提供的颜色值就能描绘出具体颜色。 rgb(255, 51, 204)是什么颜色？ hsl(315, 100%, 60%)呢？可以猜测大概是个粉红色之类。现在就学习这种猜颜色“特异功能”。 HSL 模式基于一个360的色相环，第一个数字代表色相，60时为黄色，120时为绿色，180时为青色，240时为蓝色，300时为洋红色，360时为红色。 所以前面提到的HSL 颜色色相为315，所以很容易看出它介于洋红（300）和红（360）之间。其后的两个值分别表示饱和度和亮度，值为百分比，用于改变基础的色相。如果想要更加饱满的颜色，则第二个值使用一个高一点的百分比即可。最后一个值控制亮度，可在0%的全黑到100%的全白之间变化。,提问,如果只是想让文字颜色稍微变深一点？ 可以使用相同的HSL 值，然后只修改一下亮度百分比（最后一个值）。改大还是改小？,如何记住“HSL 模式基于一个360的色相环，第一个数字代表色相，60时为黄色，120时为绿色，180时为青色，240时为蓝色，300时为洋红色，360时为红色。” Young Guys Can Be Messy Rascals（作者） 赤橙黄绿青蓝紫（从0到300） 你能想出什么记忆方法吗？（除了蠢背） 不用依赖颜色选择器是有多厉害！,最后一个问题，针对IE6、IE7 和IE8 提供备用颜色值： nav ul li:nth-child(odd) a color: #fe0208; color: hsl(359, 99%, 50%); ,透明通道,HSLA： #wrapper margin-right: auto; margin-left: auto; width: 96%; /* 最外层的DIV */ max-width: 1414px; background-color: hsla(0, 0%, 100%, 0.8); RGBA 的语法和HSLA 的基本一样，即在颜色值后追加一个透明度值： background-color: rgba(255, 255, 255, 0.8);,HSLA和RGBA使得我们不用再依赖透明图片（如PNG 或GIF 图片）来实现这类视觉效果，这对制作响应式设计是个绝好的消息。,