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;

}

 

关于c语言的一道题目,适合新手看哦

这个问题是输出500-600以内的全部素数 第一张是我写的程序 第二张是结果 我不知道为什么会这样 请指教。 回答: 看了下,你的程序输出的是只要不被2~300整除就输出,当然是不...
  • u012187684
  • u012187684
  • 2016年11月24日 17:16
  • 251

发现了一个很适合新手用的Linux版本

Dubuntudubuntu 是一个创建于 ubuntu GNU/Linux 基础之上的增强版本,主要提供了默认情况下中文化及软件开发工具的良好支持。它的大部分软件包来自 ubuntu 的官方软件仓库...
  • beiune
  • beiune
  • 2006年07月30日 22:36
  • 1362

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

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

超详细适合新手的CentOS操作实战

之前玩的ubuntu,总是习惯性地像晕得死那样在上面点来点去,下午装了个minimal版的CentOS,以正确的方式玩玩linux。此文记录了笔者的爬坑之路~~ 最近试过6.9和7版本的,刚装完默认都...
  • u011731233
  • u011731233
  • 2017年10月25日 17:25
  • 155

初学者写java代码要注意代码规范:

1、要归纳。注意过多的费代码的出现,尽可能的使代码精简。 。 2、要有层次感。每个包是做什么的一定要分类。例如: 每个包是做什么的一眼就能知道3、代码注释。参数是做什么的,功能是做什么的,返...
  • User_meng
  • User_meng
  • 2016年11月20日 19:51
  • 339

JAVA从菜鸟【入门】到新手【实习】一一代码阅读: github小程序阅读

在基本语法和理论学习过后,自己独立完成一个小项目往往没有头绪和经验,盲目的急切的码代码没有什么实际的“成效”。 小项目独立代码量不应该超过1500行,维护借鉴的代码不超过2万行 。。。。。。...
  • qq_35996868
  • qq_35996868
  • 2016年10月12日 11:26
  • 392

我是个VB.net的初学者,在这我推荐一个很好的vb.net网站

http://vb.studysea.net/对于初学和熟悉的朋友来说真的很好。就像CSDN一样给我很大的帮助。...
  • Evanju
  • Evanju
  • 2005年02月01日 14:56
  • 1381

给初学者:关于C编译器的选择

如果你想学纯C,有个免费的C编译器,非常好用,编译出来的程序SIZE很小,速度很快: Lcc-win,百度搜 "lcc-win32" 可以找到中文版的(有人汉化的),也有简单的中文教程。 如果想学C+...
  • xiaoqinpeng
  • xiaoqinpeng
  • 2011年06月20日 23:16
  • 2733

最适合android初学者学习的14个小项目大全

在android学习中,很多android初学者都苦于不晓得怎么找适合自己的开源项目练手,有时候就算找到一些小项目,但也不清楚具体如何下手,这对于迫切需要学习android的童鞋而言确实比较苦恼。今天...
  • lxh19930428
  • lxh19930428
  • 2017年02月24日 22:13
  • 3455

自己写的一个针对特定网站的网络爬虫,初学者,大家瞧瞧,不好的地方,给点建议!谢谢!

以下是全部代码  恩其中还 测试了 log4j在非web项目也可以使用(需要log4j的配置文件,log4j.properties或者log4j.xml) 在代码中加载配置文件 获得logger即...
  • u012540337
  • u012540337
  • 2014年01月26日 13:09
  • 1450
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3规范语言 适合新手
举报原因:
原因补充:

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