CSS3知识点总结

/* E[attr~=val] 表示的一个单独的属性值这个属性值是以空格分隔的*/
.attr2 a[class~="download"] {
color: red;
}

/* E[attr|=val] 表示的要么一个单独的属性值要么这个属性值是以"-"分隔的*/
.attr3 a[class|="download"] {
color: red;
}

/* E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
.attr4 a[class*="download"] {
color: red;
}

/* E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
.attr5 a[class^="download"] {
color: red;
}

/* E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 */
.attr6 a[class$="download"] {
color: red;
}

3.1.2 伪类选择器

参考手册

重点理解E是用来参考确定其父元素的，nth-child(n) 对应根据E元素确定的父元素的所有子元素，nth-of-type(n) 的不同之处在于其对应的是只有E元素，会忽略其子元素。（此处要配合案例加强理解）

E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素

E:nth-of-type(n) 第n个子元素，计算方法只是E元素，会忽略其子元素的

存在

E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。

E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。

n遵循线性变化，其取值1、2、3、4、...

关于n的取值范围：

1、当n做为一个独立值时，n取值为n>=1，例如nth-child(n)

2、当n做一个系数时，n取值为n>=0者n<0，例如nth-child(2n+1)、nth-child(-n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1；

E:only-child 表示当前以E确定的父元素，除E之外并无其它子元素（独生子）；

E:only-of-type表示当前以E确定的父元素，除E之外不能包含其它和E同类型的子元素；

E:target 结合锚点进行使用，处于当前锚点的元素会被选中；

E:empty 选中没有任何子节点的E元素；购物车案例中的小图标是可以用的。更加方便。

3.1.3 伪元素选择器

E::selection 可改变选中文本的样式

E::placeholder 可改变placeholder默认样式，这个存在明显的兼容问题，比如::-webkit-input-placeholder，具体参考手册进行对比。

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待。

":" 与 "::" 区别在于区分伪类和伪元素

3.2 颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，不具有继承性，即不会影响子元素的透明度。

Red、Green、Blue、Alpha即RGBA

Hue、Saturation、Lightness、Alpha即HSLA

R、G、B 取值范围0~255

H 取值范围0~360，0/360表示黑色、120表示绿色、240表示蓝色

S 取值范围0%~100%

L 取值范围0%~100%

A 取值范围0~1

关于透明度：

1、opacity子元素会继承父元素的透明度，在实际开发中会带来干扰；

2 、transparent 设置透明度时完全类似于“玻璃”一样的透明；

3.3 文本

参考手册

文字阴影与边框阴影相似，可分别设置偏移量、模糊度、颜色（可设透明度）。

单行文本溢出，需要配合overflow:hidden; white-space: nowrap;

难理解的点：

自已要多试着理解一下关于white-space的各个属性值之间的差异；

white-space：pre 预先格式化保留文本的全部内容

pre-line把空格都去掉然后连接子一起

nowrap空格都去掉不换行

word-break:all 把一行文字中的每个单词看成一个整体，在换行的时候保证每个文字的完整性 break-word是整个词打断

上述方法只能解决单行文本的溢出问题，多行文本溢出处理可参照下面的方法，但是有比较严重的兼容性，需要慎重选择，比较完备的多行溢出需要JS辅助完成，可自行尝试。

文本溢出之后如何加上.......进行操作。

多行文本文字溢出处理，非标准属性，可应用于移动端

section:nth-child(4) p {
width: 200px;
border: 1px solid #CCC;
text-overflow: ellipsis;
/*white-space: nowrap;*/多行文本溢出就不需要用white-space
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}

了解常握white-space 使用

3.4 边框

其边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。

.item:nth-child(3) .border-radius {
height: 90px;
border-radius: 90px 90px 0 0;
}

/*左上角*/
.item:nth-child(4) .border-radius {
/*height: 90px;*/
border-radius: 90px 0 0 0;
}

/*四分之一圆*/
.item:nth-child(5) .border-radius {
width: 90px;
height: 90px;
border-radius: 90px 0 0 0;
}

3.4.1 边框圆角

圆角处理时，脑中要形成圆、圆心、长半径、短半径的概念，正圆是椭圆的一种特殊情况。

可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，参考手册练习熟悉各种简写方式。

表格运用圆角需要要 border-collapse: separate;

当圆角半径小于或等于边框宽度时，元素内角是直角

如何在PS中查看圆角半径？

3.4.2 边框图片

设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，

其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图

round 会自动调整尺寸，完整显示边框图片。

此图贴图

repeat 单纯平铺多余部分，会被“裁切”而不显示。

此处贴图

3.4.3 边框阴影

设置边框阴影不会影响盒子的布局，即不会影响其兄弟元素的布局

spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值

可以设置多重边框阴影，实现更好的效果，增强立体感。

border-shadow:inset 20px 20px -10px #000;

其中inset 代表阴影向内偏移。第一个20px 是水平偏移量第二个20px是垂直方向偏移量第三个参数-10px 代表着模糊度最后一个参数代表着颜色。

3.5 盒模型

关于盒模型存在两种形式，分别是W3C标准盒模型和IE盒模型，如下图所示，其区别主要在于宽度和高度的计算方式，CSS3对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。

IE盒模型只会出现在IE5版本和IE6+的怪异模式中。

3.6 背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。

contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。

background-size会以background-clip设定的盒模型计算

background-clip裁切区域

background-origin裁切区域

这两个的属性设置都有：border-box content-box padding-box

background-size:控制水平和垂直两个方向上的缩放可以用的参数百分比 || px值 || cover || contain

背景图片尺寸在实际开发中应用十分广泛。

参照手册

3.7 渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

background-imag:inerar-gradient(90,yellow 30%,green50%)

参数第一个参数是渐变的方向，垂直向上的方向是0度然后按照顺时针旋转，90度就是相当于圆的四分之一位置。

既然是渐变肯定或有渐变颜色的变换。这里是从yellow 过度到 green的渐变。这里需要分为几个阶段。首先是0-30%是黄色，30%-50%是黄色到绿色的渐变颜色50%之后便是绿色了。后面的百分比代表着颜色相对于渐变色的文本框百分比的位置，就是从哪里开始渐变的。

可分为线性渐变、径向渐变、重复渐变。

线性渐变指沿着某条直线朝一个方向产生渐变效果。

此处可配图

径向渐变指从一个中心点开始沿着四周产生渐变效果

此处可配图

关于圆的知识同边框圆角章节的介绍

3.8 伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用，使得开发人员一下子就过上了小康的生活。

伸缩盒模型经历了几次演变，大致分为旧版伸缩布局、过渡伸缩布局、新版伸缩布局，同样为了避免混淆，我们以学习新版伸缩布局为主。

3.8.1 新版伸缩布局

这里我们需要引入一些新的概念：

主轴：Flex容器的主轴主要用来配置Flex项目。

侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。

主轴和侧轴并不是固定不变的，通过flex-direction可以调整。

另个两个版本伸缩布局其实现思路与新版基本一致，区别在于其属性及属性值不同，熟练掌握新版伸缩布局后，要参照对比另外两个版本的不同。

3.9 多列布局

类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。

参照手册

3.10 过渡

过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

帧动画：通过一帧一帧的关键画面按照固定顺序和速度播放。如电影胶片

补间动画：自动完成从起始状到终止状的的过度。

关于补间动画更多学习可查看http://mux.alimama.com/posts/1009

3.11 动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

贝塞尔曲线限定了过渡的轨迹。

.animation {
width: 30px;
height: 30px;
background-color: blue;
/*动画名称*/
animation-name: change;
/*动画持续时间*/
animation-duration: 1s;
/*动画结束后的状态*/
animation-fill-mode: forwards;
/*无限次播放*/
animation-iteration-count: infinite;
/*动画延时*/
animation-delay: 1s;
/*动画暂停*/
animation-play-state: paused;
/*动画反方向*/
animation-direction: alternate;
/*动画速度*/
animation-timing-function: linear;
}

参考手册

3.12 转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

2D 转换

translate(x,y) x、y 可为负值，相对自身移动，并未脱离文档流。

左手坐标系：伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。

左手法则：左手握住旋转轴，竖起拇指指向旋转轴正方向，正向旋转方向就是其余手指卷曲的方向。

3D坐标轴，用X、Y、Z分别表示空间的3个维度，三条轴上互相垂直。

3.13 媒体查询

由于网页呈现终端设备越来越趋向于多样化，尤其是移动终端（手机），具有不同屏幕尽寸、不同分辨率，为了保证网页能十分友好的呈现，CSS3为开发人员提供了可以识别呈现终端的方法，这样便可以有针对性的为不同的呈现终端分别进行处理，被广泛应用于响应式开发中。

html 标签方式：

其中min-width:1200px 代表着只要屏幕，大于或者等于1200px就会触发的操作，就是说屏幕的宽度的最小值至少是1200px 我才回变化。而max-width代表着屏幕的最大的宽度是600px的时候，就会触发的操作。

css 属性方式：

常使用的是检测设备宽度

参考手册

第4章Web字体

开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。

支持程度比较好，甚至IE低版本浏览器也能支持。

4.1 字体格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

/*声明字体*/
@font-face {
font-family: 'LiDeBiao-Xing3581258';
src: url('./fonts/LiDeBiao-Xing3.eot');
src: url('./fonts/LiDeBiao-Xing3.eot?#iefix') format('embedded-opentype'),
url('./fonts/LiDeBiao-Xing3.woff') format('woff'),
url('./fonts/LiDeBiao-Xing3.ttf') format('truetype'),
url('./fonts/LiDeBiao-Xing3.svg#LiDeBiao-Xing3') format('svg');
font-weight: normal;
font-style: normal;
}

// 使用字体是是自定义的字体，需要把文件引入到字体文件中，方便加载到服务器避免用户的计算机不支持所输入的字体格式。
p.demo {
font-family: "LiDeBiao-Xing3581258";
font-size: 24px;
}

1、TureTpe(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2、OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

3、Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、Embedded Open Type(.eot)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

5、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

关于字体介绍摘自http://www.w3cplus.com/content/css3-font-face/

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。

推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体

4.2 字体图标

其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？

答案是肯定的。

<link rel="stylesheet" href="./css/font-awesome.css">
<style>
p {
width: 600px;
height: 400px;
margin: 0 auto;
font-size: 80px;
color: red;
}
</style>
</head>
<body>
<p>
<i class="fa fa-battery-1"></i>
</p>

常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体库，然后就可以像使用文字一样使用图标了。

优点：

1、将所有图标打包成字体库，减少请求；

2、具有矢量性，可保证清晰度；

3、使用灵活，便于维护；

Font Awesome 使用介绍

http://fontawesome.dashgame.com/

定制自已的字体图标库

http://iconfont.cn/

https://icomoon.io/

第5章兼容性

通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。

第6章高级应用

Surpass-oneself

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3知识点总结

CSS3 目录 2第1章 CSS3简介 41.1 CSS3的现状 41.2 如何对待 4第2章准备工作 42.1 统一环境 42.1 如何使用手册 5第3章基础知识 53.1 选择器 53.1.1 属性选择器 53.1.2 伪类选择器 63.1.3 伪元素选择器 63.2 颜色 63.3 文本 73.4 边框 73.4.1 边框圆角 83.4.2 边框图片 83.4.3 边框阴...
复制链接

扫一扫