文档章节

css3简单知识学习

writeademo
 writeademo
发布于 2016/08/02 11:07
字数 1864
阅读 26
收藏 3

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 10、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

© 著作权归作者所有

writeademo
粉丝 25
博文 618
码字总数 225313
作品 0
东城
私信 提问
快速学习和实践CSS/CSS3的在线教程

本文作者:伯乐在线 -伯小乐 。未经作者许可,禁止转载! 欢迎加入伯乐在线专栏作者。 CSS并不复杂,但也并非你想象的那么简单。初学者需要经过很多练习和实践才可以真正掌握它。这篇文章收集...

伯乐在线
2014/08/04
0
0
css3编写浏览器背景渐变背景色

css3编写浏览器背景渐变背景色 知识点:rgb全色循环算法,HEX与RGB颜色转换算法、CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等。 👇源码:...

急速奔跑中的蜗牛
2017/12/06
0
0
web前端基础案例-鼠标悬停图文切换效果

酷鼠标悬停图文切换 效果知识点: html/css布局思维,定位,浮动详解,css3动画详解,css3选择器详解, 通用样式与封装,企业布局思维运用,开发标准。 👇html代码: 👇css代码: 文章分享...

急速奔跑中的蜗牛
2018/02/07
0
0
【CSS3初探之Media Queries】终于完成了的CSS3,我们来个终章总结!

前言 无论如何,学到这里,我可以自豪的告诉自己,我HTML5与CSS3学完了,不管我现在还记得住多少,我确确实实将他们学完了,还做了不少demo。 回想几个月前,我一直在纠结自己应该学习HTML5...

范大脚脚
2017/12/14
0
0
Modernizr:HTML5和CSS3的开发利器

随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些新特性,web开发人员也都兴趣十足地试用这些新特性开发出更绚丽有趣...

BryanYang
2014/02/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

lua web快速开发指南(7) - 高效的接口调用 - httpc库

httpc库基于cf框架都内部实现的socket编写的http client库. httpc库内置SSL支持, 在不使用代理的情况下就可以请求第三方接口. httpc支持header、args、body、timeout请求设置, 完美支持各种h...

水果糖的小铺子
今天
3
0
通过四道常问面试题,带你了解什么是数据库分库分表

编者语:为了避免被误解为:「手里有把锤子,看什么都是钉子!」,说明一下不是什么业务都适合分布式数据库,更不是用了分布式数据库性能就一定能得到扩展。 其次:本文为纯干货,建议先转发...

老道士
今天
6
0
springmvc 整体流程

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR......

architect刘源源
今天
3
0
磁盘管理

先来看两个查看的命令 查看磁盘使用情况df 用法:df, df -h, df -m, df -k 查看目录或文件大小 用法:du -sh, du -sm, du -s(默认以k为单位) 新加一块盘如何操作 步骤:分区(可选)--> 格...

wzb88
今天
3
0
在 Linux 下确认 NTP 是否同步的方法

NTP 意即网络时间协议Network Time Protocol,它通过网络同步计算机系统之间的时钟。NTP 服务器可以使组织中的所有服务器保持同步,以准确时间执行基于时间的作业。NTP 客户端会将其时钟与 ...

Linux就该这么学
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部