css3简单知识学习

CSS3简单学习

倾斜div

div

{

transform:rotate(30deg);

}

 

css3圆角边框

 

div

{

border:2px solid;

border-radius:25px;

-moz-border-radius:25px; /* Old Firefox */

}

 

 

边框阴影

div

{

box-shadow: 10px 10px 5px #888888;

}

 

 

CSS3 边框图片

 

div

{

border-image:url(border.png) 30 30 round;

-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */

-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */

-o-border-image:url(border.png) 30 30 round; /* Opera */

}

 

css3背景

 

CSS3 background-size 属性

 

background-size 属性规定背景图片的尺寸。

 

在 CSS3 以前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，能够规定背景图片的尺寸，这就容许咱们在不一样的环境中重复使用背景图片。

 

您可以以像素或百分比规定尺寸。若是以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

 

 

div

{

background:url(bg_flower.gif);

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-size:63px 100px;

background-repeat:no-repeat;

}

 

 

CSS3 background-origin 属性，规定所属区域

 

背景图片能够放置于 content-box、padding-box 或 border-box 区域。

 

div

{

background:url(bg_flower.gif);

background-repeat:no-repeat;

background-size:100% 100%;

-webkit-background-origin:content-box; /* Safari */

background-origin:content-box;

}

 

CSS3 多重背景图片

 

 

body

{

background-image:url(bg_flower.gif),url(bg_flower_2.gif);

}

 

 

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

CSS3 文本效果

 

CSS3 包含多个新的文本特性。

 

在本章中，您将学到以下文本属性：

 

    text-shadow

    word-wrap

 

 

 

h1

{

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

}

 

 

CSS3 中，word-wrap 属性容许您容许文本强制文本进行换行 - 即便这意味着会对单词进行拆分

p {word-wrap:break-word;}

 

 

在 CSS3 以前，web 设计师必须使用已在用户计算机上安装好的字体。

 

经过 CSS3，web 设计师能够使用他们喜欢的任意字体。

 

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

 

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

 

<style>

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

     url('Sansation_Light.eot'); /* IE9+ */

}

 

div

{

font-family:myFirstFont;

}

</style>

 

 

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Bold.ttf'),

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

font-weight:bold;

}

 

css3 2D转换

 

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

}

 

 

 

 

div

{

transform: translate(50px,100px);

-ms-transform: translate(50px,100px);           /* IE 9 */

-webkit-transform: translate(50px,100px);    /* Safari and Chrome */

-o-transform: translate(50px,100px);               /* Opera */

-moz-transform: translate(50px,100px);                  /* Firefox */

}

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

}

 

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

}

 

css3 3D转换

 

 

CSS3 过渡

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

 

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

 

    规定您但愿把效果添加到哪一个 CSS 属性上

规定效果的时长

 

 

 

CSS3 动画

 

经过 CSS3，咱们可以建立动画，这能够在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

 

如需在 CSS3 中建立动画，您须要学习 @keyframes 规则。

 

@keyframes 规则用于建立动画。在 @keyframes 中规定某项 CSS 样式，就能建立由当前样式逐渐改成新样式的动画效果。

浏览器支持

属性        浏览器支持

@keyframes                                       

animation                                            

 

Internet Explorer 十、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

 

Chrome 和 Safari 须要前缀 -webkit-。

 

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

实例

 

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

 

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

 

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

{

from {background: red;}

to {background: yellow;}

}

 

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {background: yellow;}

}

 

CSS3 动画

 

当您在 @keyframes 中建立动画时，请把它捆绑到某个选择器，不然不会产生动画效果。

 

经过规定至少如下两项 CSS3 动画属性，便可将动画绑定到选择器：

 

    规定动画的名称

    规定动画的时长

 

 

什么是 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;}

}

 

 

 

CSS3 多列

 

经过 CSS3，您可以建立多个列来对文本进行布局 - 就像报纸那样！

 

在本章中，您将学习以下多列属性：

 

    column-count

    column-gap

    column-rule

 

 

 

 

 

CSS3 用户界面

 

在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

 

在本章中，您将学到如下用户界面属性：

 

    resize

    box-sizing

    outline-offset

 

 

 

 

听觉样式表

 

听觉样式表可把语音合成与音响效果相组合，使用户能够听到信息，而无需进行阅读。

 

听觉呈现可用于：

 

    视觉能力低弱的人士

    帮助用户学习阅读

    帮助有阅读障碍的用户

    家庭娱乐

在汽车中使用

 

 

 

 

 

css颜色

 

 

颜色值

 

CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值能够是 0（十六进制 00）。最高值是 255（十六进制 FF）。

 

 

从 0 到 255 种红绿蓝值可以组合出总共超过一千六百万种不一样的颜色（根据 256 x 256 x 256 计算）

 

-----------------------------------css部分-------------------------------------------------

css连接：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test css</title>
    <!--
a:link {color:#FF0000;}    /* 未被访问的连接 */
a:visited {color:#00FF00;} /* 已被访问的连接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到连接上 */
a:active {color:#0000FF;}  /* 正在被点击的连接 */

    -->
    <style type="text/css">
    a:link {
        color: #FF0000;
    }
    
    a:visited {
        color: #00FF00;
    }
    
    a:hover {
        color: #FF00FF;
    }
    
    a:active {
        color: #0000FF;
    }
    </style>
</head>

<body>
    <a href="#">test 1</a>
    <p><b>注释1：</b>为了生效hover在link,visited以后</p>
    <p><b>注释2：</b>为了生效active在link,visited,hover以后</p>
</body>

</html>

 

 

 

 

css列表

要修改用于列表项的标志类型，能够使用属性 list-style-type：

ul {list-style-type : square}

常规的标志是不够的。你可能想对各标志使用一个图像，这能够利用 list-style-image 属性作到：

ul li {list-style-image : url(xxx.gif)}

简写列表样式

为简单起见，能够将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

li {list-style : url(example.gif) square inside}

 

css表格：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>test css</title>

    <style type="text/css">

    table,

    th,

    td {

        border :5px solid blue;

    }

    th{

             background-color: green;

             color: white;

    }

    </style>

</head>

<body>

    <table>

        <th>first name</th>

        <th>second ^-^ name</th>

        <tr>

            <td>Mr</td>

            <td>Li</td>

        </tr>

        <tr>

            <td>Miss</td>

            <td>Zhang</td>

        </tr>

    </table>

</body>

</html>

 

Css水平对齐

 

Margin水平对齐

.center

{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

使用 position 属性进行左和右对齐

 

使用 float 属性来进行左和右对齐.right

{

float:right;

width:300px;

background-color:#b0e0e6;

}

 

CSS 尺寸 (Dimension) 属性容许你控制元素的高度和宽度。一样，它容许你增长行间距。

 

<html>

<head>

<style type="text/css">

img.normal

{

height: auto

}

 

img.big

{

height: 160px

}

 

img.small

{

height: 30px

}

</style>

</head>

<body>

 

<img class="normal" src="/i/eg_smile.gif" />

<br />

<img class="big" src="/i/eg_smile.gif" />

<br />

<img class="small" src="/i/eg_smile.gif" />

 

 

 

CSS 分类属性容许你规定如何以及在何处显示元素。

设置光标格式

<span style="cursor:sw-resize">

 

 

定义透明效果的 CSS3 属性是 opacity。

 

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

 

 

 

 

------------来自w3cschool