W3ShcoolHTML/CSS学习笔记精华版
2015-09-09 00:00
555 查看
摘要: 就是这个网站http://www.w3school.com.cn/h.asp，如果你不想看原网站冗长的内容，那这个精华版笔记适合你！
目前几乎所有的操作系统都能安装并使用现代浏览器了，即安装Chrome、Firefox、Safari、Opera的最新版以及IE9以上(IE9是否是现代浏览器仍有争议)，即使是其他国产浏览器，例如360、搜狗、腾讯、UC等浏览器，无论是桌面还是移动平台都能支持大部分的HTML5以及CSS3等新特性了，因此老旧的浏览器兼容几乎可以忽略，尤其在如今移动设备大行其道之时，特殊情况下再特殊考虑；
HTML几乎没有什么难点，但是对于媒体的处理需要特别注意，w3school上没有详细说明，需要自己去查找相关的资料，最好自己动手学会处理，HTML4和HTML5都要尝试一下，无论是用Flash插件还是用js脚本！
--HTML基础教程
@HTML是用来描述网页的一种语言，HTML指的是超文本标记语言，HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，HTML使用标记标签来描述网页；
例如：HTML标题使用<h1></h1>来定义，段落<p></p>，图像<img src="" width="" height="" />，链接<a href=""></a>等；
一个基本的HTML文档至少应该是这样的：
@HTML元素是值从开始标签到结束标签的所有代码，HTML元素可以嵌套，一般不要忽略结束标签，空元素例如<br />最好添加斜杠关闭，HTML标签大小写不敏感但是推荐使用小写；
@HTML标签可以拥有属性，用于个元素提供更多信息，一般以键值对的形式出现，例如name="value"，且一般在开始标签中指定属性，一般都应该给属性值添加引号，如果属性值本身有引号那么外围使用单引号包围，例如name='XXX "Hello" Game'和标签一样，属性也大小写不敏感但推荐小写；
大多数HTML元素的属性有：class规定元素的类名、id规定元素的唯一id、style规定元素的行内样式、title规定元素的额外信息，在工具提示中显示，等等；
HTML标题是通过<h1></h1>-<h6></h6>来定义的；
HTML水平线使用<hr />元素，用于分隔内容，比如文章的一小节；
HTML注释用于提高代码可读性，浏览器不会显示注释，注释这样写<!-- -->；
HTML段落使用<p></p>元素，如果希望在不启用新段落换行可以使用<br />元素，例如<p>abc<br />def</p>，要注意在段落中多个空格或空行会被浏览器解释成一个空格；
@HTML格式化标签定义了很多格式化输出的元素，例如粗体斜体等，文本格式化标签有：
@HTML样式有如下三种插入方式：
1.外部样式表：当样式需要被应用到多个页面时使用外部样式表
通过使用href属性-创建指向另一个文档的链接<a href="">xxx</a>
通过使用name属性-创建文档内的书签<a name="tip"></a>
链接的target属性，用于指定链接的文档在何处打开；链接的name属性，用于指定锚的名称，然后在href属性中使用#符号接锚名称，添加到URL末端来链接到该书签，例如<a href="#tip">xxx</a>；
@HTML图像使用<img />元素定义，它是空标签；
通过使用src属性，指定图片源的url地址
通过使用alt属性，指定当图片无法载入时显示的替换文本
@HTML表格使用<table></table>元素来定义，表格行<tr></tr>列<td></td>表头<th></th>；
@HTML列表：
无序列表使用<ul></ul>元素，列表项使用<li></li>元素
有序列表使用<ol></ol>元素，列表项使用<li></li>元素
<li></li>元素中可以继续使用<ul></ul>或<ol></ol>元素来形成嵌套列表；
@HTML块元素；
块级元素在浏览器显示时会以新行来开始，例如<h1><p><ul><table>等
内联元素则不会以新行开始，例如<b><td><a><img>等
HTMLdiv元素没有特定含义，它属于块级元素，其常见用途是进行文档布局
HTMLspan元素没有特定含义，它属于内联元素，其用于文本容器或组合行内元素
div和span元素通常需要搭配CSS使用
@HTML表单使用<form></form>元素定义，用于搜集用户的输入，大多数表单标签是<input>标签，输入类型由其tpye属性定义，常用的类型有：
文本：<input type="text" name="name" />
密码：<input type="password" name="password" />
单选按钮：<input type="radio" name="" />
复选框：<input type="checkbox" name="" />
提交：<input type="submit" value="" />通常提交按钮需要配合form元素的action和method属性
表单标签有：
@HTML框架使用<frameset></frameset>元素定义，用于在窗口中显示不止一个页面；缺点是一个文档需要跟踪多个页面且很难打印整张页面；框架结构标签<frameset>定义如何将窗口分割为框架，rows/cols属性定义每行或每列占据屏幕的面积；
@HTML内联框架使用<iframe src="URL"></iframe>元素定义，指定frameborder="0"属性就能删除边框，指定name="myiframe"后与链接的<a target="myiframe" />配合可以作链接的目标。
@背景设置，<body />标签拥有如下属性设置用于设置背景：
bgcolor：指定背景颜色；
background：指定背景图像。属性为图像的URL，如果图像尺寸小于浏览器窗口默认复制
注意背景图像尺寸一定要小，否则影响页面加载的时间；
@HTML颜色有如下三种：
16进制符：#00~#FF或#000000~#FFFFFF；
RGB颜色：rgb(0,0,0)~rgb(255,255,255)；
颜色名：16种(HTML4.0标准支持)：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow；
Web安全色是指在计算机仅支持256颜色时能正确显示所有颜色
--HTML高级教程
@<!DOCTYPE>声明
由于HTML有不同的版本即不同的文档类型，浏览器需要借助这个声明才能完全正确地显示出页面，常用的文档类型声明有：
HTML5：<!DOCTYPE html>
HTML 4.01：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@HTML<head>元素是所有头部元素的容器，<title><base><link><mete><script><style>等可以添加到<head>部分；
<title>第一文档标题，它将改变浏览器工具栏的标题，已经添加到收藏夹时显示的标题以及搜索引擎结果的标题；
<base>为页面所有连接规定默认的地址或默认的目标：<base href="" /><base target="_blank" />
<link>定义文档与外部资源的关系，常用于连接样式表：<link rel="stylesheet" type="text/css" href="xxx.css" />，还有网页的标签icon图标：<link rel="icon" type="image/x-icon" href="xxx.ico" />
<style>定义样式信息：<style type="text/css"></style>
<mate>提供HTML文档元数据，页面不会显示，用于规定页面描述、关键词、作者等，方便搜索引擎或其他web服务使用，例如页面描述<mate name="description" content="" />，关键词<mate name="keywords" content="HTML,CSS" />，常用的meta是指明文档类型和文件编码：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script>定义客户端脚本
@HTML脚本，<script>标签既可以直接定义脚本，也可以使用src属性指向外部脚本文件：<script type="text/javascript"></script>，当浏览器禁用了脚本时可以使用<noscript>标签来提示；
@HTML字符实体，例如要在页面显示<字符要使用<，空格要使用
@HTML URL编码，URL仅能使用ACSII字符集来，因此其他字符集的字符都需要转换为有效的ASCII字符，一般使用%后跟两位16进制数来代替，URL不能包含空格，使用+来代替空格；
--HTML媒体
@让HTML能播放媒体简直就是个噩梦，尤其在移动平台上，但是HTML5之后的现代浏览器都简单多了，最简单方便的处理方式是使用插件或JS脚本播放器或HTML5；
HTML5中使用<audio>标签处理音频，<video>标签处理视频
--XHTML
@XHTML是更为严格规范后的HTML，一个XHTML文档至少应该是这样的：
向每张页面的第一行添加 XHTML <!DOCTYPE>
向每张页面的 html 元素添加 xmlns 属性，即命名空间
把所有元素名改为小写
关闭所有空元素
把所有属性名改为小写
为所有属性值加引号
--HTML5
@HTML5仍然在完善之中，但现代浏览器已经支持得很好了，其规则有：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
@HTML5视频，使用<video>标签来定义，其支持的格式有如下几种：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件，即.ogg格式
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件，即.mp4格式
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件，即.mkv格式
例如：<video src="xxx.ogg" width="" height="" controls="controls">Not support video tag</video>或者<video width="" height="" controls="controls"><source src="xxx.ogg" tpye="video/ogg"><source src="xxx.mp4" type="video/mp4">Not support video tag</video>
control属性添加播放暂停和音量控件，可以指定宽高，标签内定义不支持的文本提示，标签内允许多个<source>元素，浏览器使用第一个可识别的格式；
@HTML5音频，使用<audio>标签来定义，其支持的格式有ogg、mp3、wav；
例如<audio src="xxx.ogg" controls="controls">Not support audio tag<audio>或者<audio controls="controls"><source src="xxx.ogg" type="audio/ogg"><source src="xxx.mp3" type="audio/mp3">Not support audio tag<audio>
control属性添加播放暂停和音量控件，标签内定义不支持的文本提示，标签内允许多个<source>元素，浏览器使用第一个可识别的格式；
@HTML5拖放，HTML5中如何元素都支持拖放，使元素可拖动，需要将被拖动元素的draggable属性设置为true，且指定ondragstart方法，ondragstart="drag(event)"：
在被拖动元素中指定ondrop="drop(event)"和ondragover="allowDrop(event)"方法
ondragstart方法规定被拖动的数据，ondragover事件规定如何放置被拖动的数据，ondrop事件在拖放时发生，首先禁止浏览器对数据拖放的默认链接打开方式，然后获取被拖放的数据类型xxx和id，然后追加到目标元素中；
@HTML5画布，使用<canvas>标签来定义，它指定了一块矩形区域用于绘制图像，其本身不提供绘图能力，借助JavaScript脚本可以控制其内的每一个像素，例如：<canvas id="mycanvas" width="" height=""></canvas>；
在js中使用getElementById获取到canvas对象，调用其的getContext("2d")获取其内置的HTML5对象，这里提供了许多方法来进行绘制，如直线，矩形，圆形，字符，渐变及图像等；
@HTML5内联SVG，HTML5支持SVG的矢量图形，它是一只基于XML格式用于网络的可伸缩矢量图形标准，其优势在于缩放不损失，可文本编辑，可索引和压缩；它直接在页面中使用<svg>标签定义；
与Canvas的不同：SVG是一种使用XML描述的2D图形语言，SVG对象属性发生变化，浏览器自动重绘，Canvas使用js绘制且是逐像素渲染，如果位置发生变化，整个场景需要重新绘制，甚至是已经被覆盖的对象；
Canvas依赖分辨率，不支持事件处理器，弱文本渲染力，能以.png或.jpg格式保存结果，适合图像密集型游戏；
SVG不依赖分辨率，支持事件处理，适合地图等大型渲染区域的应用，复杂度高会减慢渲染速度，不适合游戏；
HTML5Web存储，HTML5提供两种客户端存储数据的方法，之前是有cookie完成的，但无法应付大量数据的存储，操作数据必须使用
localStorage方法，数据永久存储
sessionStorage方法，会话级别
--HTML参考手册
既然是参考手册那就还是参考原网站更方便了^_^；
CSS比较难的地方是其框模型以及定位，以及部分复杂的选择器，前两个是必需彻底理解清除的！最好自己动手写几个实例；
--CSS基础教程
@CSS，层叠样式表，定义如何显示HTML元素，解决页面内容与表现分离的问题，用于方便地改变页面的布局和外观；
重点来了，之所以说“层叠”是因为当同一个HTML元素被不止一个样式定义时，会发生按优先权的覆盖，即浏览器采用最高优先权的样式来绘制最终的结果，优先权由低到高依次为：浏览器缺省设置<外部样式表<内部样式表(位于<head>标签内的)<内联样式(HTML元素内部)；
@基础语法，CSS规则有两个部分组成，选择器以及一条或多条声明，声明之间用分号隔开，所有声明用花括号包围，一条声明由一个属性和值组成，属性和值之间用冒号分开，例如：h1{color:red;font-size:14px;}；
一些注意事项：
在使用RGB百分比时，值为0也要有%号；
尺寸是像素值，0可以不使用px单位；
值和单位之间不要有空格，例如是2px，不能是2 px；
如果值为若干单词，要加双引号；
一条声明也要以分号结尾，最后一条声明可以不加分号，但建议加上分号；
虽然CSS对大小写不敏感，但针对class和id名称还是敏感的；
@高级语法
选择器分组：多个选择器可以使用相同的声明，选择器之间用逗号分隔，例如：h1,h2,h3{color:red;}
继承：所谓继承就是子元素将继承最高级元素所拥有的属性，一般情况下浏览器是这样的，例如body{color:red}，那么网页所有标题段落文字都将变成红色，如果希望摆脱继承，可以单独为子元素再指定属性，例如p{color:green;}；
@派生选择器：根据元素在位置的上下文关系来定义样式，例如将列表中的strong元素变为斜体而不是正常的粗体：li strong{font-style:italic;font-weight:normal;}；
@id选择器：为特定id的HTML元素指定样式，以#定义，例如#red{color:red;}#green{color:green;}，此后id属性值为red的元素颜色显示为红色，id值为green的则为绿色；建议id在文档中只出现一次；
id选择器同样可以作派生选择器来使用多次，例如#mydiv p{color:red;}#mydiv h3{color:green;}，这样一个id为mydiv的<div>元素内部的段落颜色为红色，3级标题为绿色；
@类选择器，为特定class的HTML元素指定样式，以.点号定义，例如.center{text-align:center;}，此后class属性值为center的元素将居中，要注意火狐不支持class类起名时第一个字符为数字；
同理class选择器也可以用作派生选择器，例如.myclass td{background:#666;}，或者td .myclass{background:#666;}，仔细看这两者是有不同的；
@属性选择器，为有特定属性的HTML元素指定样式，以[]括号定义，例如[title]{color:red;}；也可以属性和值同时指定：[titile="w3school"]{color:red;}；如果属性值为由空格分开的多个值，只要其中某个值存在则会被选中，例如[titile~="hello"]{color:red;}，在页面中如果有元素的title属性值中包含了hello这个值就会应用红色颜色；
属性选择器在不带有class或id的表单中设置样式特别方便，例如：input[type="text"]{width:100px;}
属性选择器除了~=包含选择外，还有^=开头选择，$=结尾选择，*=统配选择等，但实际应用不多；
注意只有在规定了!DOCTYPE声明时，IE7/8才支持属性选择器；
@创建CSS，一个HTML文档插入样式表的方法有三种：
外部样式表：当一个样式表要应用到多个页面时，外部样式表是理想选择，在每个页面的<head>标签内使用<link>标签链接到样式表即可：<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
内部样式表：使用<style>标签在文档头部定义：<head><style type="text/css"><style>
内联样式：由于把内容和样式混在一起，这种方式要慎用，如果需要使用，在元素中指定style属性即可：<p style="color:red;">abc</p>
如果三种样式都应用到了同一个元素，那么高优先级的会覆盖低优先级的，低优先级的会继承高优先级的；
--CSS样式
介绍CSS样式之前不得不提前介绍一下CSS的单位，CSS单位的概念非常重要，常用的CSS单位有如下几种：
A.尺寸单位常用的有：
%：百分比，这个常用于位置或相对尺寸；
in/cm/mm：英寸、厘米、毫米；
px：像素，计算机屏幕上一个显示RGB颜色的最小单位点；
pt：磅，1pt=1/72in英寸；
ex：一个ex是一个字体的x-height即字体尺寸的一半；
em：1em为当前元素中字体尺寸的一倍，3em就是3倍，如果元素未指定字体尺寸，则取浏览器默认字体尺寸
B.颜色单位常用的有：
颜色名：HTML和CSS规范中定义了147中，其中17中标准颜色（aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow）以及HTML4.0标准的16种颜色；
RGB值：分两种，一种是RGB值如rgb(0,0,255)，另一种是RGB百分比值如rgb(0%,0%,100%)；
16进制值：即#rrggbb如#ffffff
要注意0可以有单位，也可以没有单位，0就是0，建议使用0值时不要带单位；
@CSS背景，CSS允许纯色作为背景，也允许使用图像达到复杂的效果；
背景色：使用background-color属性，支持所有元素；
背景图像：使用backgroud-image属性，其默认值为none，其值一般为一个url，例如body{background-image:url(/img/a.jpg);}，支持的格式有jpg/png/gif等；
背景重复：使用backgroud-repeat属性，repeat-x和repeat-y使图像在水平或垂直方向重复，no-repeat则不允许平铺；
背景定位：使用background-position属性，改变图像在背景中的位置，其值有top/right/bottom/left/center或两两组合，前为水平方向后为垂直方向；或者使用x% y%，xpos ypos，当规定一个值时另一个为50%，二者可以混合使用，如果是百分比位置会同时应用于元素和图像，如果是位置则仅仅是图片左上角与指定位置对齐；
背景固定：默认背景是随着网页向下滚动会同时移动，如果希望固定背景，使用background-attachment为fixed即可，其值默认是scroll；
背景属性可以写在一个声明中，且可以同时指定颜色和图像背景；
要注意背景属性都不能继承；
推荐简写属性background，按如下顺序，中途可以忽略某个属性：
background-color颜色
background-position起始位置
background-repeat重复模式
background-attachment固定背景
background-image图像
@CSS文本，可以定义文本的颜色，间距，对齐，装饰，缩进等外观；
A.文本颜色：使用color属性，所有颜色单位的值均可；
B.缩进文本：使用text-indent属性；
可以指定所有尺寸单位，如2em，即首行缩进2字符；
可以指定负值造成悬挂缩进的效果，但是要会导致文本超出元素左边界，因此需要同时设置左内边距来避免这种显示问题，例如p{text-indent: -2em;padding-left:1em;}；
如果指定为百分比值则相对于缩进元素的父元素的宽度；
注意text-indent属性会继承，即设置了该属性的元素的子元素也会同样缩进；
C.水平对齐：使用text-align属性；
它影响文本行之间的对齐方式，其值有left/right/center分别导致元素中的文本左对齐、右对齐和居中；
还有一个justify值，即两端对齐，它调整文本字词的间距以满足两端对齐父元素内边界上使得各行长度一致，但是尽量避免使用这个值；
注意text-align:center仅影响元素内部内容，而<center>标签不仅影响元素内部而且元素本身也会居中；
D.字词间隔：使用word-spacing属性，即改变字（单词）之间的间隔，接受正负的长度值
E.字母间隔：使用letter-spacing属性，即改变字符字母之间的间隔，接受正负的长度值
F.字符转换：使用text-transform属性处理文本的大小写，默认值none，不作改动，uppercase和lowercase则是全大写和全小写，capitalize则是首字母大写；对于标题文本较为适用；
G.文本装饰：使用text-decoration属性，有如下几种值：
none，默认值，元素无装饰，如果是链接元素可以设置该值取消超链接默认的下划线；
underline，对元素加下划线，overline，对元素加上划线，line-through，对元素加贯穿线；
要注意可以同时使用多个值，但是同一元素匹配了多个值，那么胜出的值完全覆盖另一个值而不是累积，例如h2.my{text-decoration:line-through;}h2{text-decoration:underline overline;}那么class为my的标题只有贯穿线；
H.处理空白符：使用white-space属性，前面提到过浏览器默认将HTML中文本间的多个空白符处理成一个空格，这就是默认的normal处理方式，但是也可以有其他处理空白符的方式：
pre-line，空白符会合并成一个空格，保留换行符，允许浏览器宽度不够时段落自动换行
normal，空白符会合并成一个空格，忽略换行符，允许自动换行
nowrap，空白符会合并成一个空格，忽略换行符，不允许自动换行，即文本会在一行中显示
pre，保留所有空白符，保留换行符，不允许自动换行
pre-wrap，保留所有空白符，保留换行符，允许自动换行
它们的区别这样记忆，pre和normal是全部相反，pre-wrap与pre的区别是允许自动换行，nowarp与normal的区别是不允许自动换行，pre-line与normal的区别是保留换行符；
I.文本方向：使用direction属性，其影响块级元素中文本的方向，表中列布局的方向，内容水平填充其元素框的方向，以及两端对齐元素中最后一行的位置，其值有ltr默认从左至右，rtl反之；
@CSS字体，可以定义文本的字体系列，大小，加粗，斜体和变形
A.CSS字体系列，通用字体系列：Serif/Sans-serif/Monospace/Cursive/Fantasy等，特定字体系列：Times/Courier等；
B.指定字体，使用font-family属性，多个字体间用逗号隔开，如果字体名包含空格或特殊字符，需要使用引号；
C.CSS字体风格，使用font-style属性，有三个值，normal正常，italic斜体，oblique斜体；注意两个斜体的区别是前者稍改变了字母结构，后者是仅仅倾斜，但浏览器里看上去两者完全一致
D.CSS字体变形，使用font-variant属性，小型大小字母，不常用
E.CSS字体加粗，使用font-weight属性，指定值为bold即可，或者100~900指定9个级别的加粗程度，400为normal，700为bold；
F.字体大小，使用font-size属性，默认文本大小是16像素即1em，可以使用如下类型的值：
使用像素，20px
使用em，推荐使用，16px=1em，因此20px=1.25em
使用百分比，一般是为body元素设置font-size为100%
推荐简写属性font，按如下顺序，中途可以忽略某个属性：
font-style风格
font-variant变形
font-weight加粗
font-size尺寸
font-family字体系列
@CSS链接，链接特殊性在于，其有如下四种状态：
a:link普通未访问过的状态
a:visited已访问过的状态
a:hover鼠标位于链接上方时
a:active鼠标点击的时候
另外必须注意如下次序：a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后；
常用修饰链接的属性有：
text-decoration，指定为none去掉下划线
background-color，指定链接的背景色
@CSS列表，对列表的样式修改有如下属性：
list-style-type，列表项标识，及列表左边的小圆点等
list-style-image，指定标志为自定义图像，值为url(xxx.jpg)
list-style-position，指定标志位置
推荐简写属性list-style，按如下的顺序，中途可以忽略某个属性；
list-style-image
list-style-type
list-style-position
@CSS表格属性
设置表格边框使用border属性，后面会介绍该属性；
设置表格边框折叠，使用border-collapse:collapse；
设置表格单元格边框距离，使用border-spacing；
设置表格宽度高度，使用width和height属性，可以使用百分比或像素；
表格文本对齐，使用text-align和vertical-align属性；
表格内边距，使用padding属性；
表格颜色，使用border指定边框颜色，使用background-color指定背景色，color指定文本颜色；
@CSS轮廓，使用outline属性，按如下顺序设置：
outline-color，轮廓的颜色
outline-style，轮廓的样式，默认none，还有dotted/dashed/lolid/double等
outline-width，轮廓的宽度，默认medium中等，还有thin细，thick粗，或像素值
--框模型
CSS的重点之一来了，这对于理解元素构造或结构有重要意义，CSS的框模型规定了元素框处理元素内容、内边距、边框、外边距的方式，如下图：
元素框最内部是实际内容，width和height定义宽高，包围内容的是内边距，内边距的边缘是边框，边框外是外边距，外边距是透明的，不会遮挡后面的元素，特别注意背景应用于内容、内边距和边框组成的区域；
@CSS内边距，使用padding属性，定义元素边框与元素内容之间的空白区域；
其值接受长度值和百分比值，不允许使用负值；可以在同一个声明中按照上右下左的顺序分别指定各内边距，包括padding-top；如果使用百分比则是相对于父元素的值计算的；
@CSS边框，使用border属性，定义围绕元素内容和内边距的一条或多条线；边框包含宽度样式及颜色；
注意只有当边框的样式不是none时边框才会出现；另外还要注意边框与元素的背景的关系，元素背景是元素内容、内边距和边框区的背景，也就是说边框绘制在背景的“上面”，背景的范围包含边框范围；
边框样式border-style：常用的边框样式有dotted点状，dashed虚线，solid实线，double双线，另外还有一个hidden解决应用在表时边框冲突；另外还有注意double双线定义两条线的宽度加上线之间的空间等于border-width的值；可以在同一个声明中按照上右下左的顺序分别指定各边框样式，包括border-top-style；
边框宽度border-width：可以指定长度值，或者thin/medium/thick，其中medium为默认值，使用这三个值不同浏览器的表现可能不一致；可以在同一个声明中按照上右下左的顺序分别指定各边框宽度，包括border-top-width；
边框颜色border-color：可以指定颜色值；CSS2引入了一个颜色值transparent，其用于创建有宽度但不可见的边框，可以说相当于额外的内边距一样，注意IE7以前不支持；
border简写属性和border-top简写属性均按照width、style、color的顺序声明属性；
@CSS外边距，使用margin属性，定义元素边框外的空白区域；
其值接受长度值和百分比值，甚至允许使用负值；可以在同一个声明中按照上右下左的顺序分别指定各外边距，包括margin-top；如果使用百分比则是相对于父元素的值计算的；
注意body元素的内外边距，部分浏览器会有默认的外边距8px或内边距8px，如果希望调整应该使用自定义的边距覆盖默认边距；另外段落元素p也有类似情况；
@内外边距和边框的宽度和颜色都有“值复制的特性”即当上右下左四个值在同一个声明中时，如果值少于4个，值复制就会起作用；例如border-width:2px 3px 4px，则代表上右下左分别为2/3/4/3像素，如果是border-width:2px 3px，则代表上右下左分别为2/3/2/3像素；
其规则是，如果缺少左边距值则以右边距值复制得到，如果缺少下边距或右边距的值则以上边距值复制得到；如果不希望这么麻烦可以直接指定单边距属性，例如border-top-width；
@CSS外边距合并，即指当两个垂直外边距相遇时，会形成一个外边距，并取值较大者；
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并；
当一个元素包含在另一个元素中时，假设没有内边距或边框把内外边距分开，它们的上外边距或下外边距也会发生合并
甚至一个空元素，有外边距，没有边框或填充，上下外边距碰到一起也会合并，如果这个元素再遇到另外一个元素的外边距还会再次合并；
只有普通文档流中的块框的垂直外边距会发生外边距合并；行内框、浮动框或绝对定位之间的外边距不会合并；
@定位概述：
定位的基本思想是，允许你定义元素框相对于其正常位置而应该出现的位置，可以相对于父元素、另一个元素甚至是浏览器窗口；另外CSS还提出了浮动的概念；
一切皆为框：
有一些元素例如div/p称为块级元素（块框），span/a元素称为行内元素（行内框）;
可以使用display属性改变生成框的类型，例如指定为block值可以将行内元素表现得像块级元素一样，反之指定为inline即可，还可以指定为none值使元素没有框，即使得元素消失且不占用文档空间；
有一种情况即使没有显示指定也会创建块级元素，例如把文本添加到块级元素开头，<div>some text<p>abc</p></div>，此时的框称为无名块框，或行框；
定位机制有普通流、浮动和绝定位三种：
一般所有框均在普通流中定位，即元素位置由其在HTML文档中的位置决定；
块级框从上到下排列，框之间的垂直距离由垂直外边距计算得到；
行内框在一行中水平排列，可以使用水平内边距、边框和外边距来调整其间距；但是垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为行框，其高度总是足以容纳其包含的所有行内框。额外指定行高可以改变这个框的高度；
position属性可以指定元素框的生成方式，其值包括：
static，默认值，块级元素生成一个矩形框，作为文档流的一部分，行内元素创建一个或多个行框，置于其父元素中；
relative，元素框偏移某个距离，元素保持原状，它原本占用的空间仍然保留；
absolute，元素脱离文档流，并相对于其包含块进行定位，这个包含块可能是另一个元素或初始包含块。它原本占用的空间不保留，元素定位后生成一个块级框，无论它原来在正常流中是何种类型的框；
fixed，其表现类似与absolute，但是其包含块是视窗本身；
@CSS相对定位，指定元素position属性为relative即可，此后可以设置垂直或水平位置来让元素相对于其起点进行移动，即指定left/right/top/bottom等属性分别设定元素各边相对与元素起始位置的偏移，如果为负值则反向偏移，例如left:30px，表示元素的左边向右偏移30像素，如果为left:-30px，表示元素的左边向左偏移30像素；
要注意相对定位虽然元素发生了偏移，但元素仍然占据原来的位置，此时移动后的元素有可能覆盖其他元素；
@CSS绝对定位，指定元素position属性为absolute即可，与相对定位一样可以指定left/right/top/bottom等属性来设定具体的偏移值；绝对定位的元素的位置相对于最近的已定位的祖先元素，如果没有祖先元素则相对于最初的包含块，由于绝对定位后元素脱离文档流，因此会覆盖其他元素，此时可以指定z-index属性来控制元素的堆放次序；
@CSS浮动
目前几乎所有的操作系统都能安装并使用现代浏览器了，即安装Chrome、Firefox、Safari、Opera的最新版以及IE9以上(IE9是否是现代浏览器仍有争议)，即使是其他国产浏览器，例如360、搜狗、腾讯、UC等浏览器，无论是桌面还是移动平台都能支持大部分的HTML5以及CSS3等新特性了，因此老旧的浏览器兼容几乎可以忽略，尤其在如今移动设备大行其道之时，特殊情况下再特殊考虑；
HTML几乎没有什么难点，但是对于媒体的处理需要特别注意，w3school上没有详细说明，需要自己去查找相关的资料，最好自己动手学会处理，HTML4和HTML5都要尝试一下，无论是用Flash插件还是用js脚本！
--HTML基础教程
@HTML是用来描述网页的一种语言，HTML指的是超文本标记语言，HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，HTML使用标记标签来描述网页；例如：HTML标题使用<h1></h1>来定义，段落<p></p>，图像<img src="" width="" height="" />，链接<a href=""></a>等；
一个基本的HTML文档至少应该是这样的：
<html> <head> <title>Document name goes here</title> </head> <body> Visible text goes here </body> </html>
@HTML元素是值从开始标签到结束标签的所有代码，HTML元素可以嵌套，一般不要忽略结束标签，空元素例如<br />最好添加斜杠关闭，HTML标签大小写不敏感但是推荐使用小写；
@HTML标签可以拥有属性，用于个元素提供更多信息，一般以键值对的形式出现，例如name="value"，且一般在开始标签中指定属性，一般都应该给属性值添加引号，如果属性值本身有引号那么外围使用单引号包围，例如name='XXX "Hello" Game'和标签一样，属性也大小写不敏感但推荐小写；
大多数HTML元素的属性有：class规定元素的类名、id规定元素的唯一id、style规定元素的行内样式、title规定元素的额外信息，在工具提示中显示，等等；
HTML标题是通过<h1></h1>-<h6></h6>来定义的；
HTML水平线使用<hr />元素，用于分隔内容，比如文章的一小节；
HTML注释用于提高代码可读性，浏览器不会显示注释，注释这样写<!-- -->；
HTML段落使用<p></p>元素，如果希望在不启用新段落换行可以使用<br />元素，例如<p>abc<br />def</p>，要注意在段落中多个空格或空行会被浏览器解释成一个空格；
@HTML格式化标签定义了很多格式化输出的元素，例如粗体斜体等，文本格式化标签有：
<b> 定义粗体文本 <big> 定义大号字 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字 <s> 不赞成使用，使用 <del> 代替 <strike> 不赞成使用，使用 <del> 代替 <u> 不赞成使用，使用样式（style）代替
@HTML样式有如下三种插入方式：
1.外部样式表：当样式需要被应用到多个页面时使用外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>2.内部样式表：当单个HTML文件需要特别的样式时，使用内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head> 3.内联样式：当个别元素需要应用特殊的样式时，使用内联样式<p style="color: red; margin-left: 20px"> This is a paragraph </p>@HTML链接使用<a></a>元素来创建链接，其使用有两种方式：
通过使用href属性-创建指向另一个文档的链接<a href="">xxx</a>
通过使用name属性-创建文档内的书签<a name="tip"></a>
链接的target属性，用于指定链接的文档在何处打开；链接的name属性，用于指定锚的名称，然后在href属性中使用#符号接锚名称，添加到URL末端来链接到该书签，例如<a href="#tip">xxx</a>；
@HTML图像使用<img />元素定义，它是空标签；
通过使用src属性，指定图片源的url地址
通过使用alt属性，指定当图片无法载入时显示的替换文本
@HTML表格使用<table></table>元素来定义，表格行<tr></tr>列<td></td>表头<th></th>；
@HTML列表：
无序列表使用<ul></ul>元素，列表项使用<li></li>元素
有序列表使用<ol></ol>元素，列表项使用<li></li>元素
<li></li>元素中可以继续使用<ul></ul>或<ol></ol>元素来形成嵌套列表；
@HTML块元素；
块级元素在浏览器显示时会以新行来开始，例如<h1><p><ul><table>等
内联元素则不会以新行开始，例如<b><td><a><img>等
HTMLdiv元素没有特定含义，它属于块级元素，其常见用途是进行文档布局
HTMLspan元素没有特定含义，它属于内联元素，其用于文本容器或组合行内元素
div和span元素通常需要搭配CSS使用
@HTML表单使用<form></form>元素定义，用于搜集用户的输入，大多数表单标签是<input>标签，输入类型由其tpye属性定义，常用的类型有：
文本：<input type="text" name="name" />
密码：<input type="password" name="password" />
单选按钮：<input type="radio" name="" />
复选框：<input type="checkbox" name="" />
提交：<input type="submit" value="" />通常提交按钮需要配合form元素的action和method属性
表单标签有：
<form> 定义供用户输入的表单 <input> 定义输入域 <textarea> 定义文本域(一个多行的输入控件) <label> 定义一个控制的标签 <fieldset> 定义域 <legend> 定义域的标题 <select> 定义一个选择列表 <optgroup> 定义选项组 <option> 定义下拉列表中的选项 <button> 定义一个按钮 <isindex> 已废弃；由<input>代替
@HTML框架使用<frameset></frameset>元素定义，用于在窗口中显示不止一个页面；缺点是一个文档需要跟踪多个页面且很难打印整张页面；框架结构标签<frameset>定义如何将窗口分割为框架，rows/cols属性定义每行或每列占据屏幕的面积；
@HTML内联框架使用<iframe src="URL"></iframe>元素定义，指定frameborder="0"属性就能删除边框，指定name="myiframe"后与链接的<a target="myiframe" />配合可以作链接的目标。
@背景设置，<body />标签拥有如下属性设置用于设置背景：
bgcolor：指定背景颜色；
background：指定背景图像。属性为图像的URL，如果图像尺寸小于浏览器窗口默认复制
注意背景图像尺寸一定要小，否则影响页面加载的时间；
@HTML颜色有如下三种：
16进制符：#00~#FF或#000000~#FFFFFF；
RGB颜色：rgb(0,0,0)~rgb(255,255,255)；
颜色名：16种(HTML4.0标准支持)：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow；
Web安全色是指在计算机仅支持256颜色时能正确显示所有颜色
--HTML高级教程
@<!DOCTYPE>声明由于HTML有不同的版本即不同的文档类型，浏览器需要借助这个声明才能完全正确地显示出页面，常用的文档类型声明有：
HTML5：<!DOCTYPE html>
HTML 4.01：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@HTML<head>元素是所有头部元素的容器，<title><base><link><mete><script><style>等可以添加到<head>部分；
<title>第一文档标题，它将改变浏览器工具栏的标题，已经添加到收藏夹时显示的标题以及搜索引擎结果的标题；
<base>为页面所有连接规定默认的地址或默认的目标：<base href="" /><base target="_blank" />
<link>定义文档与外部资源的关系，常用于连接样式表：<link rel="stylesheet" type="text/css" href="xxx.css" />，还有网页的标签icon图标：<link rel="icon" type="image/x-icon" href="xxx.ico" />
<style>定义样式信息：<style type="text/css"></style>
<mate>提供HTML文档元数据，页面不会显示，用于规定页面描述、关键词、作者等，方便搜索引擎或其他web服务使用，例如页面描述<mate name="description" content="" />，关键词<mate name="keywords" content="HTML,CSS" />，常用的meta是指明文档类型和文件编码：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script>定义客户端脚本
@HTML脚本，<script>标签既可以直接定义脚本，也可以使用src属性指向外部脚本文件：<script type="text/javascript"></script>，当浏览器禁用了脚本时可以使用<noscript>标签来提示；
@HTML字符实体，例如要在页面显示<字符要使用<，空格要使用
@HTML URL编码，URL仅能使用ACSII字符集来，因此其他字符集的字符都需要转换为有效的ASCII字符，一般使用%后跟两位16进制数来代替，URL不能包含空格，使用+来代替空格；
--HTML媒体
@让HTML能播放媒体简直就是个噩梦，尤其在移动平台上，但是HTML5之后的现代浏览器都简单多了，最简单方便的处理方式是使用插件或JS脚本播放器或HTML5；HTML5中使用<audio>标签处理音频，<video>标签处理视频
--XHTML
@XHTML是更为严格规范后的HTML，一个XHTML文档至少应该是这样的：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> ...... </body> </html>如何从HTML转换到XHTML？
向每张页面的第一行添加 XHTML <!DOCTYPE>
向每张页面的 html 元素添加 xmlns 属性，即命名空间
把所有元素名改为小写
关闭所有空元素
把所有属性名改为小写
为所有属性值加引号
--HTML5
@HTML5仍然在完善之中，但现代浏览器已经支持得很好了，其规则有：新特性应该基于 HTML、CSS、DOM 以及 JavaScript
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
@HTML5视频，使用<video>标签来定义，其支持的格式有如下几种：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件，即.ogg格式
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件，即.mp4格式
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件，即.mkv格式
例如：<video src="xxx.ogg" width="" height="" controls="controls">Not support video tag</video>或者<video width="" height="" controls="controls"><source src="xxx.ogg" tpye="video/ogg"><source src="xxx.mp4" type="video/mp4">Not support video tag</video>
control属性添加播放暂停和音量控件，可以指定宽高，标签内定义不支持的文本提示，标签内允许多个<source>元素，浏览器使用第一个可识别的格式；
@HTML5音频，使用<audio>标签来定义，其支持的格式有ogg、mp3、wav；
例如<audio src="xxx.ogg" controls="controls">Not support audio tag<audio>或者<audio controls="controls"><source src="xxx.ogg" type="audio/ogg"><source src="xxx.mp3" type="audio/mp3">Not support audio tag<audio>
control属性添加播放暂停和音量控件，标签内定义不支持的文本提示，标签内允许多个<source>元素，浏览器使用第一个可识别的格式；
@HTML5拖放，HTML5中如何元素都支持拖放，使元素可拖动，需要将被拖动元素的draggable属性设置为true，且指定ondragstart方法，ondragstart="drag(event)"：
function drag(ev){
ev.dataTransfer.setData("xxx",ev.target.id);
}在被拖动元素中指定ondrop="drop(event)"和ondragover="allowDrop(event)"方法
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("xxx");
ev.target.appendChild(document.getElementById(data));
}function allowDrop(ev){
ev.preventDefault();
}ondragstart方法规定被拖动的数据，ondragover事件规定如何放置被拖动的数据，ondrop事件在拖放时发生，首先禁止浏览器对数据拖放的默认链接打开方式，然后获取被拖放的数据类型xxx和id，然后追加到目标元素中；
@HTML5画布，使用<canvas>标签来定义，它指定了一块矩形区域用于绘制图像，其本身不提供绘图能力，借助JavaScript脚本可以控制其内的每一个像素，例如：<canvas id="mycanvas" width="" height=""></canvas>；
在js中使用getElementById获取到canvas对象，调用其的getContext("2d")获取其内置的HTML5对象，这里提供了许多方法来进行绘制，如直线，矩形，圆形，字符，渐变及图像等；
@HTML5内联SVG，HTML5支持SVG的矢量图形，它是一只基于XML格式用于网络的可伸缩矢量图形标准，其优势在于缩放不损失，可文本编辑，可索引和压缩；它直接在页面中使用<svg>标签定义；
与Canvas的不同：SVG是一种使用XML描述的2D图形语言，SVG对象属性发生变化，浏览器自动重绘，Canvas使用js绘制且是逐像素渲染，如果位置发生变化，整个场景需要重新绘制，甚至是已经被覆盖的对象；
Canvas依赖分辨率，不支持事件处理器，弱文本渲染力，能以.png或.jpg格式保存结果，适合图像密集型游戏；
SVG不依赖分辨率，支持事件处理，适合地图等大型渲染区域的应用，复杂度高会减慢渲染速度，不适合游戏；
HTML5Web存储，HTML5提供两种客户端存储数据的方法，之前是有cookie完成的，但无法应付大量数据的存储，操作数据必须使用
localStorage方法，数据永久存储
sessionStorage方法，会话级别
--HTML参考手册
既然是参考手册那就还是参考原网站更方便了^_^；CSS比较难的地方是其框模型以及定位，以及部分复杂的选择器，前两个是必需彻底理解清除的！最好自己动手写几个实例；
--CSS基础教程
@CSS，层叠样式表，定义如何显示HTML元素，解决页面内容与表现分离的问题，用于方便地改变页面的布局和外观；重点来了，之所以说“层叠”是因为当同一个HTML元素被不止一个样式定义时，会发生按优先权的覆盖，即浏览器采用最高优先权的样式来绘制最终的结果，优先权由低到高依次为：浏览器缺省设置<外部样式表<内部样式表(位于<head>标签内的)<内联样式(HTML元素内部)；
@基础语法，CSS规则有两个部分组成，选择器以及一条或多条声明，声明之间用分号隔开，所有声明用花括号包围，一条声明由一个属性和值组成，属性和值之间用冒号分开，例如：h1{color:red;font-size:14px;}；
一些注意事项：
在使用RGB百分比时，值为0也要有%号；
尺寸是像素值，0可以不使用px单位；
值和单位之间不要有空格，例如是2px，不能是2 px；
如果值为若干单词，要加双引号；
一条声明也要以分号结尾，最后一条声明可以不加分号，但建议加上分号；
虽然CSS对大小写不敏感，但针对class和id名称还是敏感的；
@高级语法
选择器分组：多个选择器可以使用相同的声明，选择器之间用逗号分隔，例如：h1,h2,h3{color:red;}
继承：所谓继承就是子元素将继承最高级元素所拥有的属性，一般情况下浏览器是这样的，例如body{color:red}，那么网页所有标题段落文字都将变成红色，如果希望摆脱继承，可以单独为子元素再指定属性，例如p{color:green;}；
@派生选择器：根据元素在位置的上下文关系来定义样式，例如将列表中的strong元素变为斜体而不是正常的粗体：li strong{font-style:italic;font-weight:normal;}；
@id选择器：为特定id的HTML元素指定样式，以#定义，例如#red{color:red;}#green{color:green;}，此后id属性值为red的元素颜色显示为红色，id值为green的则为绿色；建议id在文档中只出现一次；
id选择器同样可以作派生选择器来使用多次，例如#mydiv p{color:red;}#mydiv h3{color:green;}，这样一个id为mydiv的<div>元素内部的段落颜色为红色，3级标题为绿色；
@类选择器，为特定class的HTML元素指定样式，以.点号定义，例如.center{text-align:center;}，此后class属性值为center的元素将居中，要注意火狐不支持class类起名时第一个字符为数字；
同理class选择器也可以用作派生选择器，例如.myclass td{background:#666;}，或者td .myclass{background:#666;}，仔细看这两者是有不同的；
@属性选择器，为有特定属性的HTML元素指定样式，以[]括号定义，例如[title]{color:red;}；也可以属性和值同时指定：[titile="w3school"]{color:red;}；如果属性值为由空格分开的多个值，只要其中某个值存在则会被选中，例如[titile~="hello"]{color:red;}，在页面中如果有元素的title属性值中包含了hello这个值就会应用红色颜色；
属性选择器在不带有class或id的表单中设置样式特别方便，例如：input[type="text"]{width:100px;}
属性选择器除了~=包含选择外，还有^=开头选择，$=结尾选择，*=统配选择等，但实际应用不多；
注意只有在规定了!DOCTYPE声明时，IE7/8才支持属性选择器；
@创建CSS，一个HTML文档插入样式表的方法有三种：
外部样式表：当一个样式表要应用到多个页面时，外部样式表是理想选择，在每个页面的<head>标签内使用<link>标签链接到样式表即可：<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
内部样式表：使用<style>标签在文档头部定义：<head><style type="text/css"><style>
内联样式：由于把内容和样式混在一起，这种方式要慎用，如果需要使用，在元素中指定style属性即可：<p style="color:red;">abc</p>
如果三种样式都应用到了同一个元素，那么高优先级的会覆盖低优先级的，低优先级的会继承高优先级的；
--CSS样式
介绍CSS样式之前不得不提前介绍一下CSS的单位，CSS单位的概念非常重要，常用的CSS单位有如下几种：A.尺寸单位常用的有：
%：百分比，这个常用于位置或相对尺寸；
in/cm/mm：英寸、厘米、毫米；
px：像素，计算机屏幕上一个显示RGB颜色的最小单位点；
pt：磅，1pt=1/72in英寸；
ex：一个ex是一个字体的x-height即字体尺寸的一半；
em：1em为当前元素中字体尺寸的一倍，3em就是3倍，如果元素未指定字体尺寸，则取浏览器默认字体尺寸
B.颜色单位常用的有：
颜色名：HTML和CSS规范中定义了147中，其中17中标准颜色（aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow）以及HTML4.0标准的16种颜色；
RGB值：分两种，一种是RGB值如rgb(0,0,255)，另一种是RGB百分比值如rgb(0%,0%,100%)；
16进制值：即#rrggbb如#ffffff
要注意0可以有单位，也可以没有单位，0就是0，建议使用0值时不要带单位；
@CSS背景，CSS允许纯色作为背景，也允许使用图像达到复杂的效果；
背景色：使用background-color属性，支持所有元素；
背景图像：使用backgroud-image属性，其默认值为none，其值一般为一个url，例如body{background-image:url(/img/a.jpg);}，支持的格式有jpg/png/gif等；
背景重复：使用backgroud-repeat属性，repeat-x和repeat-y使图像在水平或垂直方向重复，no-repeat则不允许平铺；
背景定位：使用background-position属性，改变图像在背景中的位置，其值有top/right/bottom/left/center或两两组合，前为水平方向后为垂直方向；或者使用x% y%，xpos ypos，当规定一个值时另一个为50%，二者可以混合使用，如果是百分比位置会同时应用于元素和图像，如果是位置则仅仅是图片左上角与指定位置对齐；
背景固定：默认背景是随着网页向下滚动会同时移动，如果希望固定背景，使用background-attachment为fixed即可，其值默认是scroll；
背景属性可以写在一个声明中，且可以同时指定颜色和图像背景；
要注意背景属性都不能继承；
推荐简写属性background，按如下顺序，中途可以忽略某个属性：
background-color颜色
background-position起始位置
background-repeat重复模式
background-attachment固定背景
background-image图像
@CSS文本，可以定义文本的颜色，间距，对齐，装饰，缩进等外观；
A.文本颜色：使用color属性，所有颜色单位的值均可；
B.缩进文本：使用text-indent属性；
可以指定所有尺寸单位，如2em，即首行缩进2字符；
可以指定负值造成悬挂缩进的效果，但是要会导致文本超出元素左边界，因此需要同时设置左内边距来避免这种显示问题，例如p{text-indent: -2em;padding-left:1em;}；
如果指定为百分比值则相对于缩进元素的父元素的宽度；
注意text-indent属性会继承，即设置了该属性的元素的子元素也会同样缩进；
C.水平对齐：使用text-align属性；
它影响文本行之间的对齐方式，其值有left/right/center分别导致元素中的文本左对齐、右对齐和居中；
还有一个justify值，即两端对齐，它调整文本字词的间距以满足两端对齐父元素内边界上使得各行长度一致，但是尽量避免使用这个值；
注意text-align:center仅影响元素内部内容，而<center>标签不仅影响元素内部而且元素本身也会居中；
D.字词间隔：使用word-spacing属性，即改变字（单词）之间的间隔，接受正负的长度值
E.字母间隔：使用letter-spacing属性，即改变字符字母之间的间隔，接受正负的长度值
F.字符转换：使用text-transform属性处理文本的大小写，默认值none，不作改动，uppercase和lowercase则是全大写和全小写，capitalize则是首字母大写；对于标题文本较为适用；
G.文本装饰：使用text-decoration属性，有如下几种值：
none，默认值，元素无装饰，如果是链接元素可以设置该值取消超链接默认的下划线；
underline，对元素加下划线，overline，对元素加上划线，line-through，对元素加贯穿线；
要注意可以同时使用多个值，但是同一元素匹配了多个值，那么胜出的值完全覆盖另一个值而不是累积，例如h2.my{text-decoration:line-through;}h2{text-decoration:underline overline;}那么class为my的标题只有贯穿线；
H.处理空白符：使用white-space属性，前面提到过浏览器默认将HTML中文本间的多个空白符处理成一个空格，这就是默认的normal处理方式，但是也可以有其他处理空白符的方式：
pre-line，空白符会合并成一个空格，保留换行符，允许浏览器宽度不够时段落自动换行
normal，空白符会合并成一个空格，忽略换行符，允许自动换行
nowrap，空白符会合并成一个空格，忽略换行符，不允许自动换行，即文本会在一行中显示
pre，保留所有空白符，保留换行符，不允许自动换行
pre-wrap，保留所有空白符，保留换行符，允许自动换行
它们的区别这样记忆，pre和normal是全部相反，pre-wrap与pre的区别是允许自动换行，nowarp与normal的区别是不允许自动换行，pre-line与normal的区别是保留换行符；
I.文本方向：使用direction属性，其影响块级元素中文本的方向，表中列布局的方向，内容水平填充其元素框的方向，以及两端对齐元素中最后一行的位置，其值有ltr默认从左至右，rtl反之；
@CSS字体，可以定义文本的字体系列，大小，加粗，斜体和变形
A.CSS字体系列，通用字体系列：Serif/Sans-serif/Monospace/Cursive/Fantasy等，特定字体系列：Times/Courier等；
B.指定字体，使用font-family属性，多个字体间用逗号隔开，如果字体名包含空格或特殊字符，需要使用引号；
C.CSS字体风格，使用font-style属性，有三个值，normal正常，italic斜体，oblique斜体；注意两个斜体的区别是前者稍改变了字母结构，后者是仅仅倾斜，但浏览器里看上去两者完全一致
D.CSS字体变形，使用font-variant属性，小型大小字母，不常用
E.CSS字体加粗，使用font-weight属性，指定值为bold即可，或者100~900指定9个级别的加粗程度，400为normal，700为bold；
F.字体大小，使用font-size属性，默认文本大小是16像素即1em，可以使用如下类型的值：
使用像素，20px
使用em，推荐使用，16px=1em，因此20px=1.25em
使用百分比，一般是为body元素设置font-size为100%
推荐简写属性font，按如下顺序，中途可以忽略某个属性：
font-style风格
font-variant变形
font-weight加粗
font-size尺寸
font-family字体系列
@CSS链接，链接特殊性在于，其有如下四种状态：
a:link普通未访问过的状态
a:visited已访问过的状态
a:hover鼠标位于链接上方时
a:active鼠标点击的时候
另外必须注意如下次序：a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后；
常用修饰链接的属性有：
text-decoration，指定为none去掉下划线
background-color，指定链接的背景色
@CSS列表，对列表的样式修改有如下属性：
list-style-type，列表项标识，及列表左边的小圆点等
list-style-image，指定标志为自定义图像，值为url(xxx.jpg)
list-style-position，指定标志位置
推荐简写属性list-style，按如下的顺序，中途可以忽略某个属性；
list-style-image
list-style-type
list-style-position
@CSS表格属性
设置表格边框使用border属性，后面会介绍该属性；
设置表格边框折叠，使用border-collapse:collapse；
设置表格单元格边框距离，使用border-spacing；
设置表格宽度高度，使用width和height属性，可以使用百分比或像素；
表格文本对齐，使用text-align和vertical-align属性；
表格内边距，使用padding属性；
表格颜色，使用border指定边框颜色，使用background-color指定背景色，color指定文本颜色；
@CSS轮廓，使用outline属性，按如下顺序设置：
outline-color，轮廓的颜色
outline-style，轮廓的样式，默认none，还有dotted/dashed/lolid/double等
outline-width，轮廓的宽度，默认medium中等，还有thin细，thick粗，或像素值
--框模型
CSS的重点之一来了，这对于理解元素构造或结构有重要意义，CSS的框模型规定了元素框处理元素内容、内边距、边框、外边距的方式，如下图：元素框最内部是实际内容，width和height定义宽高，包围内容的是内边距，内边距的边缘是边框，边框外是外边距，外边距是透明的，不会遮挡后面的元素，特别注意背景应用于内容、内边距和边框组成的区域；
@CSS内边距，使用padding属性，定义元素边框与元素内容之间的空白区域；
其值接受长度值和百分比值，不允许使用负值；可以在同一个声明中按照上右下左的顺序分别指定各内边距，包括padding-top；如果使用百分比则是相对于父元素的值计算的；
@CSS边框，使用border属性，定义围绕元素内容和内边距的一条或多条线；边框包含宽度样式及颜色；
注意只有当边框的样式不是none时边框才会出现；另外还要注意边框与元素的背景的关系，元素背景是元素内容、内边距和边框区的背景，也就是说边框绘制在背景的“上面”，背景的范围包含边框范围；
边框样式border-style：常用的边框样式有dotted点状，dashed虚线，solid实线，double双线，另外还有一个hidden解决应用在表时边框冲突；另外还有注意double双线定义两条线的宽度加上线之间的空间等于border-width的值；可以在同一个声明中按照上右下左的顺序分别指定各边框样式，包括border-top-style；
边框宽度border-width：可以指定长度值，或者thin/medium/thick，其中medium为默认值，使用这三个值不同浏览器的表现可能不一致；可以在同一个声明中按照上右下左的顺序分别指定各边框宽度，包括border-top-width；
边框颜色border-color：可以指定颜色值；CSS2引入了一个颜色值transparent，其用于创建有宽度但不可见的边框，可以说相当于额外的内边距一样，注意IE7以前不支持；
border简写属性和border-top简写属性均按照width、style、color的顺序声明属性；
@CSS外边距，使用margin属性，定义元素边框外的空白区域；
其值接受长度值和百分比值，甚至允许使用负值；可以在同一个声明中按照上右下左的顺序分别指定各外边距，包括margin-top；如果使用百分比则是相对于父元素的值计算的；
注意body元素的内外边距，部分浏览器会有默认的外边距8px或内边距8px，如果希望调整应该使用自定义的边距覆盖默认边距；另外段落元素p也有类似情况；
@内外边距和边框的宽度和颜色都有“值复制的特性”即当上右下左四个值在同一个声明中时，如果值少于4个，值复制就会起作用；例如border-width:2px 3px 4px，则代表上右下左分别为2/3/4/3像素，如果是border-width:2px 3px，则代表上右下左分别为2/3/2/3像素；
其规则是，如果缺少左边距值则以右边距值复制得到，如果缺少下边距或右边距的值则以上边距值复制得到；如果不希望这么麻烦可以直接指定单边距属性，例如border-top-width；
@CSS外边距合并，即指当两个垂直外边距相遇时，会形成一个外边距，并取值较大者；
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并；
当一个元素包含在另一个元素中时，假设没有内边距或边框把内外边距分开，它们的上外边距或下外边距也会发生合并
甚至一个空元素，有外边距，没有边框或填充，上下外边距碰到一起也会合并，如果这个元素再遇到另外一个元素的外边距还会再次合并；
只有普通文档流中的块框的垂直外边距会发生外边距合并；行内框、浮动框或绝对定位之间的外边距不会合并；
--CSS定位
CSS的重点之二来了，CSS的定位属性允许你对元素进行定位，这对于理解页面布局有重要意义；@定位概述：
定位的基本思想是，允许你定义元素框相对于其正常位置而应该出现的位置，可以相对于父元素、另一个元素甚至是浏览器窗口；另外CSS还提出了浮动的概念；
一切皆为框：
有一些元素例如div/p称为块级元素（块框），span/a元素称为行内元素（行内框）;
可以使用display属性改变生成框的类型，例如指定为block值可以将行内元素表现得像块级元素一样，反之指定为inline即可，还可以指定为none值使元素没有框，即使得元素消失且不占用文档空间；
有一种情况即使没有显示指定也会创建块级元素，例如把文本添加到块级元素开头，<div>some text<p>abc</p></div>，此时的框称为无名块框，或行框；
定位机制有普通流、浮动和绝定位三种：
一般所有框均在普通流中定位，即元素位置由其在HTML文档中的位置决定；
块级框从上到下排列，框之间的垂直距离由垂直外边距计算得到；
行内框在一行中水平排列，可以使用水平内边距、边框和外边距来调整其间距；但是垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为行框，其高度总是足以容纳其包含的所有行内框。额外指定行高可以改变这个框的高度；
position属性可以指定元素框的生成方式，其值包括：
static，默认值，块级元素生成一个矩形框，作为文档流的一部分，行内元素创建一个或多个行框，置于其父元素中；
relative，元素框偏移某个距离，元素保持原状，它原本占用的空间仍然保留；
absolute，元素脱离文档流，并相对于其包含块进行定位，这个包含块可能是另一个元素或初始包含块。它原本占用的空间不保留，元素定位后生成一个块级框，无论它原来在正常流中是何种类型的框；
fixed，其表现类似与absolute，但是其包含块是视窗本身；
@CSS相对定位，指定元素position属性为relative即可，此后可以设置垂直或水平位置来让元素相对于其起点进行移动，即指定left/right/top/bottom等属性分别设定元素各边相对与元素起始位置的偏移，如果为负值则反向偏移，例如left:30px，表示元素的左边向右偏移30像素，如果为left:-30px，表示元素的左边向左偏移30像素；
要注意相对定位虽然元素发生了偏移，但元素仍然占据原来的位置，此时移动后的元素有可能覆盖其他元素；
@CSS绝对定位，指定元素position属性为absolute即可，与相对定位一样可以指定left/right/top/bottom等属性来设定具体的偏移值；绝对定位的元素的位置相对于最近的已定位的祖先元素，如果没有祖先元素则相对于最初的包含块，由于绝对定位后元素脱离文档流，因此会覆盖其他元素，此时可以指定z-index属性来控制元素的堆放次序；
@CSS浮动
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web布局连载——两栏固定布局（五）
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- AS3自写类整理笔记 ClassLoader类第1/2页
- AS3自写类整理笔记 Dot类第1/2页
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ，必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单