css3新特性

c3有哪些新特性

介绍

css3是CSS(层叠样式表)技术的升级版本。CSS3已完全向后兼容,所以你就不必改变现有的设计,浏览器将永远支持CSS2。一些最重要的css3模块包括:选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 ......

新特性

一、css3的新选择器
1、标签选择器(元素选择器、标记选择器)

div {}

1)所有的标签都可以作为选择器使用
2)适用于更改某一种元素的默认样式

2、id选择器

<div id="main"></div>
#main {}

1)id是元素的唯一标志,单个页面中不可重复
2)id的命名不要用关键字(标签和属性名)
3)一般使用id给大容器命名

3、class选择器(类选择器)

<div class="box"></div>
.box {}

1)class名称可以重复使用,适用于设置一类的样式
2)多个class名用空格隔开,例<div class="box wrap"></div>

4、通配符

* {}

通配符写法为*,含义就是所有标签
常用于重置样式
* { margin: 0; padding: 0; }

5、群组选择器

.box, #main, p {}

当有多个选择符应用相同样式时,可以将选择符用英文逗号,分割的方式合并为一组

6、后代选择器

.box p {}

使用空格隔开两个选择符,上方例子代表拥有box类容器里的所有p标签

7、伪类选择器

a:link {}    /* 未访问的链接状态 */
a:visited {} /* 已访问的链接状态 */
a:hover {}   /* 鼠标滑过链接状态 */
a:active {}  /* 鼠标按下去时的状态 */

说明:
1)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:
	a,a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
2)为了简化代码,可以把伪类选择符中相同 的声明提出来放在a选择符中;
	例如:a{color:red;}     a:hover{color:green;} 
	表示超链接的三种状态都相同,只有鼠标划过变化颜色

二、盒模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

css3新特性

主要的属性就以下几个:width、height、padding、border、margin。如下:

  • width和height: 内容的宽度、高度(不是盒子的宽度、高度)。

  • padding: 内边距。

  • margin: 外边距

  • border: 边框

  • Content(内容): 盒子的内容,显示文本和图像。

注意:在IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度

三、背景和边框

边框

1、border-image 边框

2、border-radius — 圆角

border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

语法:border-radius: 1-4 length|% / 1-4 length|%;

tip:
border-radius:10px (代表四个点的半径都是10px)

border-radius:10px 20px (代表左上右下半径为10px 右上左下半径为20px)

border-radius:10px 20px 30px(代表左上半径为10px 右上左下半径为20px 右下半径为30px)

border-radius:10px 20px 30px 40px(顺时针左上开始,四个角的值)

3、box-shadow — 盒子阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

eg: .box-shadow{ box-shadow:4px 2px 6px 7px #333333 inset; }

同一盒子,可以同时加多个阴影,阴影之间用“,”隔开

.box-shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }

四、文字特效

主要包括以下几种:

  • text-shadow 适用于文本阴影。
实例:
h1
{
    text-shadow: 5px 5px 5px #FF0000;
}
  • box-shadow 适用于盒子阴影
实例:
div {
    box-shadow: 10px 10px 5px #888888;
}
  • text-overflow 文本溢出属性指定应向用户如何显示溢出内容
实例:
p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}
  • word-wrap 某个单词太长,不适合在一个区域内,它扩展到外面:
实例:
允许长文本换行:

p {word-wrap:break-word;}
  • word-break 单词拆分换行属性指定换行规则:
实例:
p.test1 {
    word-break: keep-all;
}
 
p.test2 {
    word-break: break-all;
}

五、2D/3D转换

2D转换

主要有以下几种方式:

  • translate()
    translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
实例:
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
  • rotate()
    rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
实例:
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
  • scale()
    scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
实例:
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
  • skew()

语法:

transform:skew(<angle> [,<angle>]);

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
1)skewX();表示只在X轴(水平方向)倾斜。
2)skewY();表示只在Y轴(垂直方向)倾斜。

实例:
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
  • matrix()
    matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

实例:
利用matrix()方法旋转div元素30°

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

3D转换

  • rotateX() 围绕其在一个给定度数X轴旋转的元素。
实例:
div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}
  • rotateY() 围绕其在一个给定度数Y轴旋转的元素。
实例:
div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

2D和3D转换的属性非常之多,有需要了解的朋友可以参考官方文档,这里就不一一赘叙了!

六、动画

CSS3中的动画分为:平移动画、过渡动画和自定义动画三种。

  • 平移动画:transform: 平移translate / 旋转rotate / 放大scale / 倾斜skew;

  • 过渡动画:transition:  transition是一个复合属性,包括:
    transition-property:过渡属性(即哪些元素使用过渡动画);
    transition-delay:过渡延时;
    transition-duration:过渡时间;
    transition-timing-function:过渡方式(linear匀速播放、ease-in-out以低速开始和结束、ease-in以低速开始、ease-out低速结束、ease默认,以低速开始,然后加快,在结束前变慢。 )
    tip:如果写复合属性,当出现两个时间,则第一个为动画时间,第二个表示延时时间;如果只有一个时间,则表示的时动画时间。

  • 自定义动画(帧动画):animation: 动画名称   时间   运动方式   是否循环;
    animation-name: zidingyi; 动画名称;
    animation-delay: 1s ; 动画延迟时间;
    animation-direction: alternate; 动画的播放方向(alternate表示第135次正向播放,246次反向播放);
    animation-duration: 3s; 动画的播放时间;
    animation-iteration-count: 1; 动画的播放次数 (如果其后的属性值为infinite,则表示自定义的动画一直循环播放;
    animation-play-state: running; 动画播放是否暂停;
    animation-timing-function: linear; 动画的播放方式;

七、多列布局

  • column-count 指定了需要分割的列数。
    以下实例将 元素中的文本分为 3 列:
实例:
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
  • ccolumn-gap 指定了列与列间的间隙。
    以下实例指定了列与列间的间隙为 40 像素:
实例:
div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
  • column-rule-style 指定了列与列间的边框样式:
实例:
div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}
  • column-rule-width 指定了两列的边框厚度:
实例:
div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}
  • column-rule-color 指定了两列的边框颜色:
实例:
div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}
  • column-rule 是 column-rule-* 所有属性的简写。
    以下实例设置了列直接的边框的厚度,样式及颜色:
实例:
div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
  • column-span 指定元素跨越多少列
    以下实例指定 h2 元素跨越所有列:
实例:
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
  • column-width 指定了列的宽度。
实例:
div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

说在最后:css3其实是一个非常有趣,神奇的东西!!有了css3,js都可以少些很多。css3虽然不是特别难,但是想要用的好、用得顺手也并不是那么容易,还是得靠大家一起努力学习,寻找一些讲的更加精细的文章书籍。c3还有许多新东西,欢迎大家补充,也希望和大家一起学习,一起进步!!

上一篇:Java规约之方法设计


下一篇:Java日志规约