CSS3的基础知识点

面临找工作之际，又将CSS3的基础知识撸了一把，做了相应的笔记，主要是方便自己查阅，参考的是W3C的知识。

1、CSS背景

（1）、background-size 属性

background-size 属性规定背景图片的尺寸，同时适用与字体图标方面的适用（主要在移动端用到较多）。

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

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

（2）、background-origin 属性

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

背景图片可以放置于 content-box、padding-box 或 border-box 区域

（3）、background-clip 属性

background-clip看似跟background-origin的用法差不多，在W3C上面也没有找到对这两个属性的区别方面的解释。但是其中肯定是有不同之处，如果有两个属性的功能是完全一样的，明显是毫无意义的，通过谷歌了一下，主要总结如下：

两者重要的区别就是：背景能不能在边框上显示

background-clip：border|padding|content

该属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。（背景能在边框上显示）

background-origin：padding|border|content

该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了，（背景并没有在边框上显示）

如果还是不是很明白的童鞋，具体可以参考该大神的博客分享，里面的解析比较清晰明了，链接是：http://www.cnblogs.com/2050/archive/2012/11/13/2768289.html

2、CSS3 文本效果

（1）文本阴影 text-shadow

通过代码例子进行理解，主要代码如下：

<style>

h1 {

text-shadow: 5px 5px 5px #FF0000; }

</style>

</head>

<body>

<h1>文本阴影效果！</h1>

</body>

（2）CSS3 自动换行

（3）、CSS3 字体

在了解CSS3字体之前，需要了解一下CSS字体的发展史，在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

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

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

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

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

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

代码如下：

<style>

@font-face {

font-family: myFirstFont;

src: url('/example/css3/Sansation_Light.ttf')

,url('/example/css3/Sansation_Light.eot'); /* IE9+ */ }

div { font-family:myFirstFont; }

</style>

</head>

<body>

<div>

With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.

</div>

效果图如下：

如果要使得变为粗体：

@font-face {

font-family: myFirstFont;

src: url('/example/css3/Sansation_Bold.ttf')

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

font-weight:bold; }

div { font-family:myFirstFont; }

</style>

</head>

<body>

<div>

With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.

</div>

效果图如下：

3、CSS3 2D 转换

（1）translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

</body>

效果图如下：

如果没有设置样式div#div2，则是：

设置了设置样式div#div2，则是水平方向向右移动了50px,垂直方向向下移动了100px：（参考的方向点是图像的左上角）

（2）rotate() 方法

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

}

红色标记部分代表是旋转的角度，（30度）

（3）scale() 方法

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

}

红色部分是倍数。

(4)skew() 方法

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

}

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

(5)matrix() 方法

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

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

<style>

div {

width:100px;

height:75px;

border:1px solid black; }

div#div2 {

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

}

</style>

</head>

<body>

</body>

效果图如下：

注意： Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

4、CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长

实例

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

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s;

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

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

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

}

div:hover { width:300px; }

</style>

</head>

<body>

<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

鼠标尚未移动到div里时，如下显示：

鼠标移动到div里时，效果如下：

5、CSS3 动画

<style>

div{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

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

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

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

}

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background:red;}

to {background:yellow;}

}

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

{

from {background:red;}

to {background:yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background:red;}

to {background:yellow;}

}

</style>

效果是：该div在5S的时间里，将一开始的红色背景，逐渐的变成黄色背景。

例子2：

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

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

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

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

}

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

}

</style>

效果是：5S的时间被平均分成了四个时间点1.25,2.50，3.75,5.00，各个时间点对应着变成红色、黄色、蓝色、绿色。

6、CSS3 多列

（1）CSS3 创建多列

column-count 属性规定元素应该被分隔的列数：

<style>

.newspaper

{

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

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

column-count:3;

}

人民网北京2月24日电 (记者刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元

</div>

效果图如下：

（2）CSS3 规定列之间的间隔

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

<style>

.newspaper

{

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

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

column-count:3;

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

-webkit-column-gap:30px; /* Safari and Chrome */

column-gap:30px;

}

</style>

</head>

<body>

人民网北京2月24日电 (记者刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。

</div>

效果图如下：

（3）CSS3 列规则

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

<style>

.newspaper

{

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

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

column-count:3;

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

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

column-gap:40px;

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

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

column-rule:4px outset #ff0000;

}

</style>

</head>

<body>

</div>

效果图如下：

以上都是我自己做的笔记，主要是参考W3C，都是按照自己方便记忆跟理解做成的笔记，相对而言，没那么完美，望笑纳，第一次发表博文。

CSS3的基础知识点的更多相关文章

CSS 基础知识点样式选择器伪类
CSS 基础知识点汇集版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备
作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变, ...
fastclick 源码注解及一些基础知识点
在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...
.NET基础知识点
.NET基础知识点 l .Net平台 .Net FrameWork框架 l .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转 l 两种交 ...
JavaScript 开发者经常忽略或误用的七个基础知识点(转)
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
JavaScript 开发者经常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
JavaScript开发者常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
JavaScript语言基础知识点图示（转）
一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...
JavaScript 语言基础知识点总结
网上找到的一份JavaScript 语言基础知识点总结,还不错,挺全面的. (来自:http://t.cn/zjbXMmi @刘巍峰分享 )

随机推荐

设计模式（二）单例模式Singleton（创建型）
几乎所有面向对象的程序中,总有一些类的对象需要是唯一的,例如,通过数据库句柄到数据库的连接是独占的.您希望在应用程序中共享数据库句柄,因为在保持连接打开或关闭时,它是一种开销.再如大家最经常用的IM, ...
前端学习——ionic/AngularJs——获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...
2016 ACM/ICPC Asia Regional Qingdao Online 1002 Cure
Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
ES6 带来了什么
http://www.kuqin.com/shuoit/20150928/348317.html 这篇文章介绍了javascript 的大致历史 http://www.css88.com/archi ...
相对协议-关于src里//开头的知识
"相对协议",也就是链接以 // 开头,前面去掉了 http: 或 https: 字样, 这样做的好处是浏览器能够根据你的网站所采用的协议来自动加载 CDN 上托管的文件!
python3.5 修改 IIS WEB.CONFIG的相关方法
#!/usr/bin/env python3.5 # -*- coding:utf8 -*- from xml.etree.ElementTree import ElementTree,Element ...
retrofit2学习
http://www.cnblogs.com/wondertwo/p/5838528.html 使用要点
【IE6的疯狂之七】样式中文注释后引发失效
这是IE6 出现的奇怪现象.这是由于css 和html 的编码不同所引致. 满足下面条件就会引起注释下面的样式不起作用:1. css有中文注释2. css为ANSI编码3. html为utf-8编码 ...
CentOS 6.5的安装详解
CentOS 6.5的安装详解主流: 目前的Linux操作系统主要应用于生产环境, 主流企业级Linux系统仍旧是RedHat或者CentOS 免费: RedHat 和CentOS差别不大,Cent ...
Java 并发线程的生命周期
Java 并发线程的生命周期 @author ixenos 线程的生命周期线程状态: a) New 新建 b) Runnable 可运行 c) Running 运行 (调用 ...

CSS3的基础知识点

实例

CSS3的基础知识点的更多相关文章

随机推荐

热门专题