响应式Web设计:HTML5和CSS3实战(第2版)
第五章 CSS3 新特性
5.1 CSS能实现什么要心里有数
5.2 CSS 规则
5.3 CSS 技巧
- CSS 响应式多列布局
- 例子：
column-width: 12em;
- 固定列数，可变宽度：
.main{
column-count: 3;
}
+ 添加列间距和分隔线
.mian{
column-gap: 2em;
column-rule: thin dotted #999;
column-width: 12em;
}
5.4 断字
- 如果要将一行很长的文字放入一个比较窄的容器内
- 在容器上加一个
word-wrap: break-word;
- 此时文字会在需要的地方拆开一个独立的单词，完成换行
- 截短文本
.main{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
- 创建水平滚动面板
- white-space: nowrap
- display: inline-block / inline-flex / inline-table
- :after 和 :before
- 为了能保证其能显示，必须包含一个content，就算为' '空白也行
- 隐藏滚动条
.scroll-wrapper {
width: 100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
// 在webkit设备上出现
-webkit-overflow-scrolling: touch;
// 在支持的IE中删除滚动条
-ms-overflow-style: none;
}
// 防止webkit浏览器出现滚动条
.scroll-wrapper::-webkit-scrollbar{
display: none;
}
- 此时空间有限时，就会出现水平滚动面板，否则会自适应
5.5 在CSS中创建分支
- 完全基于CSS
- 借助js库，获得广泛兼容性
5.5.1 特性查询
- 涵盖不支持@support的设备，需要先写好默认的声明
.item{
display: inline-block;
}
@supports (display: flex;) {
.item{
display: inline-flex;
}
}
5.5.2 组合条件
@supports ((display: flex;) and (pointer: coarse)) or (transform: translate3d(0, 0, 0)) {
.item{
display: inline-flex;
}
}
5.5.3 Modernizr
- 实现分支的最可靠方式
- 在head中引入Modernizr.js
- 检测特性后，会在html上加一些类
5.6 新CSS3选择符
5.6.1 属性选择符
/*选择包含alt属性的img元素*/
img[alt]{
// ...
}
/*选择包含‘data-sausage’的任何元素*/
[data-sausage]{
// ...
}
/*具体值属性*/
img[alt="sausage"]{
// ...
}
5.6.2 CSS3子字符串匹配属性选择符
- 以。。。开头
- ^=
<img alt="film-china" src="...">img[alt^="film"]{}
- 包含。。。
- *=
<p data-xxx="aa bb cc">...</p>p[data-xxx*="bb"]{}
- 以。。。结尾
- $=
<p data-xxx="aa bb cc">...</p>p[data-xxx$="cc"]{}
5.6.3 属性选择符发注意事项
- 对属性选择符来说，属性是一个字符串
- 某两个子字符串存在为依据选择元素
[data-xxx*="aa"][data-xx*="bb"]{
...
}
5.6.4 属性选择符选择以数值为开头的ID & class
- H5之前，以数字开头的ID & class是无效的
- H5之后允许了，但是ID中不能有空格
- 但css不允许使用以数值开头的选择符
- 用属性选择符可以绕开限制
5.7 CSS3 结构化伪类
5.7.1 last-child
- CSS2.1中有匹配第一子项的伪类：
div:first-child {}
- CSS3新添了匹配最后一个子项的伪类：
div:last-child {}
- 还有专门针对只有一项的选择符 :only-child
p:only-child{...}- 将样式应用于只有一个p元素的父元素
- Internet Explorer 不支持
5.7.2 nth-child
5.7.3 理解nth
- CSS3 提供了一下几个基于nth的规则：
- nth-child(n)
- nth-last-child(n)
- nth-of-type(n)
- nth-last-of-type(n)
- 以上n有两种形式
- 传入整数
- 传入表达式
- nth-child(2n+3) 会从第3项开始，然后每2个选1个
- nth-child(3n-2) 会从倒数第2项开始，然后每3个选1个
- nth-child(-2n-3) 先找到第三个的位置，向反方向每2个选1个
- n默认是1
- 区分标记类型的选择符
- nth-of-type(n)
- nth-last-of-type(n)
-
.nav:nth-of-type(-2n+3) {...}
- 先找到类名为nav的元素集合的第三个位置，看tag为哪种，然后选择目标就都是这种tag，反方向每2个选1个
- CSS中的索引不是从0开始，而是从1开始
5.7.4 nth与响应式开发的关联
- 基于nth的伪类选择符可以链式使用
-
.nav:nth-child(4n+1):nth-last-child(-n+4) {} 每4个选1个, 但仅限于最后4项
5.7.5 :not
- :not 为取反的选择符，即“非。。。”
-
div:not(.list) {} 给所有不是list类的div添加样式
5.7.6 :empty
- 如果有一个元素只添加了内边距，但会在将来某个时刻动态插入或隐藏
- 可以用:empty来控制这个元素如果内容为空时，改变一些样式
div .thing:empty { display: none;}
- 注意事项
5.7.8 :first-line
- 这个伪类选择的第一行内容会根据视口大小不同而不同
p::first-line{color: red;}
5.8 CSS自定义属性和变量
- :root伪类可以把自定义的属性保存在文档根元素上，调用的时候用var
- 首先：
:root{ --FontSize: 16px; }
- 然后调用
.main{ font-size: var(FontSize);}
5.9 计算属性 calc
.thing{ width: calc(50% - 10px); }- 加减乘除都没问题
- 除了安卓4.3及以下版本中的chrome，其他浏览器都支持
5.10 Web 排版
5.10.1 @font-face
- 一种字体为了兼容多个浏览器，会有多个格式的版本
- @font-face是为了应用在线字体显示文本
5.10.2 运用
- 浏览器依次尝试属性列表中的样式，忽略不能识别的内容
5.10.3 缺点
- 使用@font-face后 ，文件大小是个问题
- 字体大小会影响网站性能
5.12 CSS3 中的透明度新特性 （略）
