总结 html和css
HTML
1. 附加文件的额外信息
meta name="keywords" content="html,xhtml"
meta http-equiv="refresh" content="8; URL=https://www.wendangku.net/doc/9117327016.html,"
2.
address 用来说明作者的相关信息
3.
abbr 省略语句
asas
省略的内容写到title里
4.
acronym 首字母缩写
WWW
5.
em=i,strong=b;
asd
6.
一些特殊表示：
等宽字体表示：dfn(定义名称)kbd(键盘文字输入)
samp(范例输出)code(源代码输出)
斜体表示：Var(标识变量与自变量)cite(引证或引用)
7.
blockquote 引用区块（标签内容中，可包含单纯字符串，也可包含img元素，blockquote元素标签内容会自动进行足有缩进。）
q(简短的引用用q)
8.
特殊字符：
上标字（sup）(可将“标签内容”中的文字变更为上标字，就是将文字缩小并放置在右上角的位置，例如次方的数字)32就是3的2次方
下标字（sub）(可将“标签内容”中的文字变更为下标字，就是将文字缩小并放置在右下角的位置)，例如：氢氧化铝：AL(OH)2
9.
ins(加入编辑文字) del(删除编辑文字)
一般浏览器中被ins元素标签包括起来的文字下方会出现下划线。
一般浏览器中被del元素标签包括起来的文字会加上删除线(取消线)
都具有cite和datetime属性
例子：
10.
big(是用来将“标签内容”中的文字加以放大) s mall(是用来将“标签内容”中的文字加以缩小)
11.
tt 等宽字体（将文字设置成等宽字体）
12.
ul(将数据以列表的方式显示，数据无先后顺序，就是没编号，列表元素以li元素来罗列，li元素前默认有一个小圆点，项目符号由ul元素的type决定，一般浏览器都会使用缩进的方式呈现。!type circle[空心原点]/disc[默认实心圆]/square[实心方块]，推荐使用list-style-type取代type,自定义用!list-style-image,推荐使用li{backgroud:url() no-repeat;} )
ol(将数据以列表的方式显示，数据有先后顺序，就是有编号，列表元素以li元素来罗列，li元素前默认加上1，2，3...的顺序，编号样式由ul元素的type决定，一般浏览器都会使用缩进的方式呈现。属性同上，多了一个start(正整数/默认1))
13.
dl(定义列表)dt(定义项目)dd(定义说明)
14.
link(文件资源关联)
(
rel取值：stylesheet
rel不仅用于链接css，它还可以链接其他外部资源关系：
alternate 文档的替代版本（比如打印页、翻译或镜像）。
st
ylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表（解释）。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
shortcut icon 小图标
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。
)
15.
base(文件链接基准)，base元素是用来指定文件中所有链接相对URI的基准URI,若设置base元素，则文件中所有链接相对URI的基准就是文件所在的URI。
16.
bdo(改变文字显示方向)，bdo元素是利用UNicode双向算法根据字符序列的方向将文字的显示反转。
属性：dir(ltr/rtl)
例；LIUWEI
结果：IEWUIL
xx.
通用标签说明
1.p(p元素标签会在标签内容的前后加入一个空白行作为段落分隔，具有属性align)
2.br(br元素会产生分段效果，但不会在两段见加入空白行，具有属性clear none默/right/left/all)
3.pre(元素标签中若有特殊符号，就必须通过“文字参照”的方式书写，例如<,>,&，就写成"&It","gt","&anp";pre元素虽可将“标签内容”以原貌呈现出来，但“标签元素”中若有其他的标签，则浏览器仍会对这些元素标签进行处理。具有属性 width)
4.hr(在一般浏览器中，hr元素标签的效果是在页面中画出一条水平的分隔线，并在水平分隔线的前后会自动加入一空白行。具有属性：!align[left/center/right] !size[整数] color[颜色值] !noshade[空值/noshade] !width)
5.a{
(常用属性 href(url) name(字符串) target(_self[默认]，_blank[新窗口]，_top[最顶层框架，即跳脱框架]，_parent(父框架))
例子：
5.1 超链接...
5.2超链接加入补充说明...
5.3同文件阅读位置的跳转
...
.....................
.....
5.4不同文件阅读位置的跳转
...
.....................
ex.html
.....
5.5电子信箱的链接
5.6文件的下载
..
5.7打开方式
5.8 伪类
link:连接平常的状态
active:连接被按下的时候
visited:连接被访
问过之后
hover:鼠标放到连接上的时候
语法：
Selector : hover { sRules }
a:hover{bgcolor:green;color:red;
}
6.img{
6.1 src(uri)
6.2 alt(字符串)图片无法显示的替代文字。
6.3 longdesc(uri)图片说明的uri,较短用alt.
特有属性：
6.4 dynsrc(uri)此属性用于播放多媒体文件。
6.5 loop(正整数/infinite)属性值为多媒体文件重复播出次数，无限次用infinite.
6.6 start(fileopen/mouseover文件播放方式,fileopen当文件打开时，mouseover当鼠标指针移到多媒体文件上时
6.7 lowsrc(uri) 原始图片或多媒体文件下载速度较慢或下载过程出错时用来替代的图片uri
6.8 loopdelay(正整数[毫秒])表示两次播放时间间隔。
}
7.table{
table只是建立表格的基础元素，还需行(tr)和列(th、td),还可在标签内配置caption、col、colgroup、thead、tbody、tfoot。
7.1 summary(摘要)
7.2 width(表格宽度) border(边框宽度) cellspacing(单元格之间距离) cellpadding(单元格与单元格内容之间距离)
7.3 background(uri)背景 bordercolor边框颜色 bordercolordark(指定表格整体的暗面【表格右、下的框线】的颜色) bordercolorlight(指定表格整体的亮面【表格左、上的框线】的颜色)
7.4 thead、tfoot、tbody(目的是在未知表格内容较长时，可在每页的头尾都印出thead、tfoot的标签内容。此功能需浏览器有支持才行)
7.5 scope 属性 定义了行或列的表头
scope可以定义行或列的表头
取值
col - 定义列表头
row - 定义行表头
colgroup - 定义列组的表头信息,是column group的缩写
rowgroup - 定义行组的表头信息,是row group的缩写
7.6 td 表格数据单元格
rowspan 设置合并行
colspan 设置和并列
7.7 align(水平对齐方式) valign(垂直对齐方式)
7.8 caption(表格标题) th(表格标题单元格)【默认黑体、居中】
7.9 colgrounp(字段分组)位于caption之后，thead之前。 col(列属性设置)是colgrounp的子元素，
都具有属性span(整数)。
7.10 border-collapse:collapse.(边框重叠)
}
8.form{
8.1 HTML表单(Form)常用控件有：
8.11 input
8.111 input type="text" 单行文本输入框
8.112 input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
8.113 input type="checkbox" 复选框
I have a bike
I have a car
8.114 input type="radio" 单选框
8.115 8.116 file 文件选择字段
hidden 数据隐藏字段
8.117 reset按钮
定义重置按钮。重置按钮会清除表单中的所有数据。
8.118 定义图像形式的提交按钮，必须把 src 属性 和 alt 属性 与 结合使用。
8.119 button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
input控件属性 value(字段默认数据值checkbox、rado类型的字段不可省略次数性值，其他都可省略。用于button、subit、reset等字段类型指的是按钮标签显示文字，用于checkbox、raio类型的字段时，则为表单数据传送时被选定项目的数据值。)
input控件属性 size(正整数)指定输入字段的度，文字输入字段(text、password)为文字数宽度，其余字段类型为像素单位的宽度。
input控件属性 checked指定字段已是被选取状态，用于checkbox、radio字段，在HTML中属性为空值(只需加入属性名称)
8.120 label元素为INPUT标签定义标注(标记) ,属性for，对应input的id.
(
)
8.12 select 下拉框
8.121 (select属性
size 选择列表中显示数目
multiple 指定选择列表项目可多选
disabled 指定选择列表不可选
)
8.122 (select子元素option
option属性
label 用来设置比option元素内容优先现实的选单内容。
selected 指定选单项目自己是被选举状态。
value 表单数据传送时被传送到服务器的项目数据值.(IE里默认为空。火狐默认为option的值)
)
8.123 (select子元素optgroup选项的分组
optgroup是用来将option元素建立的选项分组，组名称用label属性设置。
)
8.13 textArea 多行文
本输入框
8.131 (
rows 多行文字输入字段的显示行数
cols 多行文字输入字段的显示列数
wrap
off： 不自动换行；
hard：自动硬回车换行，换行标记一同被传送到服务器中去(默认)；
soft：自动软回车换行，换行标记不会传送到服务器中去.
)
8.2表单控件(Form Controls)
Action
Method
先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= "text"就是一个表单控件，表示一个单行输入框。
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的https://www.wendangku.net/doc/9117327016.html,/asdocs/html_tutorials/yourname.asp。
至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。
8.3 overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
**fieldset legend
fieldset(是用来将表单字段或标签分组，fieldset内容中可包含legend元素，若包含legend，则legend一定要是fieldset内容中所包含的第一个元素)
legend(是用来为对象群组设立一个标签【群组标题】，每个ledend元素在fieldset标签内容中能用一次，属性align)
}
9. script noscript
9.1 script属性(
type:指定脚本的MIME类型，若脚本为JavaScript,则属性值为text/javascript;若脚本VBScript,则属性值为text/vbscript
language:指明脚本语言
src(uri)指定具有脚本内容的外部文件URI，指定此属性后，内部的脚本将被忽略。
charset设置src属性所指的外部文件的字符编码)
9.2 noscript是用来显示脚本程序无法运行时的替代内容
10. style
10.1 style属性
type:MIME类型 串接样式表text/css
media:指定输出的媒体，可能的属性值有：all所有的类型装置，aural
声音输出，braile打字机，handheld掌上电脑，print打印机，projection投影仪，screen屏幕，tty电传打字机，tv电视机，可以指定多个，yi"," 号分开
CSS
IE一直都不支持这个语法!important
【**** CSS声明原则****】
作用对象，元素 属性 属性值
p { font-size:10pt; }
属性名称与属性值之间必须以冒号隔开。
每一组属性设置以“；”分号做结尾。
属性名称与属性值则必须一组大括号“｛｝”包括起来
***1. 单一元素的复数属性设置间必须以分号“；”做区分；但元素只有单一属性，或是单一属性复数设置中的最后一组属性设置可忽略不加分号（；）；***
p {font-size:10pt;color:#FF0000 }
p {font-size:10pt }
***2.属性值直接指定其值，不需加上引号（单引号或者双引号）
** p { text-align:center;} 正确
** p { text-align:"center"; } 错误
***3.样式优先级可用关键字!important，不过IE一直都不支持这个语法!important***
***4.元素间可用,隔开进行复合声明；***
【 ****css的属性值****】
** 长度，单位数值
*相对：
4.1 em(相对于当前对象【元素标签内容】内的字体尺寸，若当前对象未指定，则相对于浏览器的默认字体尺寸 )
4.2 px (像素，是相对于显示器屏幕的分辨率而言的，win96/英寸，MAC72/英寸)
绝对：pt(点)*
**颜色**
*三种表示法：*
1.#rrggbb 十六进制数
2.#rgb 十六进制数
3.rgb(十进制数)
【 ***5.样式声明冲突时的优先级***】
直接作用在元素上的样式性质>style标签内的样式性质>链接进来的样式
***设置优先级***
设计者的设置>浏览者的用户自定义>浏览器的预先设置
【****6.CSS的选择器****】
css选择器编辑本段1.css选择器简介
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器HTML页面中的元素就是通过CSS选择器进行控制的。
6.1 类选择器
类选择器根据类名来选择，前面以”.”来标志，如：.demoDiv{ color:#FF0000; } 在HTML中，元素可以定义一个class的属性。如：
这个段落字体颜色为红色
最后，用浏览器浏览，我们可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。 上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那个一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。我们可以改成这样来定义。
这个 段落字体颜色为红色
6.2 标签选择器
一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签。采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里 都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：
p{ font-size:12px;
background:#900;
color:090; }复制代码则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易
6.3ID选择器
根据元素ID来选择元素。前面以”#”号来标志，在样式里面可以这样定义：
#demoDiv{ color:#FF0000;
} 这里代表id为demoDiv的元素的设置它的字体颜色为红色。我们在页面上定义一个元素把它的ID定义为demoDiv，如：
这个区域没有定义颜色
6.4 后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中：如：
黑色
用后代选择器可以更加精确的定位元素。
6.5 子选择器
请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择，我们看下面的代码：
Example Source Code CSS：
#links a {color:red;} #links > a {color:blue;}
HTML：
6.6 伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。
a:link{color:#999999;}
a:visited{color:#FFFF00;}
a:hover{color:#006600; }
/* IE不支持，用Firefox浏览可以看到效果 */ input:focus{background:# E0F1F5;} Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式.伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。
6.7 通用选择器
通用选择器用*来表示。例如：
*{font-size: 12px;}
表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。 例如：
p *{ …… }表示所有p元素后代的所有元素都应用这个样式。但是与后代选择器的搭配容易出现浏览器不能解析的情况，比如像这样子：
所有的文本都被定义成红色
所有这个段落里面的子标签都会被定义成蓝色
所有这个段落里面的子标签都会被定义成蓝色
所有这个段落里面的子标签都会被定义成蓝色 所有这个段落里面子标签都会被定义成蓝色 这个例子里面p标签里面嵌套了一个p标签，这个时候样式可能会出现与预期结果不相同的结果。
6.8 群组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
p, td, li {line-height:20px;color:#c00;} #main p,#sider spa{color:#000;line-height:26px; }
.www_52css_com,#main p span { color:#f60;}
.text1 h1,#sider h3,.art_title,h2 { font-weight:100; } 使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。
6.9 相邻同胞选择器
我们除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。看下面的代码： Example Source Code CSS
h1 + p {color:blue} HTML
一个非常专业的CSS站点
Div+CSS教程中,介绍了很多关于CSS网页布局的知识。
CSS布局实例中，有很多与CSS布局有关的案例。
6.10 属性选择器
您可以用判断html标签的某个属性是否存在的方法来定义css 例如：
abbr[title]{color:#FF0000; } 表示abbr标签是否有title属性，如果有则应用这个样式。也可以用判断html标签的某个属性值的方法来定义css 例如：
p[title='app']{color:#FF0000; } 这里所有p标签中，title属性为app的都会应用这个样式。
** 属性对应多值 **
下面例子为包含指定值的title属性的所有元素设置样式。使用于有空格分隔的属性值：
[title~=hello world]{color:red;}
面例子为包含指定值的lang属性的所有元素设置样式。使用于有连字符分隔的属性值：
[lang|=hello world]{color:red;}
6.11总结
css3定义中有更多的选择器类型，但由于各浏览器支持不一，所以不推荐使用，在此不详细叙述。
具体知识点
【1.文字样式】
1.1 font-family
有两种类型的字体系列名称：
指定的系列名称具体字体的名称比如："times"、"courier"、"arial"。
通常字体系列名称比如："serif"【无衬线字体（宋体、新宋体）】、"sansserif"【无衬线字体（楷体、vista中为黑体）】、"cursive"【草书字体】
、"fantasy"【装饰字体】、"monospace"【等宽字体】
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
1.2 font-style 属性最常用于规定斜体文本。
该属性有三个值：
normal - 文本正常显示
italic - 文字斜体且草书显示
oblique - 文字倾斜显示
1.3 font-variant【字体变形】 属性可以设定小型大写字母
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。就是原来文本的大写和小写都变大。
1.4 font-weight 属性设置文本的粗细。
可能的值
值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100
200
300
400
500 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
600
700
800
900
1.5 font-size 属性设置文本的大小。
可能的值
值 描述
xx-small
x-small
small
medium 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。
large
x-large
xx-large
默认值：medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
1.6 font 简写属性在一个声明中设置所有字体属性。
注释：此属性也有第六个值："line-height"，可设置行间距。
可以按顺序设置如下属性：
font-style
font-variant
font-weight
font-size/line-height
font-family
可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。line-height前面一定要加上【/】反斜线
【2.段落设置】
2.1 text-indent 首行缩进
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
可能的值
值 描述
length 定义固定的缩进。默认值：0。(常用单位em、px、pt)
% 定义基于父元素宽度的百分比的缩进。
2.2 text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
可能的值
值 描述
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
2.3 word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近.
2.4 letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量.
2.5 text-transform 属性处理文本的大小写。这个属性有 4 个值：none uppercase lowercase capitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改。
2.6 text-decoration加下划线 有 5 个值：none underline overline line-through blink
不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点。
2.7 white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
通过使用该属性，可以影响浏览
器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行
可能的值
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
*****************2.8 direction 属性规定文本的方向 / 书写方向。*************************
可能的值
值 描述
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
************** 对比 ：bdo(改变文字显示方向)，bdo元素是利用UNicode双向算法根据字符序列的方向将文字的显示反转。**********
属性：dir(ltr/rtl)
例；LIUWEI
结果：IEWUIL
【3.背景样式】
3.1 background-color 背景颜色，可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。
可能的值有：颜色值/transparent(透明无色)
**颜色**
*三种表示法：*
1.#rrggbb 十六进制数
2.#rgb 十六进制数
3.rgb(十进制数)
3.2 background-image 为元素设置背景图像默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
可能的值
值 描述
url('URL') 指向图像的路径。
none 默认值。不显示背景图像。
3.3 background-repeat
可能的值
值 描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
3.4 background-position 改变图像在背景中的位置
*****提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
可能的值
值 描述
top left 如果您仅规定了一个关键词，那么第二个值将是"center"
top center 默认值：0% 0%。
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y% 第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值，另一个值将是 50%。
xpos ypos 第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值，另一个值将是50%。
您可以混合使用 % 和 position 值。
3.5 background-attachment 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响.
可能的值
值 描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
【4.边界样式】
4.0 margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。margin 可以设置为 auto。更常见的做法是为外边距设置长度值。margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。
*********提示：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。
4.1 margin-top 属性设置元素的上外边距，margin-right 属性设置元素的右外边距，margin-bottom 属性设置元素的下外边距，margin-left 属性设置元素的左外边距。注释：允许使用负值。边界的颜色永远是透明的，无法另行指定颜色。
可能的值
值 描述
auto 浏览器设置的上外边距。
length 定义固定的上外边距。默认值是 0。
% 定义基于父对象总高度的百分比上外边距。
【5.框线样式】
5.0 border 元素外边距内就是元素的的边框。元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面：宽度、样式，以及颜色。CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。border-top、border-right、border-bottom、border-left。
5.1 border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。
可能的值
值 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
5.2 border-width 为边框指定宽度，为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
5.3 border-color 属性设置四条边框的颜色。要记住，边框的样式不能为 none 或 hidden，否则边框不会出现。
************注释：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
************注释：Internet Explorer 6（以及更早的版本）不支持属性值 "transparent"。
可能的值有：颜色值/transparent(透明无色)，Internet Explorer 6（以及更早的版本）不支持属性值 "transparent"。
**颜色**
*三种表示法：*
1.#rrggbb 十六进制数
2.#rgb 十六进制数
3.rgb(十进制数)
【6.边距样式】
6.0 padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。所谓边距是指边框与元素标签显示内容之间的位置距离，并不包含边框。边距永远是透明的，无法指明颜色，显示的结果是由color设置的，现实的背景图片是由background-image或background所设的。线内元素必须先设height或者width,或者设置position属性值为absolute才能设置padding属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边
padding-top
padding-right
padding-bottom
padding-left
********注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。【7.位置样式】
7.0 position(指定元素的位置和配置方式)
可能的值
static 默认
absolute 绝对定位
relation 相对定位
fixed 绝对配置且固定要素位置
7.1 CSS中absolute与relative
absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。
Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
总结：absolute绝对与浏览器的左上角(此时是最近的祖先元素没有定义为position,如最近的祖先元素有定义，则采用绝对与最近的祖先元素，具体见https://www.wendangku.net/doc/9117327016.html,/share/detail/11121011);无TRBL，绝对与父级的做标原始点为原始点.此时元素仍有padding和border属性。
Relative相对定位于父级的原始点为原始，无父级则以BODY的原始点为原始点，此时元素仍有padding、border和margin属性.
7.2 top right bottom left
当元素为相对配置时，属性可指定元素到父元素的距离。
当元素为绝对配置时，如最近的祖先元素有定义position，则采用绝对与最近的祖先元素，如无则采用绝对于浏览器。
当元素fixed时，采用绝对配置，并位置固定。
7.3 float(指定图文串的配置)线内元素必须先设置width属性才能使用float。
*****已有绝对或相对配置位置的元素不可用此属性
可能值：left、right、none
7.4 clear解除图文串配置
可能值：left、roght、none、both
7.5 overflow(超出显示范围的内容处理)
可能的值：Visible(显示全部内容)、hidden(隐藏超出显示范围的内容)、scroll(出现滚动条来滚动内容)、auto(以浏览器种类自动处理)
7.6 Z-index(设置堆叠顺序)
可能的值：1.整数值（数值越大，叠在越上面） 2.auto(堆叠顺序与父元素相同)
z-index属性是用来设置已进行相对配置与绝对配置的元素堆叠顺序
7.7 clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
*******说明
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
唯一合法的形状值是：cilp:rect (top, right, bottom,left)
7.8 display(指定元素显示的形式)
可能的值：
值 描述
none 此元素不会被显示
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
list-item 与项目元素(li)相同的显示形式，可加入项目符号
总结：display属性是用来指定元素的显示方式。当属性设置为none时，元素不仅仅是隐藏，也等同于取消而不存在。display会改变元素的特质，例如，表格是一个区块元素，无法与文字并列在一起，但当设置表格的display为inline属性时,表格就变成了一个线内元素可以与文字并列在一起
7.9 unicode-bidi(指定文字的读写方向)
可能的值 ：
normal 不改变文字的读写防线，直接显示
embed 加入新的文字读写与方向
bide-ovrride 取消与Unicode有关的文字读写方向指示
unicode属性是用来指定文字的读写方向，当属性值设为embed或bidi-override时，文字的显示方向将由direction属性决定
7.10 Vertical-align(指定垂直对齐的位置)该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 可能的值：值 描述
baseline 默认。元素放置在父元素的基线上
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
7.11 Visibility(显示与隐藏)
可能的值：
visible 显示元素
hidden 隐藏元素
collapse 折叠线框，仅适用于表格相关元素
【8.长度样式】
8.1 line-height(指定行高)
line-height属性可指定行高，用于线内元素等于指定线内文字区块的高度而非文字本身的高度，若区块含有高度大于指定行高的对象，则行高会自动增加成为该对象的高度。
8.2 width(指定宽度)
width属性可指定元素区块的宽度(左框线至右线框的距离)，适用thead、tfoot、tbody、tbody、th、线内元素以外的全部元素；当置换元素(img、input、object、select、textarea)的width属性值为auto时，则宽度维持与原来相同
8.3 height(指定高度)
height属性可指定元素区块的高度(上框线到下框线的距离)，适用col、colgroup、线内元素以外的全体元素；当置换元素(img、input、object、select、textarea)的height属性值为auto时，则高度维持与原来相同
8.4 max-height可指定元素区块的最大高度(上框线到下框线的距离)、min-height可指定元素区块的最小高度(上框线到下框线的距离)、max-width可指定元素区块的最大宽度(左框线到右框线的距离)、min-width可指定元素区块的最小高度(左框线到右框线的距离)
【9.项目样式】
9.0 list-style 简写属性在一个声明中设置所有的列表属性。该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
总结：list-style属性除了ul、ol、li元素适用外，display属性值为list-item的元素也适用。list-style-image的属性优先级高于list-style-type属性，list-style-image未设置的话，list-style-type属性的设置才会生效
可以按顺序设置如下属性：
list-style-type
list-style-position
list-style-image
9.1 list-style-type
值 描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
cjk-ideographic 中文数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
9.2 list-style-position 用来指定项目元素的项目符号(图片)的排列位置
值 描述
inside 项目符号显示在区块内容中，与区块内容向左对齐
outside 项目符号显示在区块内容外，不与区块内容对齐
9.3 list-style-image 属性用来指定项目元素的项目符号图片(用图片来替代文字)
【10.表格样式】
10.1 table-layout(表格显示的设置)值 描述
auto 默认，列宽度由单元格内容设定。当表格内容全部读取完毕后才会开始显示。
fixed 列宽由表格宽度和列宽度设定。表格内容第一行读取后就开始显示，表格的宽度、边框宽度、单元 格间距、列宽都已固定与表格内容无关。这种显示方式必须先指定表格的整体宽度或单元格宽度， 在表格宽度固定的情况下，由指定宽度的单元格依其宽度设置显示，未指定宽度的单元格宽度由表 格剩余的宽度平均分配
10.2 border-collapse(单元格框线显示的设置)(使用元素table)属性用来指定单元格框线的显示方式
值 描述
collapse 折叠单元格框线，会忽略 border-spacing 和 empty-cells 属性。
separate 默认值，单元格框线独立，不会忽略 border-spacing 和 empty-cells 属性。
!*10.3 border-spacing(指定单元格间距)(Firefox支持此属性，IE8[或以上版本支持此属性])
可能的值
值 描述
length length 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。
如果定义一个 length 参数，那么定义的是水平和垂直间距。
如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
!*10.4 caption-side(指定表格标题的位置)(Firefox支持此属性，IE8[或以上版本支持此属性])
可能的值 描述
top 标题显示在表格的上方
right 标题显示在表格的右方
bottom 标题显示在表格的下方
left 标题显示在表格的左方
10.5 cursor属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。