HTML5和CSS3基础

2012-04-24 11:00 臭小子1983 阅读(443) 评论(0) 编辑收藏举报

第一章 Web时间代的变迁

一、HTML4常见用div来划分页面结构方法，HTML5新出现的更语义化的标签.

二、可以放心使用HTML5的三个理由

　　1、兼容性：HTML5在老版本的浏览器也可以正常运行

　　2、实用性：HTML5内部并没有封装什么很复杂的功能，只封装了简单实用的功能

　　3、非革命性的发展：HTML5的内部功能不是革命性，而是发展性的

三、HTML5要解决的三个问题

　　1、web浏览器之间的兼容性很低

　　2、文档结构不明确：文档结构不清晰明确，例如为了要表示标题、正文，之前一般都用<div>元素、

　　3、Web应用于程序的功能受到了限制

第二章 HTML5与HTML4的区别

一、HTML5中的标记方法

1、内容类型：

　　扩展符仍然是".html"或".htm"，内容类型(ContentType)仍然是"text/html"。

2、Doctype声名：

　　html5中使用：<!DOCTYPE html>

　　html4中使用：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　meta charset="UTF-8"

　　在使用工具时：<!DOCTYPE html systerm "about:legacy-compat">

3、兼容性：

　　html5中没有<p>的结束标记　

　　不允许写结束标记：area、base、br、col command embed hr img input keygen link meta param source track wbr 如：<area />

　　允许写结束标记：li dt dd p rt rp optgroup option colgroup thead tbody tfoot tr td th

　　可以全部省略标记：html head body colgroup tbody　　（该元素全部被省略即使写也被省略）

4、具有boole属性值

　　只写属性不写值为 true：<input type='checkbox' checked>

　　不写属性代码属性为 false：<input type='checkbox'>

　　属性值=属性名，为 true：<input type='checkbox' checked='checked'>

　　属性值='' ，为 true：<input type='checkbox' checked=''>

5、省略引号

　　当属性值不包括字符串、"<"、>、=、单引号、双引号字符时，属性值引号可以省略

二、新增的元素和费除的元素

　　新增：

　　1、section元素：表示页面中的一个内容区块，比如章节、页眉、页脚、或页面的其它部分，与h1-h6结合使用.

　　　　html5中：<section>..... </section>　　　　　　html4中：<div>.... </div>

　　2、article元素：页面中的一块与上下文不相关的独立内容，如：博客中一篇文章

　　　　html5中：<article>..... </article>　　　　　　html4中：<div>.... </div>

　　3、aside元素：表示article元素的内容之外的，与article辅助相关信息

　　　　html5中：<aside>..... </aside>　　　　　　html4中：<div>.... </div>

　　4、header元素：页面的内容区块，整个页面的标题

　　　　html5中：<header>..... </header>　　　　　　html4中：<div>.... </div>

　　5、hgroup元素：用于整个页面或页面一个区块标题的整合

　　　　html5中：<hgroup>..... </hgroup>　　　　　　html4中：<div>.... </div>

　　6、footer元素：表示页面或页面区块的脚注

　　　　html5中：<footer>..... </footer>　　　　　　html4中：<div>.... </div>

　　7、nav元素：表示元素页面中导航链接部分

　　　　html5中：<nav>..... </nav>　　　　　　html4中：<div>.... </div>

　　8、figure元素：表示一段独立流内容，表示文档主体流内容中的一个独立单元，使用figcaption元素为figure元素组添加标题

　　　　html5：

　　　　<figure>
　　　　　　<figcaption>PRC</figcaption>
　　　　　　<p>填写常用邮箱，这将是微博帐号。</p>
　　　　</figure>

　　　　html4：　

　　　　<dl>
　　　　　　<h1>PRC</h1>
　　　　　　<p>填写常用邮箱，这将是微博帐号。</p>
　　　　</dl>

三、其它新增元素

　　1、video元素：定义视频，

　　　　<video src="http://www.changyou.com/cyouFile/sohuVideo/cyouPlayers.swf" controls='controls'>video元素</video>

　　2、audio元素：定义音频流，

　　3、embed元素：定义其它音频流　　如mp3,AU、Wav

　　4、mark元素：用来在视觉上向用户呈现那些需要突显的文字，应用在搜索结果中显示的高亮中.

　　5、progress元素：表示运行中的进程，来显示js中耗费时间的函数进程.

　　6、time元素：表示日期、时间

　　　　html5中：<time></time>　　　　html4中：<span></span>

　　7、rudy元素：注释（中文注释或字符）

　　8、rt元素：注释的解释或发音

　　9、wbr元素：表示软换行

　　10、canvas元素：创建一个绘图区域

　　11、command元素：表示命令按钮，单选按钮和多选按钮 (新增功能)

　　12、datalist元素：表示可选的数据列表，与input元素配合使用，可以制作出下拉列表.(新增功能)

通过datalist元素实现输入提示

1 你最喜欢的浏览器是： <input list="browsers">
2 <datalist id="browsers">
3   <option value="Internet Explorer">
4   <option value="Firefox">
5   <option value="Chrome">
6   <option value="Opera">
7   <option value="Safari">
8 </datalist>

　　14、keygen元素：生成密钥(新增功能)，可以传给服务器端进去解密：但兼容性不是很好，很多浏览器不支持，

　　15、output元素：不同类型的输出

　　16、source元素：为媒介元素，定义媒介资源.

　　17、menu元素：菜单列表，当列出控件时使用该标签.

四、新增的表单输入属性

　　1、email：必须输入email地址的输入框。<input type="email" id="ss">

　　2、url：必须输入url地址的输入框

　　3、number：必须输入数值的输入框

　　4、range：输入一定范围的文本输入框 <input type="range" name="points" min="1" max="10" />

　　5、Date Pickers：选取时间的文本框 date年、月、日， month月　　week周　　　

五、废除的元素

　　1、能使用css替代的元素

　　　　font、s、u等元素，功能都是纯粹为画面展示服务的

　　2、不在支持frame框架，只支持iframe

六、新增的属性和废除的属性

新增：

　　一、表单相关属性：

　　1、对input(type='text')、select、textarea、与button元素指定 autofocus 属性，指定元素在打开画面时获得焦点.

　　2、对input(type='text')、textarea指定 placeholder 属性，会对用户进行提示是否可以输入，类似value.

　　3、对input(type='text')、output、select、textarea、button与fielder元素指定 form 属性，声明他属于哪个表单，然后放其任何位置而不是表单之内.

　　4、对input(type='text')、textarea指定 required 属性，对用户提交的时候进行检查，查检元素内一定要有内容

　　5、input新增了autocomplete、min、max、multiple、pattern、step，还有list元素与datalist配合使用，multiple属性可以使上传元素一次传多个文件

　　二、链接相关属性：

　　1、a与area元素增加了media属性，规定目标URL是什么类型的媒介、设备进行优化，只能在href存在时使用

废除的元素：

　　1、使用css代替的元素：basefont、big、font、s、u这些元素

　　2、不在使用frame框架：

七、新增的属性和废除的属性

新增属性：

　　1、表单属性：

　　　　autofocus属性：可以对input(type=text)、select、textarea与button元素指定autofocus属性，画面打开时自动获得焦点

　　　　placeholder属性：对input(type=text)、textarea元素指定placeholder属性，对用户输入进行提示，提示用户可以输入的内容

　　　　form属性：对input、output、select、textarea、button、fieldset元素指定form属性，声明属于哪个表单，然后放置在页面上的任何位置，页不是表单内

　　　　required属性：对input、text、textarea表示在用户户提交的时候进行检查，检查该元素内一定要有输入内容

八、全局属性

　　1、contentEidtable 属性 允许用户编辑元素中的内容，　　

<h2>可编辑列表</h2>
<ul contentEditable='true'>
<li>新的一年开启新的</li>
<li>希望，祝您新年快</li>
<li>乐，吉星高照！</li>
</ul>

　　2、designMode属性：指定整个页面是否可编辑状态，designMode只能在JS中控制是否被修改，两个值：“on”和"off"

<h2>可编辑列表</h2>
<ul>
<li>新的一年开启新的</li>
<li>希望，祝您新年快</li>
<li>乐，吉星高照！</li>
</ul>

<script type="text/javascript">
$(function(){
	document.designMode = 'on';
})
</script>

　　3、hidden属性：所有元素都允许使用，类似input中的hidden属性，功能是告诉浏览器不渲染该元素，使该元素处于不可见状态，但元素中的内容还是浏览器创建的。

　　4、spellcheck属性：针对input(type='text')和textarea属性，对输入的内容进行拼写和语法检查，属性值true和false;

　　5、tabindex属性：使用tab键对页面所有控件的遍历，tabindex来控制遍历的顺序　

<input type="text" spellcheck='true' tabindex="0" />
<input type="text" spellcheck='true' tabindex="5" />
<input type="text" spellcheck='true' tabindex="2" />
<input type="text" spellcheck='true' tabindex="3" />
<input type="text" spellcheck='true' tabindex="1" />

第三章 HTML5结构

　　新增主体结构：article元素、section元素、nav元素及aside元素.

　　新增非主体结构：header元素、bgroup元素、footer元素和address元素

　　掌握显示排版、隐式排版、HTML5分析器是按什么来分析页面的怎么对这些新元素使用css样式

一、新增主体结构元素

　　1、article元素：代表文档、页面或应用程序独立的、完整的、可以独自被外部引用的内容。

<article>
<header><h2>Get It Done #25</h2></header>
<p><b>Get It Done #25 layout #1 picture</b></p>
</article>

　　2、section元素：用于网站或应用程序页面中内容进行分块

　　3、nav元素：是一个可以用作页面导航的链接组，并不是所有元素都放到nav中，主要的、基本的链接组放进nav元素即可

　　4、aside元素：当前面页或文章的附属部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条

　　　　aside元素两种使用方法：

　　　　a、被包含在article元素中作为主要内容的附属性部分

　　5、time元素与微格式

　　　　微格式：利用HTML的class属性来对网页添加附加信息的方法，附加信息如新闻事件发生的时间、电话、邮箱等。

　　　 pubdata属性：　　

二、新增的非主体结构

　　1、header元素：通常放置整个页面的内容区块的标题

　　　　hgroup元素：是将标题及子标题进行分组，通常会将h1-h6分组　　　　

<article>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <p>正文</p>
    </header>
</article>

　　2、footer元素：用作脚注版权信息等。

　　3、address元素：呈现联系人的信息.

三、显示排版和隐式排版

　　1、显示排版：显示排版明确使用section等元素创建文档结构，每个内容内使用标题h1-h6或hgroup

　　2、隐式排版：是指不明确使用section等元素，而是根据页面书写的各级别标题

　　3、标题级别：

　　4、不同内容区块可以使用相同的级别的标题

四、新结构使用样式

　　一些浏览器对HTML5新增的元素尚未提供，也不知道客户的浏览器是否支持这些元素，所以使用css追加，HTML5新增元素都以方块方式显示

　　/* 重设 HTML5 标签,IE 需要在 js 中 createElement(TAG) */
　　article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }

　　IE8之前的浏览器不支持css的方法来使用这些元素，需要使用javascript脚本，如

　　　　document.createELemenet("header");

　　　　document.createELemenet("nav");

　　</script>

第五章绘制图形

一、canvas元素能做的事情

　　绘制矩形、多边形、渐变图形、图形缩放、图形组合、绘制阴影

二、页面中放置canvas元素

　　使用<script src="script.js">

第六章多媒体播放

　　HTML4中音频和视频只能通过flash播放器来展示

一、<video>元素视频元素

二、<audio>元素音频元素

三、属性

　　1、src：文件Url地址

　　2、autoplay：文件加裁后自动播放

　　3、preload：文件数据是否预加载。none：不预加载　　metadata：只预加载媒体的元数据　　auto：预加载全部视频或音频

　　4、poster：当视频不可用时用一张图标代替，video独有，<video src="" poster="auto"></video>

　　5、loop：是否循环播放

　　6、contorls(控制)：是否添加播放用的控制条（浏览器默认），控制条中具有播放、暂停等按钮

　　7、width、height：播放器宽度和高度

　　8、error：该对象的code返回对应的错误状态，错误共有4个值

　　　　　　1 下载过程盱用户的操作原因而错误　　2

 1 <script>
 2     var video = document.getElementById("video");
 3     video.addEventListener("error", function(){
 4         var error = video.error;
 5         switch(error){
 6             case 1:
 7                 alert("视频的下载过程被中止");
 8                 break;
 9             case 2:
10                 alert("网络发生故障，视频的下载过程被中止");
11                 break;
12             case 3:
13                 alert("解码失败");
14                 break;
15             case 4:
16                 alert("不支持播放的视频格式");
17                 break;    
18         }
19     }, false);
20 </script>

　　9、networkState：数据加载过程中读取当前网络状态，4个值

　　　　　　0 元素处于初始　　1 浏览器已选择好用什么编码来播放媒体　　2 媒体数据加载中　　3 没有支持的编码格式　　

 1 <script>
 2     var video = document.getElementById("video");
 3     video.addEventListener("progress", function(e){
 4         if(video.networkState == 2){
 5             nextworkStateDisplay.innerHTML = "加载中..." + e.loaded + "/" + e.total + "byte";
 6         }
 7         else if(video.networkState == 3){
 8             nextworkStateDisplay.innerHTML = "加载失败";
 9         }
10     }, false);
11 </script>

　　10、currentSrc：来读取播放中的媒体数据的URL地址

　　11、buffered：确认浏览器是否已缓存媒体数据

　　12、readyState：返回当前媒体当前播放位置的就绪状态。5个值

　　　　　　0 没有获取到媒体的数据，当前播放的位置没有可播放的数据

　　　　　　1 已获取到足够的媒体数据，但当前播放位置没有有效的媒体数据

　　13、seeking：返回一个布尔值，表示浏览器是否正在请求某一特定播放位置的数据，true表示浏览器正在请求数据，false表示浏览器已停止请求

　　14、seekable：

　　15、currentTime：来读取媒体当前播放位置，也可以修改currentTime来修改当前播放位置

　　　　startTime：开始读取媒体播放的开始时间

　　　　duration：读取媒体文件总的播放时间

　　16、played：可以读取媒体文件已播放部分的时间段，开始时间为已播放部分开始时间结束时间

　　　　paused：返回一个布尔值，是否处于暂停播放中，true表示暂停、false表示播放

　　　　ended：返回一个布尔值，是否播放完毕，true表示播放完毕，false表示未播放完毕

　　17、defaultPlaybackRate：读取或修改媒体播放的速率

　　　　playbackRate：读取或修改当前播放的速率

　　18、volume：读取或修改媒体播放的音量，0-1

　　　　 muted：读取或修改媒体静音状态，true表示静音，false非静音

四、方法

　　1、play()：播放

　　2、pause()：暂停播放

　　3、load()：重新载入媒体进行播放

　　4、canPlayType()：测试浏览器是否支持媒体类型

五、事件

　　1、loadstat：浏览器在网上开始寻找媒体数据

　　2、progress：正在获取媒体数据

　　3、suspend：暂停获取媒体数据，但下载过程并没有正常结束

　　4、abort：在下载完全部媒体数据之前中止获取媒体数据

　　5、error：获取媒体数据过程中出错

　　6、emptied：网络突然变初始化状态

　　7、stalled：获取数据数据失败

　　8、play：开始播放

　　9、pause：暂停

　　10、loadedmetadata：获取完毕媒体的时间长和字节数

　　11、loadeddata：加载完毕当前播放位置的媒体数据，准备播放

　　12、waiting：播放过程由于得不到下一帧而暂停播放

　　13、playing：正在播放

　　14、canplay：当前播放事率不能直接将媒体播放完毕，播放期间需要缓冲

　　15、canplaythrough：浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不在需要进行缓冲

　　16、seeking：如果为true，正在请求数据

　　17、timeupdate：当前播放位置被改变，可能是播放过程中自然改变

　　18、ended：播放结束后停止播放

　　19、ratechange：

　　20、durationchange：播放时长被改变

　　21、volumechange：volume属性被改变或muted属性被改变

第七章本地存储 WEB Storage

一、用cookie储存的问题

　　1、cookie的大小限制在4kb，而本地存储可以存储5M大小的数据

二、本地存储分为两种

　　1、localStorage：将数据保存在客户端本地的硬件设备中

　　2、sessionStorage：是指用户在浏览某个网站时，从进入到关闭所经过的时间，session可以用来保存这段数据.

三、用window.localStorage，但浏览器可能不支持，它就有可能是空，所以我们先做个判断。

1 <script>
2     function getLocalStorage() {
3         try {
4             if( !! window.localStorage ) return window.localStorage;
5         } catch(e) {
6             return undefined;
7         }
8     }
9 </script>

四、存储和读取数据

　　保存数据：sessionStorage.setItem(key value);　　　　localStorage.setItem(key, value)

1 <script>
2     var oStroge = window.localStorage;
3     oStroge.name = "box haha";
4 </script>

　　读取数据：var 变量 = sessionStorage.getItem(key);　 var 变量 = localStorage.getItem(key);

 1 <input type="text" id="keyInp">
 2 <input type="text" id="valInp">
 3 <input type="button" id="setBtn" value="存储">
 4 
 5 <input type="text" id="getkeyInp">
 6 <input type="button" id="getBtn" value="获取">
 7 
 8 <script>
 9     function getId(id){
10         return document.getElementById(id);    
11     }
12     
13     var keyObj = getId("keyInp");
14     var valObj = getId("valInp");
15     var btnObj = getId("setBtn");
16     var getKeyInp = getId("getkeyInp");
17     var getBtnObj = getId("getBtn");
18     
19     btnObj.addEventListener("click", function(){
20         setStorage(keyObj.value, valObj.value);    
21     }, false);
22     
23     getBtnObj.addEventListener("click", function(){
24         var _val = getStorage(getKeyInp.value);    
25         if(!_val){
26             alert("不正确,没有获取到值");    
27         }
28         else{
29             alert(_val);
30         }        
31     }, false);
32     
33     function setStorage(key, val){
34         localStorage.setItem(key,val);
35     }
36 
37     function getStorage(key){
38         var getKey = localStorage.getItem(key);
39         
40         if(key == ""){
41             return false;    
42         }
43         if(getKey === null){
44             return false;s    
45         }
46         return getKey;
47     }
48 
49     setStorage("company", "Tencent");
50 </script>

五、封装本地存储

 1 <script>
 2     var Storage = window.Storage || {};
 3     Storage = {
 4         setStorage: function(key, value, method){
 5             var local = window.localStorage;
 6             var session = window.sessionStorage;
 7             if(method === "local"){
 8                 local.setItem(key,value);
 9             }
10             else if(method === "session"){
11                 session.setItem(key, value);
12             }
13             else{
14                 alert("方法参数不正确");
15             }
16         },
17 
18         getStorage: function(key, method){
19             var local = window.localStorage;
20             var session = window.sessionStorage;
21             if(method === "local"){
22                 return local.getItem(key);
23             }
24             else if(method === "session"){
25                 return session.getItem(key);
26             }
27             else{
28                 alert("方法参数不正确");
29             }
30         },
31 
32         removeStorage: function(key, method){
33             var local = window.localStorage;
34             var session = window.sessionStorage;
35             if(method === "local"){
36                 return local.removeItem(key);
37             }
38             else if(method === "session"){
39                 return session.removeItem(key);
40             }
41             else{
42                 alert("方法参数不正确");
43             }
44         }
45     }
46 
47     // 增加
48     Storage.setStorage("nameId", "3215321213");
49 
50     // 获取
51     var getVal = Storage.getStorage("nameId");
52     alert(getVal);
53 
54     // 删除
55     var session = Storage.getStorage("id", "session");
56     if(session === null){
57         alert("不存在的key")
58     }
59     else{
60         Storage.removeStorage("id", "session");
61     }
62 </script>

第八章离线文件应用

一、什么是离线web应用程序

　　我们通常使用浏览器缓存在用户磁盘上存储web单页，在用户再次浏览的时候已节省带宽，但即便这样，依然无法在没有Internet的情况下访问Web。

　　为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。

二、离线应用的目的

　　离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统，并在网络畅通的情况下与服务器进行数据交互

三、离线本地存储和传统的浏览器缓存有什么不同呢？

1、浏览器缓存主要包含两类：

a.缓存协商：Last-modified,Etag

浏览器向服务器询问页面是否被修改过，如果没有修改就返回304，浏览器直接浏览本地缓存文件。否则服务器返回新内容。

b.彻底缓存：cache-control,Expires

通过Expires设置缓存失效时间，在失效之前不需要再跟服务器请求交互。

2、离线存储为整个web提供服务，浏览器缓存只缓存单个页面；

3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览，浏览器缓存无法指定；

4、离线存储可以动态通知用户进行更新。

四、在线状态检测

　　HTML5提供了onLine方法用于检测当前网络是否在线

1 setInterval(function(){
2         if(window.navigator.onLine){
3             console.log("当前在线");
4         }
5         else{
6             console.log("当前不在线");
7         }
8     }, 1000);

五、实现离线应用的步聚

　　1、离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。

version 1.0    //最好定义版本，更新的时候只需修改版本号

CACHE manifest    // 指定缓存文件
    m.png
    test.js
    test.css

NETWORK       // 只有通过联网才能浏览的文件，*代表除了在CACHE中的文件
    *

FALLBACK       // 每行分别指定在线和离线时使用的文件
    online.html offline.html

　　2、要让manifest管理存储，还需要在html标签中定义manifest属性，如下：

 1 <!DOCTYPE HTML>
 2 <html lang="en" manifest='test.manifest'>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     
 9 </body>
10 </html>

　　3、最后别忘了，这些应用需要服务器支持。

　　　　1）给http服务器加上manifest文件的MINI类型（以下方法都是针对apache服务器）
　　　　　　HTML5离线应用所需的minifest文件的MIME类型为text/cache-manifest，你需要在所使用的web服务器中添加如下文件和MIME类型的映射关系，对于apache需要　　　　　　在mime.types文件中加入如下配置：
　　　　　　　　text/cache-manifest manifest

第九章通信API

第六章 CSS3概述

选择器

一、属性选择器

1、[att=val]：属性等于值

2、[att!=val]：属性不等于值

3、[att^=val]：属性值以val开头

4、[att$=val]：属性值以val结尾

二、结构性伪类选择器：

1、 root：将样式绑定页面的根元素，所谓根元素就指位于文档最顶层结构，<html>

2、 not：如果想对某个结构互使用样式，但想排除这个结构元素下面的子结构元素，让他不使用这个样式，可以使用not选择器.

3、 empty：当元素内容为空白时使用样式

4、 target：该样式只有用户点击了页面中的超链接并且跳转到了target元素后才起作用

5、 first-child：单独指定第一个子元素 p:first-child{ … }

6、 last-child：最后一个子元素

7、 nth-child：对指定序号的子元素 p:nth-child(3) { … }

8、 nth-last-child：对指定序号从后开始数的子元素

9、 nth-of-type：

10、nth-last-of-type：

11、only-child：

三、伪元素选择器

伪元素选择器，不是针对真正的元素使用选择器，而是针对css中已经定义好的伪元素使用的选择器。

1、first-line：用于为某个无线中的第一行文字使用样式 p:first-line { color:#000fff; }

2、before：用某个元素之前插入一些内容 div:before{ content:"xxxx" }也可以插入url，content:url(“sss.jpg”)

3、after：用于某个元素之后插入一些内容

四、UI元素的伪类选择器

1、hover：用来指定鼠标移到元素上使用的样式

2、active：指定元素被激活（鼠标按下没松开）时使用的样式

3、focus：指定元素获得光标焦点时使用

4、enabled：指定当元素处于可用状态时的样式

5、disabled：指定当元素处于不可用状态时的样式

6、read-only：指定当元素处于只读状态时的样式

7、read-write：元素处于非只读状态时的样式

8、checked：用来指定单选框和多选框处于的状态

9、default：用来指定当页面打开时默认处于的状态

10、indeterminate：

11、selection：

五、字体和字体样式

1、text-shadow：给文字添加阴影：Text-shadow:横方向距离阴影离开文字的纵方向阴影模糊半径阴影颜色

2、word-break：1、normal 使用浏览器默认 2、keep-all：只能在半角空格或连字符处换行 3、break-all：允许在单词内换行

六、盒相关样式

盒的类型：使用display属性来定义盒的类型，分为block类型和inline类型

　　　1、 inline-block：

　　　2、 box-shadow：盒子的阴影，参数：横向距离、纵向距离、模糊半径、阴影颜色

　　　3、 box-sizing：

七、背景与边框

1、background-cilp：指定背景的显示范围

2、background-origin：指定绘制背景图像时的起点

3、background-size：指定背景中图像的尺寸

4、background-break：

八、圆角边框绘制

　　1、border-radius：圆角的半径. 参数：左上、右上、左下、右下

　　2、border-image：边框四角使用的图片 border-image：url(aa.jpg) 20 20 20 20 / 20px;

　　　　　　border-top-left-image：

第七章 CSS3中的变形处理

transform：可以实现文字或图像的旋转缩放、倾斜、移动四个变形处理.

浏览器兼容：
1、火狐可以写成：-moz-transform：

2、Safari或Chrome浏览器可以写成：-webkit-transform：

3、Opera浏览器可以写成-o-transform：

一、transform属性值
1、rotate：旋转

　　transofrm:rotate(45deg);　　　　// 旋转45度

2、scale：缩放

　　transform:scale(0.5);　　　　// 缩放50%，也可以 transform:scale(0.5,2) 水平缩小50%，垂直放大200%;

3、skew：倾斜

　　transform:skew(30deg, 30deg);　　// 水平倾斜30度，垂直倾斜30度

4、translate：移动

　　transform:translate(50px, 50px);　　// 水平移动50像素，垂直移动50像素

第八章 CSS3中的动画功能

transform：可以实现文字或图像的旋转缩放、倾斜、移动四个变形处理.

刷新页面返回顶部

臭小子1983

HTML5和CSS3基础

第一章 Web时间代的变迁

第二章 HTML5与HTML4的区别

第三章 HTML5结构

第五章 绘制图形

第六章 多媒体播放

第七章 本地存储 WEB Storage

第八章 离线文件应用

第九章 通信API