标签：
HTML
网站开发的主要原则是：
– 用标签元素HTML描述网页的内容结构；
– 用CSS描述网页的排版布局；
– 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序
HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，是最基础的网页语言 。
Html是通过标签来定义的语言，代码都是由标签所组成 。Html代码不用区分大小写 。
Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
标签：是由一对尖括号<>和标签名称组成。
标签分为“起始标签”和“结束标签”两种，二者的标签名称是相同的，只是结束标签多了一个斜杠“/”
在元素的起始标签中，可以包含“属性”来表示元素的其他特性
<标签名 属性名=‘属性值‘> 数据内容 </标签名>
<标签名 属性名=‘属性值‘ />
多个属性时：<hr size=“3” align=“left” width=”75%”>用空格分开
Html 的命名：文件的扩展名要以.html或.html结束。
Ø 文件名中只可由英文字母、数字或下划线组成。
Ø 文件名中不要包含特殊符号，比如空格、$等
所有标记都要用尖括号（<>）括起来，这样，浏览器就可以知道，尖括号内的标记是HTML命令。
任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是 、<br>。因此，不同的标记间用回车键换行再编写是个不错的习惯。
@ title元素：文件标题声明
@ link元素和style元素常用于CSS
@ script元素用于脚本
@ meta元素 元信息
@ <base> 超链接网址基准参考点
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv 属性：模拟HTTP协议的响应消息头。
@ body元素是html文件的主体元素，它包含所有要在网页上显示的各种元素 。
设置页面背景:bgcolor
设置背景图片:background
设计正文颜色:text
设置页面边距:topmargin、leftmargin、
rightmargin、bottomnargin
设置显示内容与浏览器的距离
添加空格——
<b> … </b> 粗.<i> … </i>斜 <s> … </s> 删<u> … </u> 下划<sub> … </sub> 下标 <sup> … </sup> 上标
.<address> … </address> 地址 自动倾斜
.<big> … </big> 大字
<strong> … </strong> 加强语气 ( 加粗
<em>...</em> 加强语气 ( 倾斜
|
© |
© |
段落缩进<blockquote>
设置水平线<hr>
向中对齐 <center>
格式： <center> … </center>
插入定义列表<dl>
<dl>
<dt>名称</dt>
<dd>说明</dd>
<dd>说明</dd>
<dd>说明</dd>
<dt>名称</dt>
<dd>说明</dd>
<dd>说明</dd>
<dd>说明</dd>
…
</dl>
插入无序列表<ul>
<ul>
<li>项目名称</li>…
<li>项目名称</li>…
<li>项目名称</li>…
…
<ul>
<ul>：符号标签（○●■）
type属性：disc ● ( 默认) circle ○ square ■
<ul type="circle">
插入有序列表<ol>
<ol>
<li>项目名称</li>…
<li>项目名称</li>…
<li>项目名称</li>…
…
</ol>
超链接概述
链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接来实现的，在HTML文件中，超链接的建立是很简单的，但是掌握超链接的原理对网页的制作是至关重要的。在学习超链接之前，需要先了解一下“URL”，所谓URL（Uniform Resource Locator）指统一资源定位符，通常包括三个部分：协议代码、主机地址、具体的文件名
超链接标签的使用
创建超链接的标签为<a>和</a>，使用格式如下：
<a href=“资源地址” target=“是否在新窗口显示” title=“指向链接时显示的文字”>
链接名称
</a>
|
_parent |
在上一级窗口中打开，一般使用分桢的框架页会经常使用 |
|
_blank |
在新窗口打开 |
|
_self |
在同一个框架或窗口中打开，该项一般不用设置 |
|
_top |
在浏览器的整个窗口中打开，忽略任何框架 |
链接路径
– 绝对路径：包含了标识Internet上的文件所需要的所有信息，包括完整的协议名称、主机名称、文件夹名称和文件名称。格式为：
通信协议://服务器地址:端口号/文件位置…/文件名
age：http://ww.sina.com.cn/web/index.html
相对路径：是以当前文件所在路径为起点，进行相对文件的查找。
链接到同一文档的某个部分
• 锚记标签用于使用户“跳”到文档的某个部分
• HTML 的 NAME 属性用于创建锚标记
<A NAME = “marker”>主题名称</A>
<A HREF= “#marker”>主题名称</A>
为达到这种跳转效果，请在 HREF 参数中使用该标记
B 发送E-mail：在html页面中，可以建立e-mail链接，当浏览者单击链接后，系统会启动默认的本地邮件服务系统发送邮件，格式为：
<a href=“mailto:e-mail地址?subject=邮件主题”>
描述文字
</a>
<a href=“mailto:zhangsan@126.com?subject=一个消息”>
联系我
</a>
LINK 颜色的设置
• 基本格式：<body link=”颜色” alink=”颜色” vlink=”颜色”>
• link 超链接尚被选中的文字
• alink 超链接点选但未被放开的颜色
• vlink 超链接已被点选过的颜色
插入并格式化图像
B <img>标签：用于在网页中插入图像内容。
– src属性：用于设置图像文件的相对或绝对URL地址。
– 共三种类型：GIF：是图形和图片的最佳格式，适用于透明或动画图形。
– JPG或JPEG：更适合存放照片
– PNG：拥有许多JPEG与GIF的共同优点，所以最近越来越流行。
通过设置width属性和height属性可以控制图像的显示宽度和高度，他们的长度单位可是百分比，也可是像素。
<a href="URL"><img src="URL"></a>
注意点:边框的问题.
可通过border=“0”去掉边框
属性名称 属性值 说明
Align left 图像靠左文字靠右
Right 图像靠右文字靠左
Top 文字往上靠
middle 文字靠中
bottom 文字靠下
空隙设置
Vspace 垂直上下两端和物件距离
Hspace 水平左右两端和物件距离
设置图像映射
图像地图：<map>
map标签要和img标签联合使用。
<img src=”URL” usemap=””></img>
<map name＝””>
<area shape=”” cords=” , , , ” href＝”URL”>
</map>
语法说明
<img>标记表示插入图像文件，src表示插入图像的路径；
Ø <map>标记表示插入图像映射；
Ø <area>标记表示图像映射区域；
Ø rhape属性表示映射区域形状：
— “rect”表示矩形区域；
— “circle”表示椭圆形区域；
— “poly”表示多边形区域；
Ø cords表示感应区域的坐标
创建表格
<BODY>
<TABLE BORDER = 2 >
<TR>
<TD>姓名</TD>
<TD>性别</TD>
<TD>分数</TD>
</TR>
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>分数</TH> <TH>表示行或列标题，粗体显示
</TR>
.......
</TABLE>
<TH align="center">性别</TH>居中
COLSPAN=“n” 属性表示跨多少列
ROWSPAN=“n” 属性表示跨多少行
表格的颜色设置：
表格的背景色 <TABLE bgcolor=颜色值>
行的背景色 <TR bgcolor=颜色值>
列的背景色 <TD bgcolor=颜色值>
表格的尺寸设置：
<TABLE width=n1 height=n2>
• frame常见属性
规定表格周围的哪一侧的边框是可见的。
• rules常见属性
规定水平或垂直的分界线。
注释：必须与 "border" 属性配合使用！
定义表格列的分组。通过此元素，您可以对列进行组合以便进行格式化。
<colgroup span="3" bgcolor=“red”></colgroup>
Span:表格的直列数，而不是第几列。
定义某个表格中针对一个或多个列的属性值。您只能在表格或 colgroup 中使用此属性。
<table>
<col></col> 代表第1列
<col span=“2” bgcolor=“red”></col> 代表第2，3 两列
<tr>….</tr>
单元格间距，边距
<table cellspacing=”” cellpadding=“”>
表格嵌套
在HTML文件中，第一个<table>标记表示插入第一表格，第二个<table>标记插入在标记<td></td>之间，表示在单元格中插入表格，也就是嵌套表格。
框架标签
框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的URL网页。
所有的框架标签要放在一个HTML文档中，HTML页面的文档体标签<body>被框架集标签<frameset>所取代，然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性。
B <frameset>标签
<frameset rows=“框架窗口高度,框架窗口高度，…”>
</frameset>
<html>
<head>
<title>框架的基本结构<title>
</head>
<frameset>
<frame>
<frame>
…
</frameset>
</html>
<frameset cols=“框架窗口宽度,框架窗口宽度，…”>
</frameset>
还可设置的属性包括：
frameborder：是否显示框架结构的边框线，取值为0、1或yes、no。取值为1或yes边框将会显示，取值为0或no边框将会隐藏。
framespacing：默认边框线的宽度为1，该属性可调整边框线的宽度。（以像素为单位）
bordercolor：可设置边框线颜色。
scrolling：设置框架是否显示滚动条。取值为yes、no或auto。yes表示滚动条一直显示；no表示无论什么情况都不显示滚动条；auto是系统的默认值，它是根据内容来调整的，当页面长度超过浏览器窗口的范围时就会自动显示滚动条。
B <noframes>标签
如果遇到不支持框架结构的浏览器，此时就需要用到该标签来设置替换的内容，并告诉浏览者其浏览器无法打开框架页面。
<a href=“right1.html” target=“mainFrame”>新闻中心</a>
使用iframe进行页面内的页面嵌套
可以定义嵌套页面的大小、位置等
用法：
<iframe name=“ifra1” scr=“abc.htm” border=“1”/>
可以通过name属性将链接的显示目标定位到
iframe框架内。
• <bgsound> 是用以插入背景音乐，但只适用於 IE，其参数设定不多。
如下 <bgsound src="your.mid" autostart=true loop=infinite>
• src="your.mid"
设定 midi 档案及路径，可以是相对或绝对
• autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。
• loop=infinite
是否自动反覆播放。LOOP=2 表示重复两次，Infinite 表示重复多次。
• <EMBED> 是用以插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支援。其参数设定多。如下
• <EMBED src="your.mid" autostart="true" loop="true" hidden="true">
• src="your.mid"
设定 midi 档案及路径，可以是相对或绝对
• autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。
• loop="true"
是否自动反覆播放。LOOP=2 表示重复两次，true 是， false 否。
• HIDDEN="true"
是否完全隐藏控制画面，true 为是，no 为否 (内定)。
• STARTTIME="分:秒"
设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。
• VOLUME="0-100"
设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。
• WIDTH="整数" 和 HIGH="整数"
设定控制画面的宽度和高度。(若 HIDDEN="no")
ALIGN="center"
设定控制画面和旁边文字的对 方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
controls="smallconsole"
设定控制画面的外貌。预设值是 console。
console 一般正常的面板
smallconsole 较小的面板
playbutton 只显示播放按钮
pausecutton 只显示暂停按钮
stopbutton 只显示停止按钮
volumelever 只显示音量调整钮
<Marquee>滚动的文字</Marquee>
• Direction=”滚动方向”left[左]right[右]up[上]down[下]
• Behavior=”滚动方式” scroll[一圈一圈绕着走] slide[只走一次] alternate[来回的走]
• Loop=”滚动的循环次数” 若未指定则循环不止(loop=”infinite”)
• Bgcolor=”背底颜色”Width=“宽度”Height=“高度”
• onMouseOver=”this.stop()”onMouserOut=”this.start()”
• Scrollamount=”速度” 数值越大速度越快
• Scrolldelay=“延时”（走一步，停一停）
表单Form
• <form action=处理表单信息的服务器端应用程序 method=处理表单数据的方法(POST/GET) name=表单名称 target=打开窗口的方式>
• 表单元素
• </form
文本框
• <input name=“文本框名称” type=“text” value=“初始值” size=“显示字符数” maxlength=“最多容纳字符数”>
– 密码框
• <input name=“文本框名称” type=“password” value=“初始值” size=“显示字符数” maxlength=“最多容纳字符数”>
– 多行文本框
• <textarea name=“多行文本框名称” cols=“每行中的字符数” rows=“显示的行数”>
• 初始内容
• </textarea>
单选框、复选框
– 单选框
• <input name=“单选框名称” type=“radio” value=“选择名称” checked(初始状态，如果为默认，则写checked；否则不写)>
– 复选框
• <input name=“复选框名称” type=“checkbox” value=“选择名称” checked(初始状态，如果为选中，则写checked；否则不写)>
列表框
(A)、菜单式
• <select name=“列表框名称”>
• <option selected(哪个为初始选择，就添加selected语句[只有一个]) value=“提交值”>列表1</option>
• <option value=“提交值”>列表2</option>
• <option value=“提交值”>列表3</option>
• ...
• </select>
• (B)、列表式
• <select name=“列表框名称” size=“显示的行数” multiple(如果允许多选，则有该命令；否则没有此命令)>
• <option selected(哪个为初始选择，就添加selected语句[可有多个，但没有意义]) value=“提交值”>列表1</option>
• <option value=“提交值”>列表2</option>
• <option value=“提交值”>列表3</option>
• ...
• </select>
下拉菜单
<B>谁是 2002 年世界杯冠军？</B>
<SELECT NAME =“myselect">
<OPTION SELECTED>西班牙</OPTION>
<OPTION>法国</OPTION>
<OPTION>巴西</OPTION>
<OPTION>德国</OPTION>
</SELECT>
按钮
• <input type=“按钮类型(reset、submit、button)” name=“按钮名称” value=“按钮显示文本”>
– 隐藏域
• <input name=“名称” type=“hidden” value=“提交值”>
– 浏览框
• <input name=“名称” type=“file” size=“显示字符长度” maxlength=“最大长度”>
BUTTON（按钮）
<INPUT name="button1" type="submit" value="提交">
<INPUT name="button2" type="reset" value="重置">
<INPUT name="button3" type="button" value="普通按钮">
|
Type 属性： |
|
|
submit： |
提交按钮 |
|
reset： |
重置按钮 |
|
button： |
普通按钮 |
文本框、按钮、单选按钮、复选框等都是输入元素。
<INPUT type=“?” name=“?” size=”?”
value=“?” maxlength=“?” checked=“?”>
Type 此属性指定元素的类型。元素类型可以有多种选择：TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN 和 BUTTON。默认选择为 TEXT。
Name 此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称 TEXT1、TEXT2 或选择的任何名称来标识它们。Name 属性的作用域是在 FORM 元素内。
Value 此属性是可选属性，它指定控件的初始值。但是，如果 TYPE 为 RADIO，则必须指定一个值。
Size 此属性指定控件的初始宽度。如果 TYPE 为 TEXT 或 PASSWORD，则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。
Maxlength 此属性用于指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。
Checked 此属性是 Boolean 属性，指定按钮是否是打开的。当输入类型为 RADIO 或 CHECKBOX 时，使用此属性。
F CSS的基本概念
• 掌握样式表的语法规则
• 样式表的分类：
– 行内样式表
– 内嵌样式表
– 外部样式表
• 掌握常用的样式
指定显示样式
<P style = "color:red;font-size:30px;font-family:隶书;">
F CSS基础
@ CSS是Cascading Style Sheet的缩写，翻译为“层叠样式表”，简称“样式表”。
@ 样式表的首要目的是为网页上的元素精确定位。其次，把网页上的内容结构和格式控制相分离。即html的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。
@ 优点：简化网页的格式代码，加快网页下载显示的速度，也减少了需要上传的代码数量，大大减轻了重复劳动的工作量。
|
属 性 |
CSS名称 |
说 明 |
|
颜色 |
color |
|
|
文本属性 |
font-size |
字体大小 |
|
font-family |
字体 |
|
|
text-align |
文本对齐 |
|
|
边框属性 (用于表 单元素) |
border-style |
边框样式 |
|
border-width |
边框宽度 |
|
|
border-color |
边框颜色 |
|
|
定位属性(position) |
top |
顶部边距（上边距） |
|
left |
左边距 |
|
|
width |
宽度 |
|
|
height |
高度 |
|
|
z-index |
z 轴索引号，用于层 |
F 使用CSS
@ CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。
@ 一系列的样式组成了“样式表”。
@ CSS的语法结构：
选择符{样式属性:取值;样式属性:取值;样式属性:取值;…}
CSS的基本语法
样式和样式表
1．样式
样式是由成对的属性名和属性值以冒号“：”相间组成。
2．样式表
一系列的“样式”以分号“；”相间组成为“样式表”。
根据样式代码的位置，分为三类：
q 行内样式
q 内嵌样式
q 外部样式
q 行内样式：HTML标签直接使用style属性，称为行内样式（Inline Style）。它适用于只需要简单地将一些样式应用于某个独立的元素的情况。
例如：<table style="color:red;margin-left:200px">
…
</table>
注意：在使用行内样式的过程中，建议同学们在<head>标签中添加<meta>标签，添加的<meta>标签如下：
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉.
@ 内嵌样式表：是在<head>标签内添加<style></style>标签对，在标签对内定义需要的样式。
例如，<head>
<style type=“text/css”>
td{font-size:9pt;color:red}
.font105{font-size:10.5pt;color:blue}
</style>
</head>
注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示
内嵌样式-2 选择器
选择器分为：
• HTML 选择器
• CLASS 类选择器
• ID 选择器
• 样式选择器
• HTML标签选择器：在HTML页面中使用的标签，如果在CSS中被定义，那么此网页的所有该标签都将按照CSS中定义的样式显示。
• 类选择器：使用HTML标签的class属性引入CSS中定义的样式规则的名字，称为类选择器，class属性指定的样式名字必须是以“.”开头。
• ID选择器：ID属性是用来定义某一特定的HTML元素，与class属性刚好相反，class属性是用来定义一组功能或格式相同的HTML元素。ID选择器定义的CSS名称必须以“#”开头，
• 通用选择器：是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可用元素。
• 伪类选择器：是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。
Id的优先级高于class
外部样式
@ 外联样式表:是将<style>标签内的样式语句定义在扩展名为.css的文件中。通过使用<link>标签引入样式文件。
例如，<head>
<link href="mystyle.css" rel="stylesheet" type=“text/css”>
</head>
优点：一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。
使用LINK（链接）标签 ，语法：
<HEAD>
<LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” >
</HEAD>
可以连接多个html应用到html里面
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常
需要混合使用：
• 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css
• 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式
• 某张网页内，部分内容”与众不同“，采用行内样式
对于某个HTML标签：
1）如果有多种样式，如果规定的样式没有冲突，则叠加；
2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；
CSS中的注释
样式规则的注释
样式规则是使用/*需要注释的内容*/进行注释的。即在需要注释的内容前使用“/*”标记开始注释，在内容的结尾使用“*/”结束。注释可以多行内容注释。其注释范围在“/*”与“*/”之间
常用的样式属性
• 1．文字
• 2．背景
• 3．边框线
• 4．高度和宽度
• 5．间距和边距
• 6．列表
• 7．位置和布局
指定“对象”来定义样式表的语法规则如下：
对象1, 对象2 …… { 样式表 }
下级对象
用于某一种元素中的下级元素，定义时两元素名之间用空格相间。
P em{color:blue;}
所以元素对象
*｛color：blue;
CSS文字与文本
设置字体——font-family
设置字号——font-size
设置字体样式——font-style
设置字体加粗——font-weight
设置字体变体——font-variant
组合设置字体属性——font
文本的精细排版
调整字符间距——letter-spacing
调整单词间距——word-spacing
添加文字修饰——text-decoration
设置文本排列方式——text-align
设置段落缩进——text-indent
调整行高——line-height
转换英文大小写——text-transform
颜色和背景
设置颜色——color
设置背景颜色——background-color
插入背景图片——background-image
插入背景附件——background-attachment
设置重复背景图片——background-repeat
设置背景图片位置——background-position
设置文本排列方式——text-align
• 语法说明
该语法中的4个属性值可以任意选择其中一个。其中，left代表左对齐方式；right代表右对齐方式；center代表居中对齐方式；justify代表两端对齐方式。
转换英文大小写——text-transform
插入背景图片——background-image
基本语法
background-image:url|none
URL指定要插入的背景图片路径或名称，路径可以为绝对路径也可以为相对路径。第6章有绝对路径和相对路径的详细内容讲解。图片的格式一般以GIF、JPG和PNG格式为主。
Ø none是一个默认值，表示没有背景图片
插入背景附件——background-attachment
基本语法
background-attachment:scroll|fixed
Ø scroll表示背景图片是随着滚动条的移动而移动。是浏览器的默认值。
Ø fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。
设置重复背景图片——background-repeat
基本语法
background-repeat:repeat|repeat-x|repeat-y|no-repeat
设置背景图片位置——background-position
• 基本语法
background-position：百分比|长度|关键字
利用百分比和长度设置图片位置时，都要指定两个值，并且这两个值要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是页面的上边。
Ø 关键字在水平方向的主要有left、center、right，表示居左、居中和居右。关键字在垂直方向的主要有top、center、bottom，表示顶端、居中和底端。其中水平方向和垂直方向的关键字可相互搭配使用。
Ø使用百分比和关键字对比说明background-position属性的属性值。
边框和边距
设计边框样式——border-style
调整边框宽度——border-width
设置边框颜色——border-color
设置边框属性——border
边距——margin-top /margin-bottom /margin-left/ margin-right/margin
填充——padding-top／padding- bottom /padding-left / padding- right /padding
设计边框样式——border-style
基本语法
border-style:样式取值
border-top-style:样式取值
border-bottom-style:样式取值
border-left-style:样式取值
border-right-style:样式取值
边框样式属性中border-style是一个复合属性，其他4个都是单个边框的样式属性，只能取一个值，而复合属性border-style可以同时取一到4个值。下面分别说明border-style属性的4个取值方法：
— 取一个值：四条边框均使用这一个值。e:s
— 取两个值：上下边框使用第一个值，左右边框使用第二个值，两个值一定要用空格隔开。
— 取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值，取值之间要用空格隔开。
— 取4个值：四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。
调整边框宽度——border-width
基本语法
border-width:关键字|长度
border-top-width:关键字|长度
border-bottom-width:关键字|长度
border-right-width:关键字|长度
border-left-width:关键字|长度
边框宽度属性基本语法中的关键字说明
Ø 长度包括长度值和长度单位，不可以使用负数。长度单位可以使用绝对单位也可使用相对单位，如px、pt、cm等。
Ø 基本语法中边框宽度属性border-width是一个复合属性，可以同时设置四条边框的宽度。具体使用方法和边框样式的复合属性border-style是一样的，可以参照上一节关于border-style的讲解
设置边框颜色——border-color
基本语法
border-color:颜色关键字|RGB值
border-top-color:颜色关键字|RGB值
border-bottom-color:颜色关键字|RGB值
border-left-color:颜色关键字|RGB值
border-right-color: 颜色关键字|RGB值
颜色关键字可使用常用的16个关键字
Ø RGB值使用十六进制的RGB值和RGB函数值都行。
Ø 在使用边框颜色复合属性border-color时，如果只设置1种颜色，则四条边框的颜色一样；设置2种颜色，则边框的上下为一个颜色，左右为另一个颜色；设置3种颜色，边框的颜色顺序为上、左右、下；设置4中颜色，边框的颜色顺序为上、右、下、左。
设置边框属性——border
基本语法
border:<边框宽度>||<边框样式>||<边框颜色>
border-top: <上边框宽度>||<上边框样式>||<上边框颜色>
border-right: <右边框宽度>||<右边框样式>||<右边框颜色>
border-bottom: <下边框宽度>||<下边框样式>||<下边框颜色>
border-left: <左边框宽度>||<左边框样式>||<左边框颜色>
基本语法中每一个属性都是一个复合属性，都可以同时设置边框的宽度、样式和颜色属性。但是在用该语法定义边框属性时，每个属性间必须用空格隔开。
Ø 这五个属性语法中，只有border可以同时设置四条边框的属性。其他的只能设置单边框的属性。
边距——margin-top /margin-bottom /margin-left/ margin-right/margin
• 基本语法
margin-top:长度|百分比|auto
margin-bottom: 长度|百分比|auto
margin-left: 长度|百分比|auto
margin-left: 长度|百分比|auto
margin: 长度|百分比|auto
长度包括长度值和长度单位，长度单位可以使用前面多次提到的绝对单位或相对单位。
Ø 百分比是相对于上级元素宽度的百分比，允许使用负数。
Ø auto为自动提取边距值，是默认值。
Ø margin复合属性和其他复合属性的设置方法是一样的，也可以取1到4个值来同时设置边框周围的四个边距。
填充——padding-top／padding- bottom /padding-left / padding- right /padding
基本语法
padding-top:长度|百分比
padding-bottom: 长度|百分比
padding-left: 长度|百分比
padding-right: 长度|百分比
padding: 长度|百分比
长度包括长度值和长度单位。
Ø 百分比是相对于上级元素宽度的百分比，不允许使用负数。
Ø 填充复合属性padding的取值方法，可以参照边框样式border-style的取值方法。
列表
设计列表样式——list-style-type
添加列表图像——list-style-image
调整列表位置——list-style-position
设计列表样式——list-style-type
基本语法
list-style-type:<属性值>
添加列表图像——list-style-image
基本语法
list-style-image:none|URL
none表示不使用图像符号。
Ø URL指定图像的名称或者路径。
调整列表位置——list-style-position
基本语法
list-style-position:outside|inside
outside表示列表符号不向内缩进，是列表的默认属性值。
Ø inside表示列表符号向内缩进
定位
定位方式——position
设置位置——top、bottom、right、left
浮动——float
清除——clear
定位方式——position
基本语法
position:static|absolute|relative
static表示为静态定位，是默认设置。
Ø absolute表示绝对定位，与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。
Ø relative表示相对定位，对象不可层叠，但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置
设置位置——top、bottom、right、left
• 基本语法
top:auto|长度值|百分比
bottom: auto|长度值|百分比
left: auto|长度值|百分比
right: auto|长度值|百分比
浮动——float
基本语法
float:left|right|none
Ø left表示浮动元素在左边，是居左对齐的。
Ø right表示浮动元素在右边，是居右对齐的。
Ø none表示不浮动，是默认值
清除——clear
基本语法
clear:left|right|both|none
清除——clear
语法说明
Ø left表示不允许在某元素的左边有浮动元素。
Ø right表示不允许在某元素的右边有浮动元素。
Ø both表示在某元素左右两边都不允许有浮动元素。
Ø none表示在某元素左右两边都允许有浮动元素
层的应用
图层的创建——<div>
创建嵌套图层
层的属性设置
图层的创建——<div>
基本语法
<body>
<div id="Layer1" style="position:absolute; left:29px; top:12px; width:165px; height:104px;"></div>
</body>
在进行层的定义时，需要将层的样式同时定义，否则在网页中不会显示出来。
创建嵌套图层
基本语法
<body>
<div id="Layer1" style="position:absolute; z-index:1; left:29px; top:12px; width:165px; height:104px;"></div>
<div id="Layer1" style="position:absolute; z-index:1; left:29px; top:12px; width:165px; height:104px;"></div>
</body>
图层的嵌套只要插入多个成对的<div></div>，设置好的层的样式属性就可以完成层的嵌套。
层的属性设置
•
•
• 图层定义常见属性
层的属性设置
基本语法
<body>
<div id="Layer1" style="position:absolute; left:29px; z-index:1; top:12px; width:165px; height:104px;"></div>
</body>
position属性将对象从文档流中拖出，进行绝对定位；
Ø left、top属性进行左边距和顶端间距的设置；
Ø width、height属性进行宽度和高度设置；
Ø 层叠通过z-index属性定义。
CSS层
设置层空间——z-index
设置层裁切——clip
设置层大小—度来—width、height
设置层溢出——overflow
设置层可见——visibility
设置层空间——z-index
基本语法
z-index:auto|数字
auto表示子层会按照父层的属性显示。
Ø 数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。
设置层裁切——clip
基本语法
clip:rect{<上>|<右>|<下>|<左>} |auto
auto表示不裁切。
Ø Ø rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左上角为参照点计算的。而且任意一个坐标值都可由auto来代替，表示该边不裁切。
设置层大小—width、height
• 基本语法
• width:auto|长度
• height:auto|长度
• width表示的是宽度，而height表示的是高度。
• Ø auto表示自动设置长度。
• Ø 长度包括长度值和单位。
• Ø 长度也可使用相对值中的百分比。
• 对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。
设置层溢出——overflow
基本语法
overflow: visible/hidden/scroll/auto
visible：扩大层的容纳范围，将所有内容都显示出来。
Ø hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。
Ø scroll：表示一直显示滚动条。
Ø auto：当层内容超出了层的容纳范围时，则显示滚动条。
设置层可见——visibility
基本语法
• visibility:visible|hidden|inherit
visible表示该层是可见的。
Ø Ø hidden表示该层被隐藏，是不可见的。
Ø inherit表示子层或子元素会继承父层或父元素的可见性，父级元素可见则子级元素也可见。
鼠标指针——cursor
基本语法
cursor:auto|关键字|URL（图像地址）
auto表示根据对象元素的内容自动选择鼠标指针形状。
Ø URL（图像地址）表示选取自定义的图像作为鼠标指针的形状。
Ø 关键字共有16种，是系统预先定义好的鼠标指针形状，具体说明和形状见表20-2
|
属 性 |
CSS名称 |
说 明 |
|
边界属性 |
margin-top |
设设置对象的上边距 |
|
m margin -right |
设设置对象的右边距 |
|
|
m margin -bottom |
设设置对象的下边距 |
|
|
m margin -left |
设设置对象的左边距 |
|
|
边框属性 |
bbborder-style |
设设置边框的样式 |
|
boborder-width |
设设置边框的宽度 |
|
|
boborder-color |
设设置边框的颜色 |
|
|
填充属性 |
papadding-top |
设设置内容与上边框之间的距离 |
|
papadding-right |
设设置内容与右边框之间的距离 |
|
|
papadding-bottom |
设设置内容与下边框之间的距离 |
|
|
papadding-left |
设设置内容与左边框之间的距离 |
伪类
• 伪类是一种特殊的类选择符，用来指定链接或者与其相关的选择符的状态；能被支持CSS的浏览器自动所识别的特殊选择符，
• 伪类与选择符间用冒号相连，在CSS中，伪类对文本或图像处于链接状态的修饰，故选择符大部分下是a标记，本章主要对a标记做实例讲解，其中伪类有四种常用形式是本章要讲解的，内容如下：
• “:link”用在为访问的链接上
• “:hover”用于鼠标光标置于其上的链接
• “:active”用于获得焦点（如“被单击”）的链接上
• “:visited”用在已经访问过的链接上
• 盒子在标准流中的定位原则
• 实验1——行内元素之间的水平margin
span.left{
margin-right:30px;
}
span.right{
margin-left:40px;
}
• 盒子在标准流中的定位原则
– 实验2——块级元素之间的竖直margin
<body>
<div style="margin-bottom:50px;">块元素1</div>
<div style="margin-top:30px;">块元素2</div>
</body>
CSS+Div 应用实例 布局
• 流体浮动布局
• 固定浮动布局
• 固定定位布局
标签：
原文地址：http://www.cnblogs.com/pengtao2016/p/5427286.html
