CSS3规范语言 适合新手

转载 2015年11月18日 15:25:03

CSS3规范语言

 

1、创建圆角矩形属性

border-radius

2 div 元素添加方框阴影:

box-shadow:10px 15px 5px #888888;10px代表阴影往左交错10像素,15px代表阴影往下15像素,5px代表阴影羽化5像素  #888888是阴影颜色)、

3、使用图片创建围绕 div 元素的边框

border-image:url(border.png)30 30 round;(平铺)

border-image:url(border.png)30 30 stretch;(拉伸)

4CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。

您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

background:url(img.jpg);

background-size:50px100px;(调整背景图片的大小)

background-repeat:no-repeat;

 

background-size:40%100%;(对背景图片进行拉伸)

5background-origin属性规定背景图片的定位区域。

<div id=”content”>

       <divid=”content-img”>

       <div id=”content-box”></div>

</div>

</div>

Div{

background:url(img.jpg);

background-origin:content-box;(背景图片定位于content-box)

}

6CSS3 允许您为元素使用多个背景图像。

background-image:url(bg_flower.gif),url(bg_flower_2.gif);

7、在 CSS3中,text-shadow 可向文本应用阴影。

text-shadow:5px 5px 5px #FF0000;(水平阴影、垂直阴影、模糊距离,以及阴影的颜色)

8、文字超出区域自动换行

word-wrap:break-word;

9、在 CSS3之前,web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3web 设计师可以使用他们喜欢的任意字体。

当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

自己的的字体是在 CSS3@font-face 规则中定义的。

在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont)

@font-face

{

font-family:myFirstFont;

src:url('Sansation_Light.ttf'),

     url('Sansation_Light.eot'); /* IE9+ */

使用粗体字体

您必须为粗体文本添加另一个包含描述符的@font-face:

@font-face

{

font-family:myFirstFont;

src:url('Sansation_Bold.ttf'),

     url('Sansation_Bold.eot'); /* IE9+ */

font-weight:bold;

}

 

}

10CSS32D 转换

1)   通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

div

{

transform:rotate(30deg);

-ms-transform:rotate(30deg);       /* IE 9 */

-webkit-transform:rotate(30deg);  /* Safari and Chrome */

-o-transform:rotate(30deg);         /* Opera */

-moz-transform:rotate(30deg);          /* Firefox */

}

2)   通过 translate() 方法,元素从其当前位置移动,根据给定的 leftx 坐标) topy 坐标)位置参数:

div

{

transform:translate(50px,100px);

-ms-transform:translate(50px,100px);      /* IE 9 */

-webkit-transform:translate(50px,100px); /* Safari andChrome */

-o-transform:translate(50px,100px);        /* Opera */

-moz-transform:translate(50px,100px);          /* Firefox*/

}

3)   通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

div

{

transform:rotate(30deg);

-ms-transform:rotate(30deg);       /* IE 9 */

-webkit-transform:rotate(30deg);  /* Safari and Chrome */

-o-transform:rotate(30deg);         /* Opera */

-moz-transform:rotate(30deg);          /* Firefox */

}

4)   通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:

div

{

transform: scale(2,4);

-ms-transform: scale(2,4);       /* IE 9 */

-webkit-transform: scale(2,4);  /* Safari Chrome */

-o-transform: scale(2,4);   /* Opera */

-moz-transform: scale(2,4);     /* Firefox */

} scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

5)   通过 skew() 方法,元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

div

{

transform: skew(30deg,20deg);

-ms-transform: skew(30deg,20deg);     /* IE 9 */

-webkit-transform: skew(30deg,20deg);       /* Safari and Chrome */

-o-transform: skew(30deg,20deg); /* Opera */

-moz-transform: skew(30deg,20deg);   /* Firefox */

}

6)        matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

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 */

-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Firefox */

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);   /* Safari and Chrome */

-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);           /* Opera */

}

11、CSS3 允许您使用 3D 转换来对元素进行格式化

1)       通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。

div

{

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */

-moz-transform: rotateX(120deg); /* Firefox */

}

2)       通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

div

{

transform: rotateY(130deg);

-webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */

-moz-transform: rotateY(130deg); /* Firefox */

}

12、CSS3 过渡

通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

div

{

width:100px;

transition: width 2s;(应用于宽度属性的过渡效果,时长为 2 秒)

-moz-transition: width 2s;     /* Firefox 4 */

-webkit-transition: width 2s;  /* Safari 和 Chrome */

-o-transition: width 2s;   /* Opera */

}

当鼠标指针悬浮于 <div> 元素上时

div:hover

{

width:300px;

}

当指针移出元素时,它会逐渐变回原来的样式。

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s, height 2s;

-moz-transition:width 2s, height 2s,-moz-transform 2s; /* Firefox 4 */

-webkit-transition:width 2s, height 2s,-webkit-transform 2s; /* Safari and Chrome */

-o-transition:width 2s, height 2s,-o-transform 2s; /* Opera */

}

 

div:hover

{

width:200px;

height:200px;

transform:rotate(180deg);

-moz-transform:rotate(180deg); /* Firefox 4*/

-webkit-transform:rotate(180deg); /* Safariand Chrome */

-o-transform:rotate(180deg); /* Opera */

}

13、CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及JavaScript

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from {background: red;}

to {background: yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {background: yellow;}

}

当在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项CSS3 动画属性,即可将动画绑定到选择器:

  • 规定动画的名称
  • 规定动画的时长

 

把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s;  /* Firefox */

-webkit-animation: myfirst 5s;      /* Safari 和 Chrome */

-o-animation: myfirst 5s;       /* Opera */

}

当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:

@keyframes myfirst

{

0%  {background: red;}

25% {background: yellow;}

50% {background: blue;}

100% {background: green;}

}

@-moz-keyframes myfirst /* Firefox */

{

0%  {background: red;}

25% {background: yellow;}

50% {background: blue;}

100% {background: green;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

0%  {background: red;}

25% {background: yellow;}

50% {background: blue;}

100% {background: green;}

}

@-o-keyframes myfirst /* Opera */

{

0%  {background: red;}

25% {background: yellow;}

50% {background: blue;}

100% {background: green;}

}

改变背景色和位置:

@keyframes myfirst

{

0%  {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0%  {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

0%  {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0%  {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

贪食蛇效果

div

{

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

/* Firefox: */

-moz-animation-name: myfirst;

-moz-animation-duration: 5s;

-moz-animation-timing-function: linear;

-moz-animation-delay: 2s;

-moz-animation-iteration-count: infinite;

-moz-animation-direction: alternate;

-moz-animation-play-state: running;

/* Safari 和 Chrome: */

-webkit-animation-name: myfirst;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-delay: 2s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction: alternate;

-webkit-animation-play-state: running;

/* Opera: */

-o-animation-name: myfirst;

-o-animation-duration: 5s;

-o-animation-timing-function: linear;

-o-animation-delay: 2s;

-o-animation-iteration-count: infinite;

-o-animation-direction: alternate;

-o-animation-play-state: running;

}

简写:

div

{

animation: myfirst 5s linear 2s infinitealternate;

/* Firefox: */

-moz-animation: myfirst 5s linear 2sinfinite alternate;

/* Safari 和 Chrome: */

-webkit-animation: myfirst 5s linear 2sinfinite alternate;

/* Opera: */

-o-animation: myfirst 5s linear 2s infinitealternate;

}

14、CSS3 多列

div 元素中的文本分隔为三列:

div

{

-moz-column-count:3;   /* Firefox */

-webkit-column-count:3; /* Safari 和 Chrome */

column-count:3;

}

column-gap 属性规定列之间的间隔:

div

{

-moz-column-gap:40px;        /* Firefox */

-webkit-column-gap:40px;    /* Safari 和 Chrome */

column-gap:40px;(列之间40像素的间隔)

}

column-rule 属性设置列之间的宽度、样式和颜色规则。

div

{

-moz-column-rule:3px outset #ff0000;  /* Firefox */

-webkit-column-rule:3px outset #ff0000;     /* Safari and Chrome */

column-rule:3px outset #ff0000;

}

15CSS3 用户界面

CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

div

{

resize:both;div 元素可由用户调整大小)

overflow:auto;

}

两个并排的带边框方框:

div

{

box-sizing:border-box;

-moz-box-sizing:border-box;    /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

width:50%;

float:left;

}

outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同:

  • 轮廓不占用空间
  • 轮廓可能是非矩形

边框边缘之外 15 像素处的轮廓

div

{

border:2px solid black;

outline:2px solid red;

outline-offset:15px;

}

 

20岁印度工程师谈HTML5、CSS3开发Android和iOS应用--各语言开发安卓工具

20岁印度工程师谈HTML5、CSS3开发Android和iOS应用 2012-02-09 15:29 酸奶小妹 酸奶小妹的博客  原作者是一个20岁的印度工程师,为我们讲述如何用HTML...

CSS3学习笔记 之 语言伪类选择器

语言伪类选择器对于多语言版本的网站来说非常有用,可以根据不同语言版本设置页面的字体风格。   有两种方法为文档指定语言,如果使用HTML5,直接可以设置文档的语言:    另外一种方法...
  • atleks
  • atleks
  • 2014年08月31日 23:58
  • 383

HTML5 CSS3编码规范

  • 2014年07月27日 14:30
  • 286KB
  • 下载

CSS3代码编写规范及注意要点

CSS3编码规范及注意要点 语法: 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时,将单独的选择器单独放在一行。为了代码的易读性,在每个声...

HTML5+CSS3学习(二)HTML5 语法规范

一、元素和属性的定义一个html5网页都是由html元素构成的: 一个html元素由开始标签、结束标签、属性和元素的内容四部分构成。 元素是可以相互嵌套的。二、注意区分标签和元素的定义标签是元素的...

css3 html5命名规范

一、注意事项:  1.一律小写;  2.尽量用英文;  3.不加中杠和下划线;  4.尽量不缩写,除非一看就明白的单词.   主要的 master.css   模块 module.css ...

HTML5 CSS3 W3C规范中文参考手册(CHM)

  • 2012年03月01日 18:11
  • 551KB
  • 下载

css3技巧实现九宫格布局

九宫格布局                                                                                       /*:af...

w3cHtml5规范.chm+css3规范手册.chm

  • 2013年11月08日 20:30
  • 546KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3规范语言 适合新手
举报原因:
原因补充:

(最多只允许输入30个字)