CSS3的基础知识点

Posted caojiayan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 坐标) 位置参数:

<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

</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>
 
<div>你好。这是一个 div 元素。</div>
 
<div id="div2">你好。这是一个 div 元素。</div>
 
</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>
 
<div></div>
 
<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;
}
 
<div class="newspaper">
人民网北京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>
 
<div class="newspaper">
人民网北京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 class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知,决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元,折算到90号汽油和0号柴油(全国平均)每升零售价格分别提高0.22元和0.25元。
</div>
 
 
效果图如下:
 
以上都是我自己做的笔记,主要是参考W3C,都是按照自己方便记忆跟理解做成的笔记,相对而言,没那么完美,望笑纳,第一次发表博文。

以上是关于CSS3的基础知识点的主要内容,如果未能解决你的问题,请参考以下文章

9.12/ css3拓展js基础语法程序基本知识数据类型运算符表达方式语句知识点

基础的HTML5+CSS3 知识

三天学会css3基础知识

css3基础知识之rgba

CSS的一些基础知识2

css的定位