CSS3 教程

时间:2020-12-12 08:49:22

CSS3 教程

CSS 用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

本教程向您讲解 CSS3 中的新特性。

开始学习 CSS3!  更多:http://www.runoob.com/css3/css3-tutorial.html

---------------

以下为部分摘抄

CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。

一些最重要CSS3模块如下:

  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特效
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面

更多关于 Css3 的放大缩小,图片移动 语法规则等 ...  http://www.w3cplus.com/content/css3-transform

 //Mozilla内核浏览器:firefox3.5+
-moz-transform-origin: x y;
//Webkit内核浏览器:Safari and Chrome
-webkit-transform-origin: x y;
//Opera
-o-transform-origin: x y ;
//IE9
-ms-transform-origin: x y;
//W3C标准
transform-origin: x y ;

 样式中从上到下的写法, 先  -moz-transform-origin   -webkit-transform-origin  -o-transform-origin   -ms-transform-origin  transform-origin

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

  • 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
  • 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
  • 一个值: 四个圆角值相同

CSS3 background-image属性

 

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。

可以给不同的图片设置多个不同的属性

#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

  CSS3 教程

CSS3 线性渐变

为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

语法

background: linear-gradient(directioncolor-stop1color-stop2, ...);

线性渐变 - 从上到下(默认情况下)

CSS3 教程

阴影的一个使用特例是卡片效果

CSS3 教程

CSS3 教程

CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

CSS3 教程

CSS3的换行

如果某个单词太长,不适合在一个区域内,它扩展到外面:

CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字:

允许长文本换行:

p {word-wrap:break-word;}

pCSS3 单词拆分换行属性指定换行规则:

.test1 { word-break: keep-all; }

p.test2 { word-break: break-all; }

CSS3 教程

CSS3 @font-face 规则

Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型)。

Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

注意: Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
} div
{
font-family:myFirstFont;
}

  

CSS3 2D 转换

CSS3 3D 转换

CSS3 过渡

应用于宽度属性的过渡效果,时长为 2 秒:

多项改变

要添加多个样式的变换效果,添加的属性由逗号分隔:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

  

CSS3动画是什么?

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

0% 是动画的开始,100% 是动画的完成。

为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

改变背景色和位置:

@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;}
} @-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;}
}

  

CSS3 多列中列与列间的间隙

CSS3 教程

CSS3 用户界面


CSS3 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。

在本章中,您将了解以下的用户界面属性:

  • resize
  • box-sizing
  • outline-offset

圆角图片:

img {
    border-radius: 8px;
}
 

缩略图

我们使用 border 属性来创建缩略图。

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
 

响应式图片

响应式图片会自动适配各种尺寸的屏幕。

CSS3 教程

卡片式图片

实例

div.polaroid {
    width: 80%;
     margin: 0px; padding: 0px; color: rgb(170, 17, 17);"> white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}

 

响应式图片相册

.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
} @media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
} @media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}

  

禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。

提示: 我么可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
 
能出现按钮禁用的标示
 

面包屑导航

CSS3 教程

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情,例如:

  • viewport(视窗) 的宽度与高度
  • 设备的宽度与高度
  • 朝向 (智能手机横屏,竖屏) 。
  • 分辨率

目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。

多媒体查询语法

多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) { CSS 代码...; }

如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。

  • not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。

  • only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

  • all: 所有设备,这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
 
 

很实用,

CSS3 教程

大致过了一遍, 基本的大意有所了解,剩下的要做页面融合 试试看。