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、空格
2、大于号(>) > 3、小于号(<) < 4、引号(") " 5、版权符号 © |
||||||
表单的基本语法 | 基本语法 | 表单结构的基本语法如下: <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:未单击访问时的超链接样式 |
|||||||
多选择器的常用符号及组合 |
||||||||
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代码较多时,可以使用"/*…*/"添加必要的注释,增加代码的可读性。 |