响应式设计入门-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 thindotted 999 column width 12em 效果如何 需要自行验证 文字换行CSS3使用了一个简单的声明解决了这个问题 凑巧的是老版本IE均支持该声明 甚至可以追溯到IE5 5 word wrap break word 需要给外层的包裹元素追加该声明 CSS3属性选择器 CSS的属性选择器img alt border 3pxdashed e15f5f 这个选择器会匹配页面标签中任意一个含有alt属性的图片标签 还可以通过设定属性值来缩小匹配范围 如下代码所示 img alt atwi oscar border 3pxdashed e15f5f 这样就仅会匹配alt属性值为atwi oscar的图片 CSS3可以根据属性的部分内容来选择元素 三种匹配模式分别是 以特定前缀开头 包含特定字符串 以特定后缀结尾 如果我想选择网站中所有alt属性值以film开头的图片 则对应代码如下 img alt film border 3pxdashed e15f5f 该选择器的关键字符是 符号 它的意思是 以此开头 如果我想选择网站中所有alt属性值中包含film字符串的图片 则对应代码如下 img alt film border 3pxdashed e15f5f 该选择器的关键字符是 符号 它的意思是 包含 如果我想选择网站中所有alt属性值以film结尾的图片 则对应代码如下 img alt film border 3pxdashed e15f5f 该选择器的关键字符是 它的意思是 以此结尾 想一想 body id 2 navHistory color 00b4ff 该选择器选择了什么 注意组织语言 如何做一个导航栏 导航栏使用非常普遍 导航栏的标签代码如下 Why SynopsisStills PhotosVideos clipsQuotesQuiz 首先 我们设定nav元素使用table布局 nav display table morecode 注 这些表格只会存在于CSS中 并不会对页面标签产生任何影响 我们只是告诉浏览器让这些元素表现得如同表格一样 但其实它们并不是表格 然后将显示为table row navul display table row morecode 最后将列表项显示为table cells navulli display table cell morecode 最后 使用CSS3选择器将最后一个列表项的文字置为右对齐 将第一个列表项的文字置为左对齐 navulli last child text align right navulli first child text align left 注意那个 号 称做伪选择器 进阶 交替样式 导航栏链接交替使用不同的文字颜色 这个怎么实现呢 CSS3还提供了一个选择器 可以在不追加额外标签代码的情况下解决该问题 nth child even 如 navulli 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则可以指定你想选择的元素类型 见教材的例子 最后还有一个 另一个便利的选择器是否定伪类选择器 用于选择不满足某些条件的元素 navulli 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 看起来很难记忆 但是复制粘贴很容易 使用新字体navullia 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属性 productIntroh1 font family CaudexBold TimesNewRoman Times serif font weight 400 font size 2 63636364em line height 1em 新的CSS3颜色格式和透明度 CSS3允许我们使用新方法如RGB或HSL来声明颜色 另外 我们还能在这两个方法后边追加一个透明通道 分别是RGBA和HSLA 颜色用 号加上一个16进制值来表示 navulli nth child odd a color fe0208 在CSS3中 该值可以使用RGB值来描述 navulli 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 时为红色 YoungGuysCanBeMessyRascals 作者 赤橙黄绿青蓝紫 从0 到300 你能想出什么记忆方法吗 除了蠢背 不用依赖颜色选择器是有多厉害 最后一个问题 针对IE6 IE7和IE8提供备用颜色值 navulli 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图片 来实现这类视觉效果 这对制作响应式设计是个绝好的消息