响应式设计入门-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的属性选择器 img[alt] { border: 3px dashed #e15f5f; } 这个选择器会匹配页面标签中任意一个含有alt 属性的图片标签： img class=oscarMain src=img/oscar.png alt=atwi_oscar / 还可以通过设定属性值来缩小匹配范围。如下代码所示： img[alt=atwi_oscar] { border: 3px dashed #e15f5f; } 这样就仅会匹配alt 属性值为atwi_oscar 的图片 CSS3可以根据属性的部分内容来选择元素： 三种匹配模式分别是： 以特定前缀开头； 包含特定字符串； 以特定后缀结尾。 如果我想选择网站中所有alt 属性值以film 开头的图片，则对应代码如下： img[alt^=film] { border: 3px dashed #e15f5f; } 该选择器的关键字符是^符号，它的意思是“以此开头” 如果我想选择网站中所有alt 属性值中包含film 字符串的图片，则对应代码如下： img[alt*=film] { border: 3px dashed #e15f5f; } 该选择器的关键字符是*符号，它的意思是“包含” 如果我想选择网站中所有alt 属性值以film 结尾的图片，则对应代码如下： img[alt$=film] { border: 3px dashed #e15f5f; } 该选择器的关键字符是$，它的意思是“以此结尾”。 想一想 body[id^=2] .navHistory { color: #00b4ff; } 该选择器选择了什么？（注意组织语言。） 如何做一个导航栏 导航栏使用非常普遍，导航栏的标签代码如下： nav role=navigation ul lia href=#Why?/a/li lia href=#Synopsis/a/li lia href=#Stills/Photos/a/li lia href=#Videos/clips/a/li lia href=#Quotes/a/li lia href=#Quiz/a/li /ul /nav 首先，我们设定nav 元素使用table 布局： nav { display: table; /* more code... */ } 然后将ul显示为table-row： nav ul { display: table-row; /* more code... */ } 最后将列表项显示为table-c