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 @刘巍峰分享 )

随机推荐

windows 下安装Python
一.下载官网地址:https://www.python.org/,64位的版本二.安装 32位和64位的版本安装起来没有区别,双击打开后,第一步要记得勾上add python to Path 选项 ...
logstash通过kafka传输nginx日志（三）
单个进程 logstash 可以实现对数据的读取.解析和输出处理.但是在生产环境中,从每台应用服务器运行 logstash 进程并将数据直接发送到 Elasticsearch 里,显然不是第一选择:第 ...
导入excel成一个list集合不支持大文件倒入（优化点在于分批分线程导入）
package com.bj58.saletb.news.utils; import org.apache.log4j.Logger; import org.apache.poi.ss.usermod ...
【ARM】S5PV210芯片的启动流程
S5PV210芯片的设计者的思想 (1)芯片启动后执行iRom(BL0)的内容,进行时钟和看门狗等外设的初始化,将BL1和BL2拷贝到片内SRAM; (2)跳转到片内SRAM执行,完成外部SDRAM的 ...
WEB典型应用
[HMLY]1.CocoaPods详解----使用
作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/18737437 转载请注明出处一.什么是cocoaPods 1.为 ...
linux入侵控制与痕迹清理
后门 (1)开机自动反弹shell (2)linux后门 Rookit 目前常用的有:t0rn /mafix/enyelkm 等 mafix rootkit Mafix是一款常用的轻量应用级别Root ...
object model 概述
Object Model 综述标准 C++ 的对象模型为对象的动态特性提供了运行时的支持. 但是它静态的本性决定了在某些领域它表现出僵化.不可扩展的特点. GUI编程就是一个既需要运行时编译的效率, ...
《Intel汇编第5版》汇编调用子过程
一.Call和Ret指令二.在子过程中需要自己保存可能会修改掉的寄存器值,这里可以使用USES伪指令来生成三.一个数组求和的汇编例子 TITLE Call a Proc Demo INCLUDE ...
Gentoo解决Windows系统txt文本中文乱码问题
Linux与Windows系统语言编码区别在Linux操作系统下,我们有时打开在windows下的txt文件,发现在windows下能正常显示的txt文件出现了中文乱码. 出现这种情况的原因为两种操 ...

CSS3的基础知识点

实例

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

随机推荐

热门专题