HTML和CSS总结（基础版）

　 HTML和CSS总结
HTML
HTML文档基本结构 整体结构 
<html>
    <!--头部部分-->
    <head>
    </head>
    --主体部分
    <body>
    </body>
</html>

 
HTML头部结构 title标签 描述网页的主题，将在浏览器窗口的标题栏显示网页标题。
例子：
<title>搜狐-中国最大的门户网站</title>
meta标签 1、描述文档类型和字符编码

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
其中属性"http-equiv"提供"名称/值"中的名称，"content"提供"名称/值"中的值，所以以上述HTML代码的含义如下。
名称：Content-Type(文档内容类型)
值：text/html; charset=gb2312(文本类别的html类型，字符编码为简体中文)
charset表示字符集编码，常用的编码有如下四种。
gb2312:简体中文，一般用于包含中文和英文的页面。
ISO-885901：纯英文，一般用于只包含英文的页面。
big5：繁体，一般用于带有繁体字的页面。
utf-8：国际通用的字符编码，同样适用于中文和英文的页面。和"gb2312"编码相比,utf-8的国际通用性更好，但字符编码的压缩比较低，对网页性能有一定的影响。
字符编码:浏览网页时我们可以通过浏览器的菜单如I.E.)查看->编码进行语言设置;但如果HTML文件中有这行,浏览器将自动设置相应的语言项
2、描述搜索关键字和描述

<meta name="keywords" content="keywords"/>
<meta name="description" content="description"/>
实现的方式仍然为"名称/值"对的形式，其中keywords表示搜索关键字，description表示网站内容的具体描述。
提高被搜索的频率和排名的常用办法：
1、在google等搜索引擎中登录自己的网站（花钱）
2、在知名网站中加入链接（花钱）
3、在论坛中发帖宣传（花时间）
4、设置自己网站的meta标签（提供利于被搜索的信息，容易忽视的好习惯）
 设置keyword、description的好处，提高被google、百度等搜索到的命中率和排名。
基本块级标签 标题标签<h1>~<h6> 表示一段文字的标题（主题），并且支持多层次的内容结构，并赋予了标题一定的外观：所有标题字体加粗，<h1>字号最大，<h6>字号最小
例子：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

 
段落标签<p> 表示一段文字的内容，一个段落中可以包含多行文字，文字内容随浏览器窗口的大小自动换行。
例子：
<p>有勇气既会有奇迹</p>

 
水平线标签<hr/> 表示一条水平线，注意该标签比较特殊，没有结束标签，直接使用"<hr/>"表示标签的开始和结束。水平线长度可调
页面布局的块级标签 有序列表标签<ol> 表示多个并列的列表项，它们之间有明显的先后顺序，使用<ol>、</ol>表示有序列表，<li>、</li>表示各列表项
例子：
<!--<ol>的默认显示样式是从阿拉伯数字1开始，通过type值可改变样式，type的值有：1，a，A，i，I-->
<ol type="a">
    <li>填写信息</li>
</ol>

 
无序列表标签<ul> 无序列表与有序列表类似，但多个并列的列表项之间没有先后顺序，使用<ul>、</ul>表示无序列表，<li>、</li>表示各列表项
例子：
<!--<ul>的默认显示样式是disc，通过type值可改变样式，type的值有：circle: 空心圆，disc:   实心圆点，square: 方形-->
<ul type="circle">
    <li>如何激活会员名</li>
</ul>

 
定义列表标签<dl> 用于描述某个术语或产品的定义或解释，它使用<dl>、</dl>表示定义列表,<dt>、</dt>表示术语，<dd>、</dd>表述术语的具体描述。在实际应用中，定义列表还被扩展应用到图文混编的场合。<dd>相对于<dt>有更多的外边距。
例子：
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

 
表格标签<table> 用于描述一个表格，它使用规整的数据显示。它使用<table>、</table>表示表格，<tr>、</tr>表示行，<td>、</td>表示列。
在实际应用，你会发现<table>所控制的表格并不像我们常规理解的表格，<table>中的每行中的垂直并列的列之间是没有任何联系的，当我们修改其中一个<td>的样式时，是不会影响到与之垂直并列的其他列。
例子：
<table>
    <tr>
        <td>内容</td>
    </tr>
</table>

 
表单标签<form> 用于描述需要用户输入的页面内容，它使用<form>、</form>表示表单，<input/>表示输入内容项（行级标签）
例子：
<form>
    <input type="text" name="name"/>
</form>

 
分区标签<div> 用于页面布局时对区块的划分，可以容纳其中块级和行级标签，没有明显的外观效果。
例子：
<div>
</div>
常用的块状结构 1、div-ul(ol)-li:常用于分类导航或菜单等场合。
2、div-dl-dt-dd:常用于图文混编场合。
3、table-tr-td:常用于规整数据的显示场合。
4、form-table-tr-td:常用于表单布局的场合。
块级标签的特点 1、前后断行显示，块级标签比较“霸道”，默认状态下占据一整行。
2、具有一定的宽度和高度，可以通过设置块级标签的width、height属性来控制
3、块级标签常用作容器，即可以再"容纳"其他块级标签或行级标签，而行级标签一般用于组织内容，即只能用于容纳"文字"、图片或其他行级标签。
从页面布局的角度，块级标签又细分为基本块级标签和常用于页面布局的块级标签
行级标签 图像标签<img/> 用于显示图片
例子：
<img src="图片地址" alt="图片替代文字" title="鼠标悬停提示文字"/>
设计和制作王爷时，需要从方便用于使用的角度考虑问题。用户体验已越来越成为Web设计和开发需要考虑的重要因素，用户体验的原则之一就是以用户为中心，并体现在细微之处。例如，使用<img>标签时，强烈推荐同时使用"alt"和"title"属性，避免因网速太慢或路径错误带来的"一片空白"或"错误"：同时，增加的鼠标提示信息也方便用户的使用。
超连接标签<a> 根据超连接的应用场合，可以把链接分为如下三类。
1、页面间链接：A页到B页，最常用，用于网站导航。
2、锚链接：A页甲位置到A页（本页）乙位置或A页甲位置到B页的乙位置。
3、功能性链接：在页面中调用其他程序功能，例如电子邮件、QQ、MSN等。
范围标签<span> 用于标识行内的某个范围。
例子：
<span>文本内容</span>

 
换行标签<br/> 表示强制换行显示，该标签和<hr/>标签一样，没有结束标签。
文本域标签<textarea> 用于显示或输入两行或两行以上的文本，它使用的标签是<textarea>。
例子：
<textarea name="textarea" cols="40" rows="6">初始文本内容</textarea>

其中，cols用来指定多行文本域的列数，rows用来指定杜航文本域的行数。在<textarea>标签中不能使用value属性来赋初始值。
超连接的基本用法 基本语法 <a href="链接地址" target="目标窗口位置">链接文本或图像</a>
属性说明如下：
href:表示链接地址的路径
target:指定链接在哪个窗口打开，常用的取值有_self(自身窗口)、_blank（新建窗口）、框架窗口名（在指定的框架窗口中打开链接）、_parent(在父框架集中打开链接，如果不是框架网页，则含义同"_self")、_top(在顶级窗口即整个浏览器窗口中打开链接)。
页面间链接 设置href="其他页网址"即可。
例子：
从本页链接到login.html网页
<a href="login.html" target="_self">登录</a>

 
锚链接 从A页面的甲位置跳转到本页中的乙位置，实现步骤如下：
1、在页面的乙位置设置标记：<a name="marker">目标位置乙</a>，"name"为<a>标签的属性，"marker"为标识名，其功能类似古时固定船的锚（或钩），所以也成为锚名。
2、在甲位置设置href属性值为"#标记名"，语法如下：
<a href="#marker">当前位置</a>
从A页面的甲位子跳转到B页面的乙位置，实现步骤如下：
1、在B页乙位置设置锚标记的语法如下：
<a name="star">目标位置乙</a>
2、在A页甲位置设置链接的语法如下：
<a href="anchor.html#star">明星专区</a>
功能性链接 用于启动本机自带的某个应用程序
电子邮件链接语法如下：
<a href="mailto:123@qq.com">站长邮箱</a>
特殊符号 对应的字符实体 1、空格       &nbsp;
2、大于号(>)  &gt;
3、小于号(<)  &lt;
4、引号(")    &quot;
5、版权符号   &copy;
表单的基本语法 基本语法 表单结构的基本语法如下：
<form action="表单提交地址" method="提交方法">
    <!--文本框、按钮等表单元素-->
</form>
对其属性解释如下：
action属性：规定当提交表单信息时，向何处发送表单数据，即处理表单数据的目标地址。如不填，默认为当前页面。
method属性：规定提交方式，取值为"get"或"post"。"get"方式一般适用于安全性要求不高的场合，而post一般适用于安全性较高的场合。post不会把信息写在传输的地址上
input元素的属性 1、type：指定表单元素的类型，可用的选项有text、password、checkbox、radio、submit、reset、file、hidde、image和button，默认为text
2、name：指定表单元素的名称
3、value：指定表单元素的初始值
4、size：指定表单的初始宽度。如果type为text或password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位。
5、maxlength：指定可在text或password元素中输入的最大字符数，默认不做限制
6、checked：此属性只有一个值，为"checked"，表示选中状态，如果不选中，则不需添加此属性
文本框 用于给用户输入单行文本信息。只需将<input>标签的type属性设置为text即可。
例子：
<form>
    <p>用户名
        <input type="text" name="text"/>
    </p>
</form>

 
密码框 用于给用户输入保密的数据，输入的内容全部以*显示，提高数据安全，只需将<input>标签的type属性设置为password即可。
例子：
<form>
    <p>密码
        <input type="password" name="password"/>
    </p>
</form>

 
重置、提交与普通按钮 提交按钮用于提交表单数据；重置按钮用于清空现有表单数据；普通按钮一般用于调用JavaScript脚本。在用法上，设置"type"属性对应的类型即可。
例子：
<form>
    <input type="submit" value="提交按钮" name"submit"/>
    <input type="reset" value="重置按钮" name"reset"/>
    <input type="button" value="普通按钮" name"button"/>
</form>

 
图片提交按钮 
<form>
    <input type="image" src="images/login.gif"/>
</form>

需要注意，这种方式实现的图片按钮比较特殊，虽然"type"属性没有设置为"sumbit"，但仍然具备提交功能
单选按钮 用于一组相互排斥的选项，组中的每个选项应具有相同的名称(Name)，以确保用户职能选择一个选项，单选按钮对应的"type"属性为"radio"
例子：
 
<form>
    <input type="radio" name="gen" value="男" checked="checked"/>男
    <input type="radio" name="gen" value="女"/>女
</form>

 
复选按钮 用于选择多个选项，将input的type属性设为"checkbox"就可以创建一个复选框
例子：
<form>
    <input type="checkbox" name="hobby" value="sport"/>运动
    <input type="checkbox" name="hobby" value="play"/>玩游戏
</form>

 
文件域 用于上传文件，只需把type属性设置为file即可。
例子：
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="files"/>
</form>

需要注意：包含文件域的表单，由于提交的表单数据包括普通的表单数据，文件数据等多部分内容，所以必须设置表单的"enctype"编码属性为"multipart/form-data"，表示将表单数据分为多部分提交。
下拉列表框 用于使用户快速、方便、正确地选择一些选项，而且还能节省页面空间。它是通过<select>和<option>标签来实现的，<select>标签用于显示可供用户选择的下拉列表，每个选项由一个<option>标签表示，<select>标签必须至少包含一个<option>标签。语法如下：
<select name="指定列表名称" size="行数">
    <option value="可选项的值" selected="selected">显示的内容</option>
</select>

其中，在有多种选项可供用户滚动查看时，"size"属性确定列表中可同时看到的行数；"selected"属性表示该选项在默认情况下是被选中的，而且一个列表框只能有一个列表项默认被选中，如同单选按钮组那样。
表单的高级用法 隐藏域 对于网站服务器有用，而用户可能没用的信息，我们一般用隐藏域把它隐藏起来。只需将input标签的type属性设置为hidden即可。
例子：
<form>
    <input type="hidden" name="id" value="666"/>
</form>

 
只读和禁用属性 在某些情况下，我们需要对表单进行限制，设置表单元素为只读或禁用。它们常见的应用场景如下。
只读场景：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。例如：注册或交易协议、商品价格等。
禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击"注册"按钮，播放器控件在播放状态时，不能再单击"播放"按钮等。
只读和禁用效果分别通过设置"readonly"和"disabled"属性。
例子：
<form>
    <textarea name="content" cols="60" rows="8" readonly="readonly">内容</textarea>
    <input type="submit" name="btn" value="注册" disabled="disabled"/>
</form>

 
label标签 用于描述表单元素，通过for属性可获取对应表单元素的焦点。
<label for="pwd">密码</label><input type="text" name="pwd"/>
<!--for属性的值就是你要获取焦点的表单元素的name属性的值-->

 
表格的基本用法 跨行跨列 跨列是指单元格的横向合并，语法如下。
<table>
    <tr>
    <td colspan="所跨的列数">单元格内容</td>
    </tr>
</table>

跨行是指单元格在垂直方向上合并，语法如下。

<table>
    <tr>
    <td rowspan="所跨的行数">单元格内容</td>
    </tr>
</table>

跨行和跨列以后，并不改变表格的特点，同行的总高度一致，同列的总宽度一致。因此，表格中各单元格的宽度或高度互相影响，结构相对稳定，但缺点是不能灵活地进行布局控制。

需要注意的是，跨行跨列属性必须写在td标签中才能生效。
表格的高级用法 表格的高级标签 1、表格标题<caption>，用于描述整个表格的标题。
2、表格表头<th>，用于定义表格的表头，一般是表格的第一行数据，以粗体、居中的方式显示。
3、表格数据的分组标签<thead>、<tbody>、<tfooter>这三个标签一般配合使用，主要是对报表数据进行逻辑分组，<thead>标签对应报表的页眉，即表格的表头部分；<tbody>对应报表的数据主体，即详细的数据描述部分；<tfooter>对应报表的页脚，即对各分组数据进行汇总的部分。各分组标签内多行<tr>组成。
例子：
<table>
    <caption></caption>
    <thead>
        <tr>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

 
小提醒 在确定各单元格的宽、高时，需要注意以下两点。
1、同列单元格的宽度由该列宽度最大的单元格决定。如果没有，则默认与该列第一行单元格宽度一致。在布局时必须注意内容过长撑开单元格的情况，合理设置好各列列宽。
2、同行单元格的高度类似，但是请注意换行带来的高度变化。
框架 frameset框架集 框架集包含<frameset>和<frame>两个标签，其中<frameset>描述窗口的分割，<frame>定义放置在每个框架中的HTML页面。基本语法如下。
<frameset cols="25%,50%,*" rows="50%,*" border="5">
    <frame src="the_first.html"/>
</frameset>

其中，<frameset>标签的cols属性表示将页面横向分割为几列，例如，cols="25%,50%,*"表示将页面分割为三列，第一列占浏览器窗口总宽度的25%，第二列占50%，第三列占剩余部分，各列的宽度值也可使用具体数值（单位像素为px）。同理，"rows"属性表示将页面纵向分割为几行。另外，<frame>标签的"src"属性类似<img>标签的"src"，表示页面的路径。

需要注意的是：<frameset>标签和<body>标签不能同时使用，所以需要使用"<frameset>"代替页面中的"<body>"标签。
frame常用属性 例子：
<!--显示框架周围的边框为1px，不写此属性则没边框-->
frameborder="1"
<!--框架标识名-->
name="mainFrame"
<!--不显示滚动条，不写此属性则默认显示滚动条-->
scrolling="no"
<!--不允许调整框架窗口大小，不写此属性则默认允许调整框架窗口大小-->
noresize="noresize"

 
frameset框架实现窗口间的关联 实现步骤：
1、在框架页面中，为框架窗口添加"name"属性作为名称标识，关键代码如下。
<frame src="right.html" name="rightframe"/>

2、在另外一个窗口对应的页面中，设置超链接"target"目标窗口属性为希望显示的框架窗口名，关键代码如下。

<a href="left.html" target="rightframe"></a>

 
iframe内嵌框架 用于将部分框架嵌入页面的场合，一般用于引用其他网站的页面。语法如下。
<iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="是否出现滚动条"></iframe>
<iframe>标签可以与<body>标签共存
iframe框架页面重用技术 与frameset框架的窗口间的关联技术类似。
　 注释 <!--注释内容-->需要注意的是注释内容的开头开结尾不能存在"-"，示例代码如下。
<!---HELLO--->是错误的！
　 　 CSS
CSS基本语法 基本结构 
<style type="text/css">
    选择器{
        对象的属性1：属性值1;
        对象的属性2：属性值2;
    }
</style>

 
标签选择器 当需要对页面内某类标签的内容进行修饰时，则采用标签选择器，其用法如下。
标签名{
        对象的属性1：属性值1;
         对象的属性2：属性值2;
    }
例如，希望修饰页面中的所有项目列表项（<li>）的样式为：字体大小为28px，红色，隶书，示例代码如下。
 
li{
    font-size:28px;
    color:red;
    font-family:隶书;
}

 
类选择器 当只需要对页面部分标签进行修饰，则采用类选择器。
1、定义样式，其用法如下。
.类名{
    属性名1：属性值1;
    属性名2：属性值2;
}
2、应用样式，使用标签的"class"属性引用类样式，即<标签名 class="类名">标签内容</标签名>。
例如，希望修饰页面中的部分项目列表项（<li>）的样式为：蓝色，示例代码如下。
 
.blue{
    color:blue;
}
<ul>
    <li class="blue">1</li>
</ul>

需要注意：定义时类名前有个点号(.),应用样式时则不需要点号。

定义类选择器的好处是任何标签都可以应用该类样式，从而实现样式的共享和代码复用。需要注意，样式是叠加和继承的。
ID选择器 ID选择器用于修饰某个指定的页面元素或区块，这些样式是对应ID标识的HTML元素所独占的，ID属性作为HTML元素的唯一标识，要求页面内不能有重复的ID标识属性，不能像类选择那样复用和共享。
1、使用ID属性标识被修饰的页面元素。例如，对应div块，则为<div id="ID标识名">div中的内容</div>
2、定义相应的ID选择器样式，语法如下。
#ID标识名{
    属性名1：属性值1;
    属性名2：属性值2;
}
例如，现希望只对div块进行字体、宽度、背景色的修饰，则示例代码如下。
 
#menu{
    font-size:14px;
    font-family:宋体;
    width:200px;
    background:#ccc;
}
<div id="menu">div中的内容</div>

需要注意，定义ID选择器时有个井号(#)，但给HTML标签设置ID属性时不需要。
  CSS Sprite背景图片的拼合和截取技术 网上流行的CSS Sprite图片拼合和截取技术，实现的关键是利用background-position属性实现背景图标的截取。该属性可以采用数值、百分比、关键词设置图片出现的位置
盒子模型 盒子模型层次关系 1、首先是盒子的主要标识：边框（border），位于盒子的第一层。
2、其次是元素内容（content）、内边距（padding），两者同位于第二层。
3、背景图（background-image），位于第三层。
4、背景色（background-color），位于第四层。
5、最后是整个盒子的外边距（margin）。
外边距margin 1、可以使用margin属性一次设置四个方向的属性，也可以分别设置上、右、下、左四个方向的属性。
2、注意需要设为带单位的长度值，常用的长度单位一般是像素(px)。
3、可以使用margin一次设置四个方向的值，但必须按顺时针方向依次代表上（top）、右（right）、下（bottom）、左（left）四个方向的属性值，如省略则按上下、左右同值处理，举例说明如下。
①margin:1px 2px 3px 4px，表示上外边距1px，右外边距2px，下外边距3px，左外边距4px。
②margin:1px 2px 3px，等同于1px 2px 3px 2px
③margin:1px 2px，等同于1px 2px 1px 2px，表示上下外边距各位1px，左右外边据各位2px
④margin:1px，等同于1px 1px 1px 1px，表示四个外边距都为1px。
⑤特殊设置：可以设置水平为auto，表示让浏览器计算外边距，一般表现为水平居中效果。例如margin:0px auto表示在父级uansu容器中水平居中（上、下外边距为0px，左、右外边距自动计算）
边框border 1、可以使用border属性一次设置四个边的所有属性，包括style、width、color,也可以使用border-top、border-right等单独设置各边的属性，缩写时应注意格式及顺序。
border:border-width border-style color /*一次设置4个边，注意顺序*/
border-top:border-width border-style color /*设置上边框，其他边同理*/
2、对于每个边的style、color、width属性，可以一次性设置，也可以按四边分别设置，但要注意按顺时针的方向（即上-右-下-左），规则同margin。
内边距padding 1、padding值不允许为负值。
2、padding值可以一次设置，也可以四边分别设置，注意按顺时针方向，规则同margin。
浮动 浮动的原理 设置某个元素的浮动行为，该元素将脱离常规文档流，向左或向右移动，直到它的外边距碰到父元素（容器）的边框或另一个浮动元素的边框为止，如果宽度不够将换行显示。浮动元素将占据行内元素的控件。块级元素会失去其独占一行的特性，ol(ul)标签也可以使用浮动将其垂直排列，改变为水平排列。
清除浮动clear 浮动元素将根据浏览器窗口剩余的宽度，决定是否换行显示。在实际的页面布局应用中，有时需要强制换行显示，避免影响页面效果，这时需要使用clear清除属性。
根据前一个浮动元素向左或向右浮动，使用相应的"clear:left"或"clear:right"进行区隔，从而实现"强制换行"的效果。实际开发中有时不知道上一个浮动元素的浮动方向，所以常用"clear:both"来替代，表示不管前一个浮动元素是左浮动还是右浮动，都进行换行区隔显示，这种方法更通用。
position定位方式 相对定位
relative		 相对定位，相对于文档流原来位置的便宜，原占位大小完整保留。相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。示例代码
< html>
 < head>
 < title>相对定位< /title>
 < style type="text/css">
 div{
     color:#fff;
     font:bold 22px 黑体;
     width:150px;
     height:120px;
     background:red;
     float:left;
 }
 .div2{
     height:150px;
     background:#ff7300;
     position:relative;/*改变定位方式为相对定位*/
     top:10px;/*相对原来的块的上边框向下偏移10px*/
     left:20px;/*相对原来的块的左边框向右便宜20px*/
 } 
.clear{
     background:blue;
 }
 < /style>
 < /head>
 < body>
 < div>第1块< /div>
 < div class="div2">第2块< /div>
 < div class="clear">第3块< /div>
 < /body>
 < /html>

从上面的代码中可以知道，相对定位有如下3个特点：

 ①参照物：相对定位是相对于未设置定位方式前的位置，其参照物就是原来位置。
 ②偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。
 ③占位：相对定位偏移后的元素，其占有的位置是原来位置，其偏移后会覆盖并位于其他重叠元素（如“第3块”）的上面，但不会增加高度和宽度。
绝对定位
absolute		 绝对定位，完全脱离文档流，是相对于第一个非默认定位方式的上级元素的距离。相对定位的元素大小会在文档流原来位置占去相同大小的页面空间。而绝对定位则不再占原文档流页面的任何空间。其常用属性语法语义与相对定位类似，例如“position:absolute;top:200px;left:150px;”。定位方式的区别导致了参照物区别。具体参照物为上级元素中，第一个存在非默认定位方式的元素，它完全脱离了文档流。非默认定位方式就是position属性的值不是static的最接近的元素就是相对定对的参照物，如果所有元素都是默认定位方式，则相对定位的参照物就是body标签，应尽量避免这种情况，因为 如果参照物是body标签，设置了相对定位的元素就会随着浏览器的改变而改变所在的位置。在上面的相对定位的示例代码中改变其中类选择器div2的属性，示例代码如下。
.div2{
     height:150px;
     background:#ff7300;
     position:absolute;
     top:180px;
     left:200px;
}
从上面的代码中可以知道，绝对定位有如下3个特点：
①参照物：绝对定位参照物是第一个非默认定位方式的上级元素，如不存在则为整个页面。
 ②偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。
 ③占位：绝对定位偏移后的元素，不再占原来位置，其偏移后会覆盖并位于其他重叠元素（如“第3块”）的上面。
fixed position还有一种类似的定位方式为固定定位，值为fixed。同样完全脱离文档流，但参照物为浏览器的可见范围。但只工作在IE7.0的strict模式下，这里稍微提下。
静态(默认定位方式)
static		 静态无偏移，不填时默认属性，偏移量属性无效，属于常规文档流。虽然这个参数只有在JavaScript中实现某些效果时使用，但必须理解static定位方式对应的常规文档流概念。
我们知道，它是页面内容的组织方式，即从上至下，先分行；然后每行根据元素的特点放置元素：块级元素独占一行，行级元素从左至右排列。
这种组织方式就是往容器中放置流体。流体即水、油等液体，特点是自动紧密排列填充容器，就好像往水缸倒水。而非流体则是无此特点，如屋子里摆放各类家具。
常规文档流中的“常规”，是指除浮动和绝对定位外，网页显示元素的默认组织方式。相对于浮动与绝对定位的特殊情况，常规文档流可以简单的描述为“原来位置”。
 上面我们讲解了定位属性中的三种定位方式，其中相对定位与绝对定位，会与原文档流形成堆叠，覆盖在其他重叠位置元素的上面。
叠放层次属性
z-index		 z-index属性只对非默认定位方式的元素（相对、绝对与固定定位）有效，默认值为1，其值为正整数。值越大，叠放在越前面。其语法格式如：“z-index:2”。相对定位的示例代码中类选择器div2的属性改为如下示例代码。
.div2{
     height:150px;
     background:#ff7300;
     position:relative;
     top:10px;
     left:20px;
     z-index:2;
 }

由实验可知，层叠的规律如下。

（1）叠放层次值有大小差异，大的居上。就像建房子，地基即文档流页面。楼层数越大则在越上面。
 （2）同层间，后出现的居上。
总结使用场合 （1）绝对定位，对联广告及悬停显示等ajax效果。用于在有限页面空间中实现多元素叠放。在熟练了绝对定位的时候后，可以尝试用绝对定位来实现页面整体布局，能替代浮动带来的一些缺点。
 （2）相对定位，一般用于为绝对定位的上级元素，为绝对定位元素提供参照物。
超链接伪类样式

超链接伪类

1、a:link：未单击访问时的超链接样式
2、a:visited：单击访问后的超链接样式
3、a:active：鼠标单机未释放的超链接样式
4、a:hover：鼠标悬浮其上的超链接样式（此伪类还可以应用到其他的标签中例如：li:hover）
在实际应用中，一个页面中有很多链接，所以需要限定超链接样式的范围，可以使用类或id样式来实现，但实际应用中更流行的做法是采用"父级+空格+子元素"，表示区域先知的选择器。示例代码如下。
.nav ul{list-style:none;}
此处表示类名为nav的div块中的ul元素的样式

  
多选择器的常用符号及组合
 　
CSS样式应用方式 内部样式 直接写在<head>标签里的就是内部样式，但这重方法不利于在多页面间共享复用代码及维护。语法如下。
<style type="text/css">
    选择器{
        对象的属性1：属性值1;
        对象的属性2：属性值2;
    }
</style>

 
外部样式 把CSS代码单独写在另外一个或多个CSS文件中，需要用时在<head>中通过<link/>标签引用，这种方式就是应用外部样式表文件的方式。它的好处是实现了样式和结构的彻底分离，同时方便网站的其他页面复用该样式，利于保持网站的统一样式和网站维护。语法如下。
<head>
    <link rel="stylesheet" type="text/css" href="css文件地址"/>
</head>

 
行内样式 单独写在某个标签中的，就叫行内样式，这种方法虽然直观，但却应尽量少用或不用，因为内容与样式混写在一起，失去了CSS的最大优点。
样式优先级 样式是有继承性的。
优先级规则为：
行内样式>内部样式表>外部样式表
ID选择器>类选择器>标签选择器
　 注释 //和/**/是比较常用的注释，但这两种注释只适用于js和css对html无效
小技巧 1、在编写css代码的时候，尽量把重复的代码抽取出来合并成一个类，达到代码复用效果，减少代码量。
2、在页面布局时，采用div-ul(ol)-li实现精简结构，去除冗余标签，使用浮动或绝对定对来实现灵活布局。
3、用div+css实现类似框架的页面重用技巧。
①给每个div标注id标识属性，跟引用id选择器时类似，但不会冲突。例：<div id="reg">
②超链接标签的href属性的值为"#ID名"，跟引用锚链接类似，例：<a href="#reg">
③注意要给每个div添加高度，而且必须一致，还要设置overflow:hidden属性，以隐藏超出高度部分的内容，这样可以利用div的id名来改变对应div显示在页面上。
4、二级菜单显示/隐藏
①将<a>标签设置display:block属性，就可以将<a>标签改变为块级标签(如需要将块级改为行级只需设置display:inline属性即可),成为一个容器，就可以设置它的高度，高度和一级菜单文字高度一致，而且把二级菜单的<a>标签写在结构里
②注意这里也需要设置overflow:hidden属性，来把二级菜单隐藏起来。
③最后只需在一级菜单的<a>标签中添加伪类a:hover样式，将高度改为height:auto，表示当鼠标移到一级菜单上的时候，将一级菜单的高度设置为根据内容高度而调整，那么二级菜单就会显示出来了。
5、属性display:none和visibility:hidden，同样能达到隐藏内容的效果，两者的区别在于display:none隐藏后不再占用原来的位置，visibility在隐藏后而然占用原来的位置。
代码规范 1、W3C XHTML标准中，规定属性值不能省略，要求写为属性="属性值"的形式。例如，下拉列表框的默认选中，应写为selected="selected"，而不能仅写selected。
2、虽然CSS代码不区分大小写，但推荐全用小写。
3、每条样式规则用分号(;)隔开，一般写为多行，简单的规则也可以合并为一行。
4、当CSS代码较多时，可以使用"/*…*/"添加必要的注释，增加代码的可读性。
posted @ 2012-12-09 18:37  AA恶魔  阅读(445)  评论(0)  编辑  收藏  举报