[参考别人的资料]html 的学习重要语句

基于内容的标签赋予含义，而不是格式化。

文档将会更加一致，而且可以更好地帮助执行自动搜索和内容编辑

<dfn> 标签可标记那些对特殊术语或短语的定义。斜体来显示 <dfn> 中的文本。将来，<dfn> 还可能有助于创建文档的索引或术语表。

标签传达的含义比浏览器显示文本的方式更为重要

精确地控制样式和外观，但是在使用 HTML 或 XHTML 时，除非极少情况下，都应该避免使用物理标签。

9 种物理样式，包括粗体（bold）、斜体（italic）、等宽（monospaced）、下划线（underlined）、删除线（strikethrough）、放大（larger）、缩小（smaller）、上标（superscripted）和下标（subscripted）文本。这些标签是：

• <b>
• <big>
• <i>
• <s>
• <small>
• <strike>
• <sub>
• <sup>
• <tt>

提示：请记住这些物理样式标签对紧接的文本产生的强烈效果。要实现在整个文档范围内对文本显示的全面控制，请使用样式表。

通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

background-color 属性为元素定义了背景颜色：

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

HTML 使用超级链接与网络上的另一个文档相连。

锚标签和 Href 属性

HTML 使用 <a> （锚）标签指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。

Name 属性用于创建被命名的锚（named anchors）。

每个章节赋予一个命名锚

超文本的基本特征就是可以超链接文档；

与超链接相关联的鼠标相关事件。这些事件与 JavaScript 结合使用可以产生一些令人激动的效果。

把提供热点和超链接地址的锚看作“链接”，而用于标记文档的目标部分的锚称为“锚”

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格的表头使用 <th> 标签进行定义。

<th>Heading</th>
<th>Another Heading</th>

Target 属性，你可以定义被链接的文档在何处显示。

<td></td>

空单元格中添加一个空格占位符，就可以将边框显示出来。

 th 表示表格标题，td是数据

no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")

<caption>我的标题</caption>

  <th colspan="2">电话</th>横跨两列的单元格：

  <th rowspan="2">电话</th>横跨两行的单元格：

演示如何显示在不同的元素内显示元素。

   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>

• 苹果
• 香蕉
• 菠萝     
  
  <table border="1" 
  cellpadding="10">Cell spacing 增加单元格之间的距离。

<h4>背景颜色：</h4>
<table border="1" 
bgcolor="red">

单元背景：<td bgcolor="red">First</td>

 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>

<table frame="box">

<table frame="above">

<table frame="below">

<table frame="hsides">

<table frame="vsides">

<table>

定义表格

<caption>

定义表格标题。

<th>

定义表格的表头。

<tr>

定义表格的行。

<td>

定义表格单元。

<thead>

定义表格的页眉。

<tbody>

定义表格的主体。

<tfoot>

定义表格的页脚。

<col>

定义用于表格列的属性。

<colgroup>

定义表格列的组。

<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

<h4>一个有序列表：</h4>
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<ul type="disc">

• 苹果

<ul type="circle">

• 苹果

<ul type="square">

• 苹果

<ol type="A"><ol type="a">

<ol type="I">

1. 桔子

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。

<form>
名：
<input type="text" name="firstname">
<br>
姓：
<input type="text" name="lastname">
</form>

表单使用表单标签（<form>）定义。用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的

单选按钮（Radio Buttons）

<input type="radio" name="sex" value="male" /> Male

 Male 

复选框（Checkboxes）

<input type="checkbox" name="bike" />
I have a bike

 I have a bike 

表单的动作属性（Action）和确认按钮

<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

<input type="radio" checked="checked" name="Sex" value="male"> checked 什么意思

简单的下拉列表

<select name="cars">

<option value="volvo">Volvo</option>

<option value="fiat" selected="selected">Fiat</option>

  Volvo

 Saab

  Fiat

 Audi

 

<form name="input" action="http://www.W3CSchool.cn/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />

I have a bike:  

<input type="submit" value="Submit" />

如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。

这个表单会把电子邮件发送到 W3CSchool。

<form action="MAILTO:someone@W3CSchool.cn" method="post" enctype="text/plain">

<input type="submit" value="发送"> 

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义一个控制的标签
<fieldset>	定义域
<legend>	定义域的标题
<select>	定义一个选择列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个按钮

请注意，插入动画图像的语法与插入普通图像的语法没有区别。<img src="eg_mouse.jpg" width="128" height="128">

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">慎用图片。

<body background="eg_background.jpg">

gif 和 jpg 文件均可用作 HTML 背景。

如果图像小于页面，图像会进行重复。

<h2>已设置对齐方式的图像：</h2>  <p>图像 <img src="eg_cute.gif" align="bottom"> 在文本中</p>

<img src ="eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩写图像

仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。

请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。

如果无法显示图像，将显示 "alt" 属性中的文本：

border="0" ？？？

border='0' 这条子句一般常用在以下两个标记中：
 <img src=.. border="0">
 <table border="0">

 在这两个HTML标记中，它都是用来说明边框的粗细，即border值越大，边框越粗，当它的值为0的时候，可理解为不可见

<map name="planetmap" id="planetmap">

map是图形控制的标识，area是每个图形区域。coords是在屏幕上的绝对坐标，是两个，代表左上和右下的矩形的焦点位置，在这个区域里的点击操作都会触发
href的连接，target 是跳转到哪个目标块，鼠标移到上面alt 标记的图片上就会出现工具提示，

<area
shape="circle"
coords="180,139,14"
href ="venus.html"
target ="_blank"
alt="Venus" />

_blank -- 在新窗口中打开链接 
_parent -- 在父窗体中打开链接 
_self -- 在当前窗体打开链接,此为默认值 
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) 
一个对应的框架页的名称 -- 在对应框架页中打开

<img 属性="属性值"/>

left 把图像对齐到左边

right 把图像对齐到右边

middle 把图像与中央对齐

top 把图像与顶部对齐

bottom 把图像与底部对齐

alt(图像替代文本)和src(图像路径)

图像映射的 ismap 样式 被称为 “服务器端”图像映射，当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。特殊的服务器端软件可以根据这些坐标来做出响应。

标签	描述
<img>	定义图像。
<map>	定义图像地图。
<area>	定义图像地图中的可点击区域。

<body bgcolor="#d0d0d0">搭配良好的背景和颜色

<body bgcolor="#ffffff" text="yellow">

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

• 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。

层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。通过计算 256 x 256 x 256，从 0 到 255 的红色、绿色和蓝色的值一共可以组合出 1600 万种不同的颜色，当所有颜色取相等的值时，灰色就可以被显示出来。

http://w3cschool.cn/html_colornames.html

HTML布局 - 使用表格

cellpadding是指“表格单元格内边距”，只适合用在 table里面。

在网络上，随处都可以看到像报纸那样的格式化分栏。 垂直对齐 valign=top

frameset cols="25%,50%,25%"代表插入框架部分占水平部分的百分比，说白了就是占水平25%，cols表示水平，rows表示垂直 
  
  
rows/columns 的值规定了每行或每列占据屏幕的面积
一个框架有可见边框，用户可以拖动边框来改变它的大小。noresize="noresize"
  
  

   
   为不支持框架的浏览器添加 <noframes> 标签。假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
  
  
  
  

   
   <noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

  
  
  
  

   
   

  
  
  
  

   
    <frame src="frame_a.html" noresize="noresize" />

  
  
  
  

   
   

  
  
  
  

   
   
   
   
创建内联框架（HTML 页中的框架）。一些老的浏览器不支持 iframe。
   
   
如果得不到支持，iframe 是不可见的。
   
   


   
   
 其中的一个框架设置了指向另一个文件内指定的节的链接。
   
   
<frame src="link.html#C10">

   
   
使用星号（尤其是用数值作为前缀），可以很容易地在一个框架集中分割剩下的空间。
如果在星号前放置一个整数值，相应的行或列九回相对地获得更多的可用空间。
<frameset cols="180,*">
万维网联盟已从其标准中删除了字体标签，在未来，样式表（CSS）将用来定义布局，以及显示 HTML 元素的属性。
font-family:verdana 
style="font-size:150%"
font-size:100%与font-size:20px是两种表示方法，100%表示默认大小，而20px表示字体大小为20像素，
<h1 style="color:blue">A heading</h1>

所有的格式化信息都可以从 HTML 文件中剥离，并植入一个独立的样式表。
您可以做的最重要的事情就是开始编写正确的 HTML4.01 代码。并且使用小写字母编写标签。记得关闭标签。决不要在没有 </p> 标签的情况下结束一个段落。

   
   小写的标签。
   
   

  
  
  
  

   
   希望 HTML 文件被正确地验证，就要将恰当的 DTD 添加到文件的第一行。

  
  
  
  

   
   

  
  
  
  

   
   通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。

  
  
  
  

   
   

  
  
  
  

   
   
   
   
<style type="text/css"></style>表示这是样式表,在中间放入css内容；
 type是它的类型属性，text/css是它的值，它们是告诉浏览器这里面的文本内容(text)要当层叠样式表 (css)来解析，不能当作其它的来解析。
   
   <head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
   
   

  
  
  
  

   
   
   
   
 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
   
   
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
   
   

  
  
  
  

   
   应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签或 <frameset> 标签之前。

  
  
  
  

   
   

  
  
  
  

   
   样式属性做一个没有下划线的链接。 
  
  
  
  

   
   <a href="lastpage-2.html" style="text-decoration:none">

  
  
  
  

   
   
   
   
META，网页Html语言里Head区重要标签之一
  HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有
用的信息，以帮助正确和精确地显示网页内容。常用的HTTP-
EQUIV类型有： 
   
   
<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
  
  该META标签定义了HTML页面所使用的字符集为GB2132，就是

国标汉字码。
   
   
Content-Type的Content还可以是：text/xml等文档类型；
  Charset选项：ISO-8859-1(英文)、BIG5、UTF-8、

   
   

  
  
  
  

   
    <link> 标签链接到一个外部样式表。

  
  
  
  

   
   

  
  
  
  

   
   link rel="stylesheet" type="text/css" href="csstest1.css" >

  
  
  
  

   
   
   
   
rel: 属性用于定义连接的文件和HTML文档之间的关系
type: 是说明外链文档的的类型
href: 导入css文件的路径
备注:导入css文件 前面两个属性不需要改 就只需改 href 对应的CSS文件路径 <link>标签 一般都放在头部的<head>标签里
   
   

   
   
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

   
   
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
当特殊的样式需要应用到个别元素时，就可以使用内联样式。样式属性可以包含任何 CSS 属性。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
    
    
标签
描述
<style>
定义样式定义。
<link>
定义资源引用。
<div>
定义文档中的节或区域（块级）。
<span>
定义文档中的行内的小块或区域。
为了在 HTML 中显示小于号 (<)，我们需要使用字符实体。
   
   
字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。
要在 HTML 文档中显示小于号，我们需要这样写：&lt; 或者 &#60;
空格是 HTML 中最普通的字符实体。

   
   

    
    

     
     
显示结果
描述
实体名称
实体编号
 
空格
&nbsp;
&#160;
<
小于号
&lt;
&#60;
>
大于号
&gt;
&#62;
&
和号
&amp;
&#38;
"
引号
&quot;
&#34;
'
撇号 
&apos;
 (IE不支持)
&#39;
    
    
    
    

     
     
其他一些常用的字符实体
     
     
显示结果
描述
实体名称
实体编号
￠
分
&cent;
&#162;
£
镑
&pound;
&#163;
¥
日圆
&yen;
&#165;
§
节
&sect;
&#167;
©
版权
&copy;
&#169;
®
注册商标
&reg;
&#174;
×
乘号
&times;
&#215;
÷
除号
&divide;
&#247;
    
    
<meta http-equiv="Content-Language" content="zh-cn" />

   
   
这些叫网页元标记。
对于人来说，直接关注的网页内容，
对于搜索引擎来说，关注的就是这些标记。
meta告诉搜索引擎后面的信息时关于网页文件的一些信息，http-equiv，指代服务器相应类型，项目有。内容（content）-languane（语言）对应的值是zh-cn中文中国
charset是character set   的缩写。就是字符编码是gb2312。关于字符编码
 使用 base 标签使页面中的所有标签在新窗口中打开。<base target="_blank">
<p>
<a href="index.html" target="_blank">这个连接</a> 将在新窗口中加载，因为 target 属性被设置为 "_blank"。
</p>

元信息（meta-information）。Meta 意为“关于某方面的信息”。
可以这么说，元数据（meta-data）是关于数据的信息，而元信息是关于信息的信息。
根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：<base>, <link>, <meta>, <title>, <style> 和 <script>。
案例中，浏览器有两种选择：
     
     
显示文本，因为它在段落元素中。
隐藏文本，因为它在头元素中。
     
     
标签
描述
<head>
定义关于文档的信息。
<title>
定义文档标题。
<base>
定义页面中所有链接的基准
 URL。
<link>
定义资源引用。
<meta>
定义元信息。

     
     
<!DOCTYPE>
定义文档类型。此标签须位于
 html 标签之前。
<meta name="author"
content="W3CSchool.cn">
<p>本文档的 meta 属性标识了创作者和编辑软件。</p>
本文档的 meta 属性描述了该文档和它的关键词。


     
     
      
      重定向
     
     
     
     

      
      这个例子演示：在网址已经变更的情况下，将用户重定向到另外一个地址。<meta http-equiv="Refresh"
content="5;url=index.html">

     
     
refresh  刷新的意思    content  就是刷新的内容  参数   0 表示浏览这个网页的浏览器马上执行refresh 刷新， URL=/  就是刷新的新网页打开的位置，/  是指这个html网页的文件的根目录   ，一般来说就会打开这个目录上的index.html/php/asp 之类的网页。
meta 元素用来提供与浏览器或者搜索引擎相关的信息，比方说描述文档的内容等等。
name 和 content 属性的作用是描述页面的内容。

   
   
URL（统一资源定位器）的东西用于对万维网上的文档（或其他数据）进行寻址

   
   


   
   
scheme://host.domain:port/path/filename
Scheme 定义因特网服务的类型。最流行的类型是 http。
domain（域）定义因特网域名，比如：W3CSchool.cn。
host（主机）定义此域中的主机。如果被省略，缺省的支持 http 的主机是 www。
:port(端口)定义主机的端口号。端口号通常是被省略的。缺省的端口号是 80。
path（路径）定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录。
filename（文件名）定义文档的名称。缺省的文件名一般会是 default.asp 或者 index.html，或者依据 WEB 服务器设置的其他文件名。
编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。
    
    
Schemes
访问
file
本地
 PC 上的文件。
ftp
FTP
 服务器上的文件。
http
World
 Wide Web 服务器上的文件。
gopher
Gopher
 服务器上的文件。
news
Usenet
 新闻组。
telnet
Telnet
 连接。
WAIS
WAIS
 服务器上的文件。
向 HTML 添加脚本（Script），使其动态性和交互性更强。

   
   
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script> 

   
   


   
   
<script type="text/javascript">

   
   


   
   
可以使用 type 属性来指定脚本语言。
<html>
<head>
</head>
<body>

<script type="text/javascript">
document.write("Hello World!")
</script>

</body>
</html>
 <noscript> 标签。<noscript> 标签用于定义假如脚本没有执行时的替代文本。

   
   


   
   

    
    
标签
描述
<script>
定义脚本。
<noscript>
定义在脚本无法执行的情况下的替代文本。
<object>
定义嵌入的对象。
<param>
为对象定义
 run-time 设置(参数)。
<applet>
不赞成使用。请使用
 <属性是通用于每个标签的核心属性和语言属性（有个别例外）。object>。
属性是通用于每个标签的核心属性和语言属性（有个别例外）。
   
   
不提供下面的属性：base、head、html、meta、param、script、style 以及 title 元素

    
    
属性
值
描述
class
classname
规定元素的类名（classname）
id
id
规定元素的唯一
 id
style
style_definition
规定元素的行内样式（inline
 style）
title
text
规定元素的额外信息（可在工具提示中显示）
    
    

     
     
语言属性 (Language Attributes)
     
     
以下标签不提供下面的属性：base、br、frame、frameset、hr、iframe、param 以及 script 元素。
     
     
属性
值
描述
dir
ltr
 | rtl
设置元素中内容的文本方向。
lang
language_code
设置元素中内容的语言代码。语言代码参考
xml:lang
language_code
设置
 XHTML 文档中元素内容的语言代码。语言代码参考
    
    
    
    

     
     
键盘属性 (Keyboard Attributes)
     
     
属性
值
描述
accesskey
character
设置访问元素的键盘快捷键。
tabindex
number
设置元素的
 Tab 键控制次序。
    
    

使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
   
   
事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用，并用引号引起来。
   
   
<a> 标签中的一个特殊的 "mouse over"事件处理器 - 被称为 onmouseover 
   
   
<a href="/index.html" onmouseover="alert('Welcome');return false"></a>

   
   
仅在 body 和 frameset 元素中有效。
    
    
属性
值
描述
onload
脚本
当文档载入时执行脚本
onunload
脚本
当文档卸载时执行脚本
    
    

     
     
表单元素事件 (Form Element Events)
     
     
仅在表单元素中有效。
     
     
属性
值
描述
onchange
脚本
当元素改变时执行脚本
onsubmit
脚本
当表单被提交时执行脚本
onreset
脚本
当表单被重置时执行脚本
onselect
脚本
当元素被选取时执行脚本
onblur
脚本
当元素失去焦点时执行脚本
onfocus
脚本
当元素获得焦点时执行脚本
    
    
    
    

     
     
图像事件 (Image Events)
     
     
该属性可用于 img 元素：
     
     
属性
值
描述
onabort
脚本
当图像加载中断时执行脚本
    
    
    
    

     
     
键盘事件 (Keyboard Events)
     
     
在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。
     
     
属性
值
描述
onkeydown
脚本
当键盘被按下时执行脚本
onkeypress
脚本
当键盘被按下后又松开时执行脚本
onkeyup
脚本
当键盘被松开时执行脚本
    
    
    
    

     
     
鼠标事件 (Mouse Events)
     
     
在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。
     
     
属性
值
描述
onclick
脚本
当鼠标被单击时执行脚本
ondblclick
脚本
当鼠标被双击时执行脚本
onmousedown
脚本
当鼠标按钮被按下时执行脚本
onmousemove
脚本
当鼠标指针移动时执行脚本
onmouseout
脚本
当鼠标指针移出某元素时执行脚本
onmouseover
脚本
当鼠标指针悬停于某元素之上时执行脚本
onmouseup
脚本
当鼠标按钮被松开时执行脚本
    
    
在因特网上传送 URL 的话，只能使用 ASCII 字符集。
由于 URL 经常会包含 ASCII 字符集以外的字符，所以必须对 URL 进行转换。URL 编码所做的事情就是把 URL 转换为有效的 ASCII 格式。
在进行 URL 编码时，每一个非安全的 ASCII 字符会被替换为 "%hh" 格式，其中 hh 是两位十六进制数，它对应于该字符在 ISO-8859-1 字符集里的字符编码值。
URL 中不能含有空格，URL 编码通常会将空格替换为加号（+）。
第一步：个人 WEB 服务器（PWS），要将你的文件拷贝到 WEB 服务器。
PWS 可以将任何视窗计算机改造成 WEB 服务器。

   
   
Internet Information Server (IIS)

  
  

PWS 和 IIS 均包含 ASP，一种用于创建动态和交互性 WEB 应用程序的服务器端脚本标准。同时，IIS 也可以应用于 Windows NT 平台。

你需要将文件上传到一个公共的空间。

HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

CSS被用来同时控制多重网页的样式和布局。

通过使用 CSS，所有的格式化均可从 HTML 中剥离处来，并存储于一个独立的文件中。

CSS 给予你对布局的完全控制，同时不会弄乱文档内容。

body 元素的内容会显示在浏览器中。

title 元素的内容会显示在浏览器的标题栏中。

段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。

浏览器忽略了源代码中的排版（省略了多余的空格和换行）。

折行

本例演示在 HTML 文档中折行的使用。

请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

1. <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

2. 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
声明了文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Transitional//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。
HTML 4.01 规定的三种文档类型、XHTML 1.0 规定的三种 XML 文档类型都是：Strict、Transitional 以及 Frameset。
而这句<html xmlns="http://www.w3.org/TR/html4/loose.dtd">，是在文档中的<html> 标签中使用 xmlns 属性，以指定整个文档所使用的主要命名空间。

<h1 align="center">This is heading 1</h1>

<p>hr 标签定义水平线：</p>
<hr />

<body bgcolor="yellow">

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

pre 标签很适合显示计算机代码：

<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>


<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

<address>
Donald Duck<br />
BOX 555<br />
Disneyland<br />
USA<br />
</address>

<abbr title="etcetera">etc.</abbr>

acronym被定义为首字母缩写词，abbr定义一个缩写内容。

在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。

如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

 <del>二十</del> <ins>十二</ins> 

大多数浏览器会改写为删除文本和下划线文本。

<a href="index-4.html">本文本</a> 超链接

如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。

密码：
<input type="password" name="password">

学到如何使用 CSS 同时控制多重网页的样式和布局。

层叠样式表 (Cascading Style Sheets)

• 样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，

规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。

如果值为若干单词，则要给值加引号：

最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。

多重声明和空格的使用使得样式表更容易被编辑：

如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

用逗号将需要分组的选择器分开。

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。

冗余法则来处理旧式浏览器无法理解继承的问题。

创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

上下文选择器 (contextual selectors)派生选择器，

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

id 属性只能在每个 HTML 文档中出现一次。

在现代布局中，id 选择器常常用于建立派生选择器。

这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 <em></em> 或者 <span></span>，不过这样的用法是非法的，因为不可以在内联元素 <span> 中嵌入 <p> 

即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次

id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：

类选择器以一个点号显示：

.center {text-align: center}

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

和 id 一样，class 也可被用作派生选择器：

.fancy td {
	color: #f60;
	background: #666;
	}

元素也可以基于它们的类而被选择：

td.fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

<td class="fancy">

个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档

每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

不要在属性值与单位之间留有空格。

使用 <style> 标签在文档头部定义内部样式表

<style type="text/css">

在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。默认值是 transparent。transparent 有“透明”之意。

<p class="no2">这个段落设置了内边距。</p>

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}
为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

为了清晰地显示出段落和链接的背景图像，我们为它们设置了少许内边距。

<p class="flower">我是一个有花纹背景的段落。<a href="#" class="radio">我是一个有放射性背景的链接。</a></p>

向 textareas 和 select 等替换元素的背景应用图像，

background-image 也不能继承。事实上，所有背景属性都不能继承。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺，

在 body 元素中将一个背景图像居中放置：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

默认地，背景图像将从一个元素的左上角开始。

位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对象垂直方向。

如果只出现一个关键字，则认为另一个关键字是 center。

百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，

 background-position:66% 33%;

左上角向右 50 像素、向下 100 像素

通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed）

 background-attachment:fixed

CSS 背景实例

设置背景颜色

本例演示如何为元素设置背景颜色。

设置文本的背景颜色

本例颜色如何设置部分文本的背景颜色。

将图像设置为背景

本例演示如何将图像设置为背景。

将图像设置为背景 2

本例演示如何为多个元素同时设置背景图像。

如何重复背景图像

本例演示如何重复背景图像。

如何在垂直方向重复背景图像

本例演示如何垂直地重复背景图像。

如何在水平方向重复背景图像

本例演示如何水平地重复背景图像。

如何仅显示一次背景图像

本例演示如何仅显示一次背景图像。

如何放置背景图像

本例演示如何在页面上放置背景图像。

如何使用%来定位背景图像

本例演示如何使用百分比来在页面上定位背景图像。

如何使用像素来定位背景图像

本例演示如何使用像素来在页面上定位背景图像。

如何设置固定的背景图像

本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。

所有背景属性在一个声明之中

本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。

CSS 背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

span.highlight这个span标签 引用了一个highlight的css样式

a href="#"锚 URL - 指向页面中的锚(href="#top") 用于内部连接吧,叫锚定

如何在页面上放置背景图像。您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作

如何使用简写属性来将所有背景属性设置在一个声明之中。background: #ff0000 url(eg_bg_03.gif) no-repeat fixed center; 

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

p {text-indent: -5em;}

针对负缩进再设置一个外边距或一些内边距：

p {text-indent: -5em; padding-left: 5em;}

<div id="inner">some text. some text. some text.

因为这个段落继承了 id 为 inner 的 div 元素的缩进值。块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

justify

最后一个水平对齐属性是 justify。

在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。

要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

CSS 对“字”（word）的定义

word-spacing 属性可以改变字（单词）之间的标准间隔

最后，capitalize 只对每个单词的首字母大写。

p.uppercase

<p class="uppercase"

 text-decoration 属性，

underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，

在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：

a:link a:visited {text-decoration: underline overline;}

如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为text-decoration 值会替换而不是累积起来。

p {white-space: normal;}

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。

注释：当 white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符。

与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。

 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。

white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

direction 属性有两个值：ltr 和 rtl。

CSS 文本实例：

设置文本颜色

本例演示如何设置文本的颜色。

设置文本的背景颜色

本例颜色如何设置部分文本的背景颜色。

规定字符间距

本例演示如何增加或减少字符间距。

使用百分比设置行间距

本例演示如何使用百分比值来设置段落中的行间距。

使用像素值设置行间距

本例演示如何使用像素值来设置段落中的行间距。

使用数值来设置行间距

本例演示如何使用一个数值来设置段落中的行间距。

对齐文本

本例演示如何对齐文本。

修饰文本

本例演示如何向文本添加修饰。

缩进文本

本例演示如何缩进文本首行。

控制文本中的字母

本例演示如何控制文本中的字母。

在元素中禁止文本折行

本例演示如何禁止在元素中的文本折行。

增加单词间距

本例演示如何增加段落中单词间的距离。

CSS 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

设置字体系列 (font-family) 和字体加粗 (font-weight)，

因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。

果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。

这些字体按照优先顺序排列，然后用逗号进行连接：上面的例子中使用了单引号。只有当一个字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

CSS 字体实例：

设置文本的字体

本例演示如何设置文本字体。

设置字体尺寸

本例演示如何设置字体尺寸。

设置字体风格

本例演示如何设置字体风格。

设置字体的异体

本例演示如何设置字体的异体。

设置字体的粗细

本例演示如何设置字体的粗细。

所有字体属性在一个声明之内

本例演示如何使用简写属性将字体属性设置在一个声明之内。

CSS 字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

font-size: font-style:italic

font-variant: small-caps 针对英文字母的,意思是小型大写,大小跟小写字母一样,样式是大写。

p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}

在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

可以使用属性 list-style-type：

ul {list-style-type : square}

对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif)}

li {list-style : url(example.gif) square inside}

CSS 列表实例：

在无序列表中的不同类型的列表标记

本例演示在CSS中不同类型的列表项标记。

在有序列表中不同类型的列表项标记

本例演示在CSS中不同类型的列表项标记。

所有的列表样式类型

本例演示在CSS中所有不同类型的列表项标记。

将图像作为列表项标记

本例演示如何将图像作为列表项标记。

放置列表标记

本例演示在何处放置列表标记。

在一个声明中定义所有的列表属性

本例演示将所有针对列表的属性设置于一个简写属性。

CSS 列表属性(list)

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。
marker-offset

<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>


<body>
<ul class="disc">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}

list-style-image: url('eg_arrow.gif')

list-style-position: inside

table-layout: automatic

table-layout: fixed

border-collapse: separate;

border-collapse : separate(默认) | collapse | inherit

separate : 边框独立

效果图：

向左转 | 向右转

 

collapse : 相邻边被合并

效果图：

向左转 | 向右转

 

inherit:规定应当从父元素持续 border-collapse 属性的值。   

empty-cells: show

语法：
empty-cells : show | hide 
取值：
show  :  默认值。显示边框 
hide  :  隐藏边框 

说明：
设置或检索当表格的单元格无内容时，是否显示该单元格的边框。
只有当表格行和列的边框独立（例如当 border-collapse 属性等于 separate ）时此属性才起作用。
对应的脚本特性为 emptyCells 。 

border-spacing: 10px 50px

caption-side:bottom

如何定位表格的标题。

设置表格的布局

本例演示如何设置表格的布局。

显示表格中的空单元

本例演示是否显示表格中的空单元。（请在非 IE 浏览器中浏览）

合并表格边框

本例演示是否把表格边框显示为一条单独的边框，还是像标准的 HTML 中那样分开显示。

设置表格边框之间的空白

本例演示如何设置单元格边框之间的距离。（请在非 IE 浏览器中浏览）

设置表格标题的位置

本例演示如何定位表格的标题。（请在非 IE 浏览器中浏览）

CSS Table 属性

CSS 表格属性允许你设置表格的布局。（请注意，本节介绍的不是如何使用表来建立布局，而是要介绍 CSS 中表本身如何布局。）

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。（仅用于 "separated borders" 模型）
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。（仅用于 "separated borders" 模型）
table-layout	设置显示单元、行和列的算法。

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

border:red solid thin;

outline:#00ff00 dotted thick;

dashed:来自 dash(破折号),由 dash 组成的虚线

可能的值

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit	规定应该从父元素继承轮廓样式的设置。

border:red solid thin;
outline-style:solid;
outline-width:thin;

轮廓（Outline） 实例：

在元素周围画线

本例演示使用outline属性在元素周围画一条线。

设置轮廓的颜色

本例演示如何设置轮廓的颜色。

设置轮廓的样式

本例演示如何设置轮廓的样式。

设置轮廓的宽度

本例演示如何设置轮廓的宽度。

CSS 边框属性

"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。

属性	描述	CSS
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2

内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

DTD(Document Type Definition) 是一套关于标记符的语法规则

其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。

元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。

• element : 元素。
• padding : 内边距，也有资料将其翻译为填充。
• border : 边框。
• margin : 外边距，也有资料将其翻译为空白或空白边。

padding 属性接受长度值或百分比值，但不允许使用负值

还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

分别设置上、右、下、左内边距：

• padding-top
• padding-right
• padding-bottom
• padding-left

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

百分数值是相对于其父元素的 width 计算的，

如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

CSS 内边距实例：

所有内边距属性在一个声明中

本例演示使用简写属性将所有的内边距属性设置于一个声明中，可以有一到四个值。

设置下内边距 1

本例演示如何使用厘米值来设置单元格的下内边距。

设置下内边距 2

本例演示如何使用百分比值来设置单元格的下内边距。

设置左内边距 1

本例演示如何使用厘米值来设置单元格的左内边距。

设置左内边距 2

本例演示如何使用百分比值来设置单元格的左内边距。

设置右内边距 1

本例演示如何使用厘米值来设置单元格的右内边距。

设置右内边距 2

本例演示如何使用百分比值来设置单元格的右内边距。

设置上内边距 1

本例演示如何使用厘米值来设置单元格的上内边距。

设置上内边距 2

本例演示如何使用百分比值来设置单元格的上内边距。

td.test1 {padding: 1.5cm}

td.test2 {padding: 0.5cm 2.5cm}

所有内边距属性在一个声明中

本例演示使用简写属性将所有的内边距属性设置于一个声明中，可以有一到四个值。

设置下内边距 1

本例演示如何使用厘米值来设置单元格的下内边距。

设置下内边距 2

本例演示如何使用百分比值来设置单元格的下内边距。

CSS 内边距属性

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

宽度、样式，以及颜色。

元素的背景是内容、内边距和边框区的背景。样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

p.aside {border-style: solid dotted dashed double;}

上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

我们又看到了这里的值采用了 top-right-bottom-left 的顺序，

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

p {border-style: solid; border-left-style: none;}

注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

  border-width 属性 为边框指定宽度。

分别是 thin 、medium（默认值） 和 thick。

您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以简写为（这样写法称为值复制）：

p {border-style: solid; border-width: 15px 5px;}

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

p {border-style: none; border-width: 50px;}

尽管边框的宽度是 50px，但是边框样式设置为 none。

简单的 border-color 属性，它一次可以接受最多 4 个颜色值。

可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

如果颜色值小于 4 个，值复制就会起作用。

默认的边框颜色是元素本身的前景色

如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子：

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

a:hover {border-color: gray;} 悬停{边框颜色：灰色

CSS 边框实例：

所有边框属性在一个声明之中

本例演示用简写属性来将所有四个边框属性设置于同一声明中。

设置四边框样式

本例演示如何设置四边框样式。

设置每一边的不同边框

本例演示如何在元素的各边设置不同的边框。

所有边框宽度属性在一个声明之中

本例演示用简写属性来将所有边框宽度属性设置于同一声明中。

设置四个边框的颜色

本例演示如何设置四个边框的颜色。可以设置一到四个颜色。

所有下边框属性在一个声明中

本例演示用简写属性来将所有下边框属性设置在同一声明中。

设置下边框的颜色

本例演示如何设置下边框的颜色。

设置下边框的样式

本例演示如何设置下边框的样式。

设置下边框的宽度

本例演示如何设置下边框的宽度。

所有左边框属性在一个声明之中

所有左边框属性在一个声明之中

设置左边框的颜色

本例演示如何设置左边框的颜色。

设置左边框的样式

本例演示如何设置左边框的样式。

设置左边框的宽度

本例演示如何设置左边框的宽度。

所有右边框属性在一个声明之中

本例演示一个简写属性，用于把所有右边框属性设置在一条声明中。

设置右边框的颜色

本例演示如何设置右边框的颜色。

设置右边框的样式

本例演示如何设置右边框的样式。

设置右边框的宽度

本例演示如何设置右边框的宽度。

所有上边框属性在一个声明之中

本例演示用简写属性来将所有上边框属性设置于同一声明之中。

设置上边框的颜色

本例演示如何设置上边框的颜色。

设置上边框的样式

本例演示如何设置上边框的样式。

设置上边框的宽度

本例演示如何设置上边框的宽度。

CSS 边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。 p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } 不懂 Three-colored border!

border: medium double rgb(250,0,255) 用简写属性来将所有四个边框属性设置于同一声明中。

"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。

 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

是像素、英寸、毫米或 em。

margin 可以设置为 auto

百分数是相对于父元素的 width 计算的。

margin 的默认值是 0

• 如果缺少左外边距的值，则使用右外边距的值。
• 如果缺少下外边距的值，则使用上外边距的值。
• 如果缺少右外边距的值，则使用上外边距的值。

使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。

p {margin-left: 20px;}

您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

• margin-top
• margin-right
• margin-bottom
• margin-left

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

CSS 定位 (Positioning) 属性允许你对元素进行定位。

CSS1 中首次提出了浮动，浮动不完全是定位

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。

span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

使用 display 属性改变生成的框的类型。

即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

<div>
some text
<p>Some more text.</p>
</div>

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。相对定位、绝对定位和浮动。

使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

h2.pos_left   <h2 class="pos_left"> relative

h2.pos_abs

position:absolute;
left:100px;
top:150px

通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。

本例演示如何相对于浏览器窗口来对元素进行定位。

position:fixed;
left:5px;
top:5px;

如何使用固定值设置图像的上边缘。

img
{
position:absolute;
top:0px
}

div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>

overflow: hiddenoverflow: auto

clip:rect(0px 50px 200px 0px)

img 
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}

如何在文本中垂直排列图象。

img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}

<img class="top" border="0" src="eg_cute.gif" />

img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

默认的 z-index 是 0。Z-index -1 拥有更低的优先级。

实例

定位：相对定位

本例演示如何相对于一个元素的正常位置来对其定位。

定位：绝对定位

本例演示如何使用绝对值来对元素进行定位。

定位：固定定位

本例演示如何相对于浏览器窗口来对元素进行定位。

使用固定值设置图像的上边缘

本例演示如何使用固定值设置图像的上边缘。

使用百分比设置图像的上边缘

本例演示如何使用百分比值设置图像的上边缘。

使用像素值设置图像的底部边缘

本例演示如何使用像素值设置图像的底部边缘。

使用百分比设置图像的底部边缘

本例演示如何使用百分比值设置图像的底部边缘。

使用固定值设置图像的左边缘

本例演示如何使用固定值设置图像的左边缘。

使用百分比设置图像的左边缘

本例演示如何使用百分比值设置图像的左边缘。

使用固定值设置图像的右边缘

本例演示如何使用固定值设置图像的右边缘。

使用百分比设置图像的右边缘

本例演示如何使用百分比值设置图像的右边缘。

如何使用滚动条来显示元素内溢出的内容

本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。

如何隐藏溢出元素中溢出的内容

本例演示在元素中的内容太大以至于无法适应指定的区域时，如何设置 overflow 属性来隐藏其内容。

如何设置浏览器来自动地处理溢出

本例演示如何设置浏览器来自动地处理溢出。

设置元素的形状

本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。

垂直排列图象

本例演示如何在文本中垂直排列图象。

Z-index

Z-index可被用于将在一个元素放置于另一元素之后。

Z-index

上面的例子中的元素已经更改了Z-index。

CSS 定位属性

CSS 定位属性允许你对元素进行定位。

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位使元素的位置与文档流无关，因此不占据空间。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

最初的包含块可能是画布或 HTML 元素。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

在 CSS 中，我们通过 float 属性实现元素的浮动。创建浮动框可以使文本围绕图像：

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。

因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

.clear {
  clear: both;
  }

因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

.clear {
  clear: both;
  }

<div class="clear"></div>

另一种办法，那就是对容器 div 进行浮动：选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。 CSS 清理的工作原理和 clear 属性应用方法。CSS clear 属性。

img 
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}在下面的段落中，图像会浮动到右侧，并且添加了点状的边框。我们还为图像添加了边距，这样就可以把文本推离图像：上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px。

float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;

text-decoration:none;？？

padding:0.2em 0.6em;

最常见的 CSS 选择器是元素选择器。设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：文档的元素就是最基本的选择器。

html {color:black;}？？？？

元素选择器又称为类型选择器（type selector）。

CSS 元素选择器（类型选择器）可以设置 XML 文档中元素的样式。

通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

• group 3

请注意，group 3 中使用了“声明分组”。

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

既可以对选择器进行分组，也可以对声明分组。

对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

因为 background 对 color 来说不是一个合法值，而且由于只能为 color 指定一个关键字，所以用户代理会完全忽略这个 color 声明

在一个规则中结合选择器分组和声明分组

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

*.important {color:red;}

如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：

.important {color:red;}

选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

.important.urgent {background:silver;}

在某些方面，ID 选择器类似于类选择器，

ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。与类选择器一样，ID 选择器中可以忽略通配选择器。第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。ID 选择器会使用一次，而且仅一次。ID 属性不允许有以空格分隔的词列表。

在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。

这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：

<em id="mostImportant">paragraph</em>

<ul id="mostImportant">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

类选择器和 ID 选择器可能是区分大小写的。CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

<img src="eg_smile.gif" />

最大宽度max-width: 300px

p.small {line-height: 90%}
p.big {line-height: 200%}

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS 分类属性允许你规定如何以及在何处显示元素。

p {display: inline}
div {display: none}

本例中的样式表把段落元素设置为内联元素。

 

而 div 元素不会显示出来！

span
{
display: block
}

本例中的样式表把 span 元素设置为块级元素。两个 span 元素之间产生了一个换行行为。

属性	描述
clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

CSS 伪类用于向某些选择器添加特殊的效果。

如何向文档中的超链接添加不同的颜色。

CSS 伪类 (Pseudo-classes)实例：

超链接

本例演示如何向文档中的超链接添加不同的颜色。

超链接 2

本例演示如何向超链接添加其他样式。

超链接 - :focus 的使用

本例演示如何对超链接应用 :focus 伪类（无法在 IE 中工作）。

:first-child（首个子对象）

本例演示 :first-child 伪类的用法。

:lang（语言）

本例演示 :lang 伪类的用法。

<input type="submit" value="Submit" />

<form action="http://www.W3CSchool.cn/tiy/form_action.asp" method="get">

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：

q:lang(no)
{
quotes: "~" "~"
}

伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}

a:link {color: #FF0000}	/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

伪类可以与 CSS 类配合使用：

a.red : visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。

选择器匹配所有 <p> 元素中的第一个 <i> 元素：

p > i:first-child {
  font-weight:bold;
  } 

选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i {
  color:blue;
  } 

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

q:lang(no)
   {
   quotes: "~" "~"
   }

<p>文字<q lang="no">段落中的引用的文字</q>文字</p>

伪类	作用	IE	F	N	W3C
:active	将样式添加到被激活的元素	4	1	8	1
:focus	将样式添加到被选中的元素	-	-	-	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式	4	1	7	1
:link	将特殊的样式添加到未被访问过的链接	3	1	4	1
:visited	将特殊的样式添加到被访问过的链接	3	1	4	1
:first-child	将特殊的样式添加到元素的第一个子元素		1	7	2
:lang	允许创作者来定义指定的元素中使用的语言		1	8	2

CSS 伪元素用于将特殊的效果添加到某些选择器。

p:first-letter 
{
color: #ff0000;
font-size:xx-large
}

p:first-line 
{
color: #ff0000;
font-variant: small-caps
}

选择器 : 伪元素 { 属性: 值 }

选择器 . 类: 伪元素 { 属性: 值 }

提示：下面的属性可以被应用到 first-line 伪元素。

• font 属性
• color 属性
• background 属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

:first-letter 伪元素

first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式：

伪元素可以与 CSS 类配合使用：

p.article:first-letter {color: #FF0000}
<p class="article">文章中的一个段落。</p>

before 伪元素可用于在某个元素之前插入某些内容。

下面的样式会在标题之前播放音频：

h1:before
{
content: url(beep.wav)
}

CSS2 - :after 伪元素

after 伪类可用于在某个元素之后插入某些内容。

下面的样式会在标题之后播放音频：

h1:after
{
content: url(beep.wav)
}

伪元素	作用	IE	F	N	W3C
:first-letter	将特殊的样式添加到文本的首字母	5	1	8	1
:first-line	将特殊的样式添加到文本的首行	5	1	8	1
:before	在某元素之前插入某些内容		1.5	8	2
:after	在某元素之后插入某些内容		1.5	8	2

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

"voice-family" 属性被设计为针对听觉用户终端。

在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。

@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：

注释：媒介类型名称对大小写不敏感。

列出了在使用 CSS 时尽量避免使用的技术。

请使用 JavaScript 和 HTML DOM 取而代之。

创建样式表来同时控制多重页面的样式和布局。

CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。

如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。 CSS 实例 和 CSS 参考手册 。

JavaScript 可使你的站点动态性更强。

CSS 背景实例：

设置背景颜色

本例演示如何为元素设置背景颜色。

设置文本的背景颜色

本例颜色如何设置部分文本的背景颜色。

将图像设置为背景

本例演示如何将图像设置为背景。

如何重复背景图像

本例演示如何重复背景图像。

如何在垂直方向重复背景图像

本例演示如何垂直地重复背景图像。

如何在水平方向重复背景图像

本例演示如何水平地重复背景图像。

如何仅显示一次背景图像

本例演示如何仅显示一次背景图像。

如何放置背景图像

本例演示如何在页面上放置背景图像。

如何使用%来定位背景图像

本例演示如何使用百分比来在页面上定位背景图像。

如何使用像素来定位背景图像

本例演示如何使用像素来在页面上定位背景图像。

如何设置固定的背景图像

本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。

所有背景属性在一个声明之中

本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。

例子解释

CSS 文本实例：

设置文本颜色

本例演示如何设置文本的颜色。

设置文本的背景颜色

本例颜色如何设置部分文本的背景颜色。

规定字符间距

本例演示如何增加或减少字符间距。

使用百分比设置行间距

本例演示如何使用百分比值来设置段落中的行间距。

使用像素值设置行间距

本例演示如何使用像素值来设置段落中的行间距。

使用数值来设置行间距

本例演示如何使用一个数值来设置段落中的行间距。

对齐文本

本例演示如何对齐文本。

修饰文本

本例演示如何向文本添加修饰。

缩进文本

本例演示如何缩进文本首行。

控制文本中的字母

本例演示如何控制文本中的字母。

在元素中禁止文本折行

本例演示如何禁止在元素中的文本折行。

增加单词间距

本例演示如何增加段落中单词间的距离。

例子解释

CSS 字体(font)实例：

设置文本的字体

本例演示如何设置文本字体。

设置字体尺寸

本例演示如何设置字体尺寸。

设置字体风格

本例演示如何设置字体风格。

设置字体的异体

本例演示如何设置字体的异体。

设置字体的粗细

本例演示如何设置字体的粗细。

所有字体属性在一个声明之内

本例演示如何使用简写属性将字体属性设置在一个声明之内。

例子解释

CSS 边框(border)实例：

所有边框属性在一个声明之中

本例演示用简写属性来将所有四个边框属性设置于同一声明中。

设置四边框样式

本例演示如何设置四边框样式。

设置每一边的不同边框

本例演示如何在元素的各边设置不同的边框。

所有边框宽度属性在一个声明之中

本例演示用简写属性来将所有边框宽度属性设置于同一声明中。

设置四个边框的颜色

本例演示如何设置四个边框的颜色。可以设置一到四个颜色。

所有下边框属性在一个声明中

本例演示用简写属性来将所有下边框属性设置在同一声明中。

设置下边框的颜色

本例演示如何设置下边框的颜色。

设置下边框的样式

本例演示如何设置下边框的样式。

设置下边框的宽度

本例演示如何设置下边框的宽度。

所有左边框属性在一个声明之中

所有左边框属性在一个声明之中

设置左边框的颜色

本例演示如何设置左边框的颜色。

设置左边框的样式

本例演示如何设置左边框的样式。

设置左边框的宽度

本例演示如何设置左边框的宽度。

所有右边框属性在一个声明之中

本例演示一个简写属性，用于把所有右边框属性设置在一条声明中。

设置右边框的颜色

本例演示如何设置右边框的颜色。

设置右边框的样式

本例演示如何设置右边框的样式。

设置右边框的宽度

本例演示如何设置右边框的宽度。

所有上边框属性在一个声明之中

本例演示用简写属性来将所有上边框属性设置于同一声明之中。

设置上边框的颜色

本例演示如何设置上边框的颜色。

设置上边框的样式

本例演示如何设置上边框的样式。

设置上边框的宽度

本例演示如何设置上边框的宽度。

例子解释

CSS 外边距 (margin) 实例：

设置文本的左外边距

本例演示如何设置文本的左外边距。

设置文本的右外边距

本例演示如何设置文本的右外边距。

设置文本的上外边距

本例演示如何设置文本的上外边距。

设置文本的下外边距

本例演示如何设置文本的下外边距。

所有的外边距属性在一个声明中。

本例演示如何将所有的外边距属性设置于一个声明中。

例子解释

CSS 内边距 (padding) 实例：

所有填充属性在一个声明中

本例演示使用简写属性将所有的填充属性设置于一个声明中，可以有一到四个值。

设置下内边距 1

本例演示如何使用厘米值来设置单元格的下内边距。

设置下内边距 2

本例演示如何使用百分比值来设置单元格的下内边距。

设置左内边距 1

本例演示如何使用厘米值来设置单元格的左内边距。

设置左内边距 2

本例演示如何使用百分比值来设置单元格的左内边距。

设置右内边距 1

本例演示如何使用厘米值来设置单元格的右内边距。

设置右内边距 2

本例演示如何使用百分比值来设置单元格的右内边距。

设置上内边距 1

本例演示如何使用厘米值来设置单元格的上内边距。

设置上内边距 2

本例演示如何使用百分比值来设置单元格的上内边距。

例子解释

CSS 列表实例：

在无序列表中的不同类型的列表标记

本例演示在CSS中不同类型的列表项标记。

在有序列表中不同类型的列表项标记

本例演示在CSS中不同类型的列表项标记。

所有的列表样式类型

本例演示在CSS中所有不同类型的列表项标记。

将图像作为列表项标记

本例演示如何将图像作为列表项标记。

放置列表标记

本例演示在何处放置列表标记。

在一个声明中定义所有的列表属性

本例演示将所有针对列表的属性设置于一个简写属性。

例子解释

CSS 表格实例：

设置表格的布局

本例演示如何设置表格的布局。

显示表格中的空单元

本例演示是否显示表格中的空单元。（请在非 IE 浏览器中浏览）

合并表格边框

本例演示是否把表格边框显示为一条单独的边框，还是像标准的 HTML 中那样分开显示。

设置表格边框之间的空白

本例演示如何设置单元格边框之间的距离。（请在非 IE 浏览器中浏览）

设置表格标题的位置

本例演示如何定位表格的标题。（请在非 IE 浏览器中浏览）

例子解释

轮廓（Outlin） 实例：

在元素周围画线

本例演示使用outline属性在元素周围画一条线。

设置轮廓的颜色

本例演示如何设置轮廓的颜色。

设置轮廓的样式

本例演示如何设置轮廓的样式。

设置轮廓的宽度

本例演示如何设置轮廓的宽度。

CSS 尺寸 (Dimension) 实例：

使用像素值设置图像的高度

本例演示如何使用像素值设置元素的高度。

使用百分比设置图像的高度

本例演示如何使用百分比值来设置元素的高度。

使用像素值来设置元素的宽度

本例演示如何使用像素值来设置元素的宽度。

使用百分比来设置元素的宽度

本例演示如何使用百分比值来设置元素的宽度。

设置元素的最大高度

本例演示如何设置一个元素的最大高度。

使用像素值来设置元素的最大宽度

本例演示如何使用像素值来设置元素的最大高度。

使用百分比来设置元素的最大宽度

本例演示如何使用百分比值来设置元素的最大高度。

使用像素值来设置元素的最小高度

本例演示如何使用像素值来设置元素的最小高度。

使用像素值来设置元素的最小宽度

本例演示如何使用像素值来设置元素的最小宽度。

使用百分比来设置元素的最小宽度

本例演示如何使用百分比值来设置元素的最小宽度。

使用百分比设置行间距

本例演示如何使用百分比值来设置段落中的行间距。

使用像素值设置行间距

本例演示如何使用像素值来设置段落中的行间距。

使用数值来设置行间距

本例演示如何使用一个数值来设置段落中的行间距。

例子解释

CSS 分类 (Classification) 实例：

如何把元素显示为内联元素

本例演示如何把元素显示为内联元素。

如何把元素显示为块级元素

本例演示如何把元素显示为块级元素。

浮动属性的简单应用

使图像浮动于一个段落的右侧。

将带有边框和边界的图像浮动于段落的右侧

使图像浮动于段落的右侧。向图像添加边框和边界。

带标题的图像浮动于右侧

使带有标题的图像浮动于右侧

使段落的首字母浮动于左侧

使段落的首字母浮动于左侧，并向这个字母添加样式。

创建水平菜单

使用具有一栏超链接的浮动来创建水平菜单。

创建无表格的首页

使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。

定位：相对定位

本例演示如何相对于一个元素的正常位置来对其定位。

定位：绝对定位

本例演示如何使用绝对值来对元素进行定位。

定位：固定定位

本例演示如何相对于浏览器窗口来对元素进行定位。

如何使元素不可见

本例演示如何使元素不可见。你希望元素被显示出来，还是不呢？

把表格元素设置为 collapse（请在非 IE 的浏览器中查看）

本例演示如何使表格元素叠加？

改变光标

本例演示如何改变光标。

清除元素的侧面

本例演示如何使用清除元素侧面的浮动元素。

例子解释

CSS 定位 (Positioning) 实例：

定位：相对定位

本例演示如何相对于一个元素的正常位置来对其定位。

定位：绝对定位

本例演示如何使用绝对值来对元素进行定位。

定位：固定定位

本例演示如何相对于浏览器窗口来对元素进行定位。

设置元素的形状

本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。

如何使用滚动条来显示元素内溢出的内容

本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。

如何隐藏溢出元素中溢出的内容

本例演示在元素中的内容太大以至于无法适应指定的区域时，如何设置 overflow 属性来隐藏其内容。

如何设置浏览器来自动地处理溢出

本例演示如何设置浏览器来自动地处理溢出。

垂直排列图象

本例演示如何在文本中垂直排列图象。

Z-index

Z-index可被用于将在一个元素放置于另一元素之后。

Z-index

上面的例子中的元素已经更改了Z-index。

使用固定值设置图像的上边缘

本例演示如何使用固定值设置图像的上边缘。

使用百分比设置图像的上边缘

本例演示如何使用百分比值设置图像的上边缘。

使用像素值设置图像的底部边缘

本例演示如何使用像素值设置图像的底部边缘。

使用百分比设置图像的底部边缘

本例演示如何使用百分比值设置图像的底部边缘。

使用固定值设置图像的左边缘

本例演示如何使用固定值设置图像的左边缘。

使用百分比设置图像的左边缘

本例演示如何使用百分比值设置图像的左边缘。

使用固定值设置图像的右边缘

本例演示如何使用固定值设置图像的右边缘。

使用百分比设置图像的右边缘

本例演示如何使用百分比值设置图像的右边缘。

例子解释

CSS 伪类 (Pseudo-classes)实例：

超链接

本例演示如何向文档中的超链接添加不同的颜色。

超链接 2

本例演示如何向超链接添加其他样式。

超链接：:focus 的使用

本例演示如何使用 :focus 伪类（无法在 IE 中工作）。

:first-child（首个子对象）

本例演示 :first-child 伪类的用法。

:lang（语言）

本例演示 :lang 伪类的用法。

例子解释

CSS 伪元素 (Pseudo-elements)实例：

制作首字母特效

本例演示如何向文本的首字母添加特效。

制作首行特效

本例演示如何向文本的首行添加特效。

例子解释

CSS 属性组：

• 背景
• 文本
• 字体
• 边框和轮廓
• 外边距
• 内边距
• 列表
• 内容生成
• 尺寸
• 定位
• 打印
• 表格
• 伪类
• 伪元素

提示和注释：

属性：“属性” 列指向语法、实例、浏览器支持等内容。

CSS："CSS" 列指示属性是在哪个 CSS 版本中定义的（CSS1 还是 CSS2）。

提示：W3CSchool 的 CSS 参考手册定期在所有主流浏览器中进行测试。最后测试时间：2009 年 10 月 8 日。

CSS 背景属性（Background）

属性	描述	CSS
background	在一个声明中设置所有的背景属性。	1
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-position	设置背景图像的开始位置。	1
background-repeat	设置是否及如何重复背景图像。	1

CSS 边框属性（Border 和 Outline）

属性	描述	CSS
border	在一个声明中设置所有的边框属性。	1
border-bottom	在一个声明中设置所有的下边框属性。	1
border-bottom-color	设置下边框的颜色。	2
border-bottom-style	设置下边框的样式。	2
border-bottom-width	设置下边框的宽度。	1
border-color	设置四条边框的颜色。	1
border-left	在一个声明中设置所有的左边框属性。	1
border-left-color	设置左边框的颜色。	2
border-left-style	设置左边框的样式。	2
border-left-width	设置左边框的宽度。	1
border-right	在一个声明中设置所有的右边框属性。	1
border-right-color	设置右边框的颜色。	2
border-right-style	设置右边框的样式。	2
border-right-width	设置右边框的宽度。	1
border-style	设置四条边框的样式。	1
border-top	在一个声明中设置所有的上边框属性。	1
border-top-color	设置上边框的颜色。	2
border-top-style	设置上边框的样式。	2
border-top-width	设置上边框的宽度。	1
border-width	设置四条边框的宽度。	1
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2

CSS 文本属性（Text）

属性	描述	CSS
color	设置文本的颜色。	1
direction	规定文本的方向 / 书写方向。	2
letter-spacing	设置字符间距。	1
line-height	设置行高。	1
text-align	规定文本的水平对齐方式。	1
text-decoration	规定添加到文本的装饰效果。	1
text-indent	规定文本块首行的缩进。	1
text-shadow	规定添加到文本的阴影效果。	2
text-transform	控制文本的大小写。	1
unicode-bidi	设置文本方向。	2
white-space	规定如何处理元素中的空白。	1
word-spacing	设置单词间距。	1

CSS 字体属性（Font）

属性	描述	CSS
font	在一个声明中设置所有字体属性。	1
font-family	规定文本的字体系列。	1
font-size	规定文本的字体尺寸。	1
font-size-adjust	为元素规定 aspect 值。	2
font-stretch	收缩或拉伸当前的字体系列。	2
font-style	规定文本的字体样式。	1
font-variant	规定文本的字体样式。	1
font-weight	规定字体的粗细。	1

CSS 外边距属性（Margin）

属性	描述	CSS
margin	在一个声明中设置所有外边距属性。	1
margin-bottom	设置元素的下外边距。	1
margin-left	设置元素的左外边距。	1
margin-right	设置元素的右外边距。	1
margin-top	设置元素的上外边距。	1

CSS 内边距属性（Padding）

属性	描述	CSS
padding	在一个声明中设置所有内边距属性。	1
padding-bottom	设置元素的下内边距。	1
padding-left	设置元素的左内边距。	1
padding-right	设置元素的右内边距。	1
padding-top	设置元素的上内边距。	1

CSS 列表属性（List）

属性	描述	CSS
list-style	在一个声明中设置所有的列表属性。	1
list-style-image	将图象设置为列表项标记。	1
list-style-position	设置列表项标记的放置位置。	1
list-style-type	设置列表项标记的类型。	1
marker-offset		2

内容生成（Generated Content）

属性	描述	CSS
content	与 :before 以及 :after 伪元素配合使用，来插入生成内容。	2
counter-increment	递增或递减一个或多个计数器。	2
counter-reset	创建或重置一个或多个计数器。	2
quotes	设置嵌套引用的引号类型。	2

CSS 尺寸属性（Dimension）

属性	描述	CSS
height	设置元素高度。	1
max-height	设置元素的最大高度。	2
max-width	设置元素的最大宽度。	2
min-height	设置元素的最小高度。	2
min-width	设置元素的最小宽度。	2
width	设置元素的宽度。	1

CSS 定位属性（Positioning）

属性	描述	CSS
bottom	设置定位元素下外边距边界与其包含块下边界之间的偏移。	2
clear	规定元素的哪一侧不允许其他浮动元素。	1
clip	剪裁绝对定位元素。	2
cursor	规定要显示的光标的类型（形状）。	2
display	规定元素应该生成的框的类型。	1
float	规定框是否应该浮动。	1
left	设置定位元素左外边距边界与其包含块左边界之间的偏移。	2
overflow	规定当内容溢出元素框时发生的事情。	2
position	规定元素的定位类型。	2
right	设置定位元素右外边距边界与其包含块右边界之间的偏移。	2
top	设置定位元素的上外边距边界与其包含块上边界之间的偏移。	2
vertical-align	设置元素的垂直对齐方式。	1
visibility	规定元素是否可见。	2
z-index	设置元素的堆叠顺序。	2

CSS 打印属性（Print）

属性	描述	CSS
orphans	设置当元素内部发生分页时必须在页面底部保留的最少行数。	2
page-break-after	设置元素后的分页行为。	2
page-break-before	设置元素前的分页行为。	2
page-break-inside	设置元素内部的分页行为。	2
widows	设置当元素内部发生分页时必须在页面顶部保留的最少行数。	2

CSS 表格属性（Table）

属性	描述	CSS
border-collapse	规定是否合并表格边框。	2
border-spacing	规定相邻单元格边框之间的距离。	2
caption-side	规定表格标题的位置。	2
empty-cells	规定是否显示表格中的空单元格上的边框和背景。	2
table-layout	设置用于表格的布局算法。	2

CSS 伪类（Pseudo-classes）

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

CSS 伪元素（Pseudo elements）

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

屏幕阅读器（可读出屏幕上所有字符的一种程序）。

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如，如果某元素以 12pt 显示，那么 2em 是24pt。

在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。

一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)

颜色

单位	描述
(颜色名)	颜色名称 (比如 red)
rgb(x,x,x)	RGB 值 (比如 rgb(255,0,0))
rgb(x%, x%, x%)	RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb	十六进制数 (比如 #ff0000)

CSS命名规范（规则）

常用的CSS命名规则

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

注释的写法:

/* Header */
内容区
/* End Header */

id的命名:

1)页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center

(2)导航

导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3)功能

标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
 

注意事项::

1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。

 

CSS样式表文件命名

主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

一个div标签内运用id和class是可以的：

object.style.boxShadow=”20px 10px 7px #ccc”

Media属性用于设置同一样式表在不同屏幕下的样式，可以在属性值中指定应用此样式的介质或媒体。 

Margin: 0 auto属性是CSS的基础属性。虽然CSS语法并没有定义一个块元素居中的语句，但设计师仍然可以使用auto margin选项来实现这个功能。这个属性可以根据需要居中一个元素。但要注意，需要设计者给div设定宽度才会实现。 

Overflow：Hidden这个CSS属性除了隐藏溢出功能外，还有清除浮动的作用。 

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框

西瓜被赋予绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它(绝对定位对象会让出自己原先占用位置，所以说它是贡献的)。此时如果之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜还是挂在原来位置，至于西瓜要怎放，则以房间左上角(body左上角)为准，用left，right，top，bottom值来定位。

text-decoration:none; /*CSS下划线效果：无下划线*/ 

border-bottom: 1px #0099CC dotted /*CSS加一个只有下边的框 边框为虚线*/ 

<img height="200px" width="200px" …

.img {height:200px;width:200px;}

来控制，不同规格的图片有可能会变形。这是一种最蠢的方法。经过摸索，我找到一串CSS代码，可以让图片在超过规定的宽度时，自动缩小，并且是按比例缩小，不会造成图片变形。如下：

 

.img{ 

  max-width: 700px; 

  height:auto; 

  width:expression(this.width > 700 ? "700px" : this.width); 
弊端：增加客户端的负荷，一般用js实现的比较多。

float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

<div class="clear"></div>

清除浮动用的。
因为上面有div的float设置成了left或right，不清除浮动的话，父div高度就不会随内容而增加。

margin-right:-100; 

right 就是居右 

margin-right:10px; 意思就是距离右边10px 

图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。

图片容器的单位和图片大小单位不一致时，这样我们就没有办法能计算出图片与容器之间的margin是多少，

解决水平居中是相当的容易，如果图片左浮动并且"display:inline"时，我们只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。

给图片容器设置“dipslay:table-cell;vertical-align:middle”, 这种方法能顺利的让图片实现垂直居中

可以在图片的容器中创建一个空元素（比如说span），并且设置span的“display:inline-block;height:100%;vertical-align:middle”。

创建线盒中有一个细节需要注意，在IE6-7中空的line-block元素宽度为“0”，这样在IE6-7下是没有效果的，此时我们需要给span加上“width:1px”，此时会给水平居中造成1px的误差，

布局导航时经常会使用到一个方法，那就是使用<ul>列表来进行布局，而导航可以形容为多列式的布局，

clear:both;清除两侧浮动

认为DIV更适用于大体框架的定位

可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来.

background-attachment:设置或检索背景图像是随对象内容滚动还是固定的; 

* background-attachment: 决定背景图是否随页面滚动。

IE6 和 IE7 中，background 没把 border 计算在内。

background-color 也可被设置为透明（transparent），

background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。

关键词是不用解释的。x 轴上：

• * left
• * center
• * right

y 轴上:

• * top
• * center
• * bottom

scroll(滚动)，fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。

页面(page)和视口(view port)是如何协作地。视口(view port)是浏览器显示网页的部分(就是去掉工具栏的浏览器)。视口(view port)的位置固定，不变动。

background: <color> <image> <position> <attachment> <repeat>

它可以按照width、style和color的顺序简写：

1	border:5px solid #369;

fixed:固定border默认的宽度是3px，默认的色彩是black——黑色。border的缩写中border-style是必须的。

outline类似border，不同的是border会影响盒模型，而outline不会。

么图片的优先级要比list-style-type高