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

随机推荐

[UWP小白日记-8]一些零碎的东西
设置启动窗口大小直接上代码了没什么好解释的了,既然能设置最小,那铁定就能设置最大 public MainPage() { //设定窗口启动显示大小 ApplicationView.Preferred ...
Ubuntu中Qt5.7.0无法输入中文
把libfcitxplatforminputcontextplugin.so复制到安装的Qt目录下的两个文件夹中 sudo apt install fcitx-frontend-qt5 sudo cp ...
如何用Postman组装Request并且查看Response
Postman安装好之后,我们先打开Postman,可以看到界面分成左右两个部分,右边是我们后头要讲的collection,左边是现在要讲的request builder.在request build ...
啥数据类型set补充、深浅拷贝与函数
#s1 = {1,2,3,1} """ s2 = ([2,5,6]) print(s1) s1.add(5) #添加元素"5" print(s1) s ...
在Windows上创建同样的Linux操作环境
在之前的文章中,介绍了我在GNU/Linux图形界面环境下所使用的工具集合.其基本目的是在保证占用最少系统资源的条件下,将电脑操作效率推向极致.这样的工具组合尤如瑞士军刀一般,简洁.高效.功能全面.与 ...
QQSpamerUpdate
2.00001,0,http://oia5k1lqi.bkt.clouddn.com/QQSpamer2.0%20BETA1.exe
Oracle与Sqlserver：Order by NULL值介绍
针对页面传参到in的子集中去进行查询操作的话,就会有in(xxx,null),这样就会导致查询的结果中其实直接过滤掉了null,根本就查不出来null的值.之前对于null的操作都是进行不同数据库的n ...
Scala 控制结构
Scala内建的控制结构屈指可数,仅有if, while, for, match, try和函数调用而已. 几乎所有的Scala控制结构都会产生某个值(while和 do while虽然不能产生有意义 ...
今天学习的裸板驱动之存储控制器心得（初始化SDRAM）
CPU只管操作地址,而有些地址代表的是某些存储设备. 但是操作这些存储设备需要很多东西,比如需要制定bank,行/列地址等.所以就有了存储管理器,用来处理这种CPU操作的地址和存储设备间的转换. (1 ...
【转】python删除文件里包含关键词的行
import shutil with open('/path/to/file', 'r') as f: with open('/path/to/file.new', 'w') as g: for li ...

CSS3的基础知识点

实例

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

随机推荐

热门专题