CSS3的学习总结

来源：互联网发布：产品的网络营销策划书编辑：程序博客网时间：2024/05/21 10:32

1、强大的选择器
新增的属性选择器、结构伪类选择器、UI元素状态伪类选择器、其他新增选择器

2、增强的文本和颜色功能

text-shadow    定义文本阴影或模糊效果text-overflow   定义省略文本的处理方式word-wrap       定义文本超过指定容器的边界时是否断开转行

RGBA    RGBA是在RGB的基础上增加一个透明度(A)的设置opacity   定义颜色的不透明度

3、新增的弹性盒模型

box-orient属性——定义盒子的布局取向box-direction属性——定义盒子的布局顺序box-ordinal-group属性——定义盒子布局位置box-flex属性——定义盒子的弹性空间box-pack和box-align属性——管理盒子的空间box-lines属性——空间溢出管理

4、完善的盒模型和UI设计

border-color属性——定义多色边框border-image属性——定义边框背景色border-radius属性——设计圆角box-shadow属性——设计块阴影

5、背景样式

background-origin ： border | padding | content

取值：
border：从border区域开始显示背景。
padding：从padding区域开始显示背景。
content：从content区域开始显示背景。

background-clip ： border-box | padding-box | content-box | no-clip

取值：
border-box：从border区域向外裁剪背景。
padding-box：从padding区域向外裁剪背景。
content-box：从content区域向外裁剪背景。
no-clip：从border区域向外裁剪背景。

background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain

取值：
<length>：由浮点数字和单位标识符组成的长度值。不可为负值。
<percentage>：取值为0%到100%之间的值。不可为负值。

语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

CSS3选择器

（1）属性选择器

这里写图片描述

（2）结构性伪类选择器

:root选择器是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。

:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。

:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

:only-of-type选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

（3）其他选择器

:enabled选择器在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

:disabled选择器用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。

:checked选择器在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的

:read-only选择器伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

:read-write选择器选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动。

CSS3中的变形

（1）旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

div{     -webkit-transform: rotate(-20deg);     -moz-transform: rotate(-20deg);     transform:rotate(-20deg);   }

（2）扭曲 skew()

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

Skew()具有三种情况：
1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；

 div{    -webkit-transform: skew(45deg);    -moz-transform:skew(45deg)     transform:skew(45deg);    }

（3）缩放 scale()

缩放 scale()函数让元素根据中心原点对对象进行缩放。

缩放 scale 具有三种情况：
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
2、scaleX(x)元素仅水平方向缩放（X轴缩放）
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

div{     -webkit-transform:scale(0.8);     -moz-transform: scale(0.8);     transform:scale(0.8);  }

（4）位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

translate我们分为三种情况：
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2、translateX(x)仅水平方向移动（X轴移动）
3、translateY(Y)仅垂直方向移动（Y轴移动）

 div{         -webkit-transform:translate(-50%,-50%);         -moz-transform:translate(-50%,-50%);         transform:translate(-50%,-50%);      }

（5）矩阵 matrix()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素

div{          -webkit-transform: matrix(1,0,0,1,50,50);           -moz-transform:matrix(1,0,0,1,50,50);           transform: matrix(1,0,0,1,50,50);       }

（6）原点 transform-origin

这里写图片描述

 div{     -webkit-transform-origin: top right;     -moz-transform-origin: top right;     transform-origin: top right;    }

（7）过渡属性 transition-复合属性

div {  width: 200px;  height: 200px;  background-color:red;  margin: 20px auto;  -webkit-transition: background-color .5s ease .1s;  transition: background-color .5s ease .1s;}div:hover {  background-color: orange;}

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性
这里写图片描述

transition-duration:指定完成过渡所需的时间

transition-timing-function:指定过渡函数
这里写图片描述

transition-delay:指定开始出现的延迟时间

CSS3中的动画

@keyframes around{  0% {    transform: translateX(0);  }  25%{    transform: translateX(180px);  }  50%{     transform: translate(180px, 180px);   }  75%{    transform:translate(0,180px);  }  100%{    transform: translateY(0);  }}div {  width: 200px;  height: 200px;  border: 1px solid red;  margin: 20px auto;}div span {  display: inline-block;  width: 20px;  height: 20px;  background: orange;  border-radius: 100%;  animation-name:around;  animation-duration: 10s;  animation-timing-function: ease;  animation-delay: 1s;  animation-iteration-count:infinite;}

（1）Keyframes关键帧

在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{  0%{   background: red;  }  100%{    background: green;  }}

（2）调用动画

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

语法：

animation-name: none | IDENT[,none|DENT]*;

1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）；

2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

（3）设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

语法规则

animation-duration: <time>[,<time>]*

取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。

（4）设置动画播放方式

这里写图片描述

（5）设置动画开始播放的时间

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。

语法规则：

animation-delay:<time>[,<time>]*

（6）设置动画播放次数

animation-iteration-count属性主要用来定义动画的播放次数。

语法规则：

animation-iteration-count: infinite | <number> [, infinite | <number>]*

1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。

2、如果取值为infinite，动画将会无限次的播放。

举例：

通过animation-iteration-count属性让动画move只播放5次，代码设置为：

animation-iteration-count:5;
注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

（7）设置动画播放方向

animation-direction属性主要用来设置动画播放方向，其语法规则如下：

animation-direction:normal | alternate [, normal | alternate]*

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

（8）设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态。

参数：

其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

（9）设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

这里写图片描述

布局样式相关

  .columns {    -webkit-columns:150px 3;    -moz-columns:150px 3;    -o-columns:150px 3;    -ms-columns:150px 3;    columns:150px 3;   -webkit-column-gap:2em;   -moz-column-gap:2em;   -o-column-gap:2em;   -ms-column-gap:2em;   column-gap:2em;  -webkit-column-rule:3px solid #ccc;  -moz-column-rule:3px solid #ccc;  -o-column-rule:3px solid #ccc;  -ms-column-rule:3px solid #ccc;  column-rule:3px solid #ccc;  -webkit-column-span:all;  -moz-column-span:all;  -o-column-span:all;  -ms-column-span:all;  column-span:all;     }

（1）多列布局——Columns

语法：

columns：<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数：列宽和列数。

column-width: auto | <length>column-count：auto | <integer>

（2）列间距column-gap

column-gap主要用来设置列与列之间的间距，其语法规则如下：

column-gap: normal || <length>

（3）列表边框column-rule

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

语法规则：

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

（4）跨列设置column-span

column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。

column-span: none | all

取值说明：

none此值为column-span的默认值，表示不跨越任何列。

all这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

（5）盒子模型

box-sizing: content-box | border-box | inherit

这里写图片描述

0 0