Html
1 html基本标签
1.1 html文件结构
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
</head>
<body>
</body>
</html>
1.1.1 DOCTYPE
定义和使用方法
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML标签。它是指示web浏览器关于页面使用哪个 HTML版本号进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，由于 HTML 4.01 基于 SGML。
DTD 规定了标记语言的规则，这样浏览器才干正确地呈现内容。
(Standard Generalized Markup Language(SGML即标准通用置标语言))
提示：请始终向HTML文档加入 <!DOCTYPE>声明。这样浏览器才干获知文档类型。
HTML 元素和文档类型（Doctype）
|
Strict 严格型 |
Transitional过渡类型 |
Frameset 框架 |
|
|
HTML 4.01 |
该 DTD 包括全部 HTML 元素和属性，但不包括展示性的和弃用的元素（比方 font）。不同意框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
该 DTD 包括全部 HTML 元素和属性。包括展示性的和弃用的元素（比方 font）。不同意框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
该 DTD 等同于 HTML 4.01 Transitional，但同意框架集内容。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
|
XHTML 1.0 |
该 DTD 包括全部 HTML 元素和属性，但不包括展示性的和弃用的元素（比方 font）。 不同意框架集（Framesets）。必须以格式正确的 XML 来编写标记。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
该 DTD 包括全部 HTML 元素和属性，包括展示性的和弃用的元素（比方 font）。不同意框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
该 DTD 等同于 XHTML 1.0 Transitional，但同意框架集内容。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
HTML 5
<!DOCTYPE html>
请參阅这个 HTML 元素表。当中列出了每种元素会出如今哪个文档类型中。
提示和凝视
凝视：<!DOCTYPE> 声明没有结束标签。
提示：<!DOCTYPE> 声明对大写和小写不敏感。
提示：请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！
XHTML 1.1
该 DTD 等同于 XHTML 1.0 Strict，但同意加入模型（比如提供对东亚语系的 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML1.0是HTML4.0的又一次组织,算是HTML4.01的修正版,发行命名为XHTML1.0。
1.全部卷标元素名称都使用小写
2.全部没有成对的空标签必须以 />结尾，<br /> <hr />
3.不同意使用target="_blank"(但XHTML1.0是不被同意的,你能够改写为 target="new)
4.全部属性都必须有值 XHTML1.0规定全部属性都必须有值,若没有就必须反复属性作为值
5.把全部<和&特殊符号用编码表示
6.同一个id选择器不可反复使用
7.绝对不可省略双引號或单引號
8.标签必须是一对
9.图片卷标加上文字说明alt="说明"
10.正确的卷标顺序
11. XHTML 1.0文件类别宣告的正确写法 (不可小写)
W3C标准測试网址 http://validator.w3.org/
网页自己主动測试网址 http://validator.w3.org/check?uri=referer
測试时一定要有「16.文件类别宣告」还有指定文件编码
<meta http-equiv="Content-Type"content="text/html; charset=big5" />
1.1.2 meta
<meta> 元素可提供有关页面的元信息（meta-information）。比方针对搜索引擎和更新频度的描写叙述和关键词。
<meta> 标签位于文档的头部。不包括不论什么内容。
<meta> 标签的属性定义了与文档相关联的名称/值对。
提示和凝视：
凝视：<meta> 标签永远位于 head 元素内部。
凝视：元数据总是以名称/值的形式被成对传递的。
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
|
属性 |
值 |
描写叙述 |
|
http-equiv |
content-type expires refresh set-cookie |
把 content 属性关联到 HTTP 头部。 content 属性关联到一个名称。 |
|
name |
author description keywords generator revised others |
content 属性关联到一个名称。 |
1.1.3 xmlns
xmlns是xml namespace的缩写。也就是XML命名空间，xmlns属性能够在文档中定义一个或多个可供选择的命名空间。该属性能够放置在文档内不论什么元素的開始标签中。该属性的值类似于URL。它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的全部内容。
为什么须要这个xmlns呢，可能是这种。比方在xhtml中，同意你使用各个不同的DTD文件，有可能不同的DTD文件里包括了同样的标识，那么这种话就会出现标志冲突的问题，假设使用xmlns的话就能够差别开在不同文件里的同样的标志。比如在a.dtd中和b.dtd中都包括了table，可是假设一个xhtml文件同一时候包括了这两个dtd文件。并且使用了标志table，这样就会出现标志冲突问题。为了解决标志冲突问题。就能够使用xmlns例如以下：
<htmlxmlns:a="http://www.a.com">
<htmlxmlns:b="http://www.b.com">
<a:table...>
<b:table...>
这样就能够区分开了使用的是哪个dtd文件里的标志。
还有个问题，依据定义：用来标识命名空间的网络地址并不被XML解析器调用，XML解析器不须要从这个网络地址中查找信息，该网络地址的作用不过给命名空间一个唯一的名字，因此这个网络地址也能够是虚拟的。那么对于浏览器来说，怎样知道a:table...应该是哪个dtd文件里的标志呢？应该是在每一个xml的dtd文件里都会规定xmlns这个值，假设dtd文件里的xmlns的值与xhtml中的值相等，则觉得是匹配的。
1.1.4 html
根节点
1.1.5 head
头节点
1.1.6 body
网页的主题部分
1.2 块级标签
: 指可以独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔.
1.2.1 h1~~h6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
1.2.2 p
<p></p>
1.2.3 hr
<hr/>
1.2.4 ol li
1.2.5 ul li
1.2.6 dl dt dd
<table width="200"border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<form action="form_action.asp"method="get">
<p>First name: <inputtype="text" name="fname" /></p>
<p>Last name: <inputtype="text" name="lname" /></p>
<input type="submit"value="Submit" />
</form>
|
属性 |
值 |
描写叙述 |
|
action |
url |
规定当提交表单时向何处发送表单数据。 |
|
enctype (EncodeType ) |
•application/x-www-form-urlencoded •multipart/form-data •text/plain |
规定在发送表单数据之前怎样对其进行编码 |
|
method |
get/post |
提交方式 |
|
name |
表单名称 |
|
|
target |
_blank _self _parent |
规定在何处打开 action URL。 |
|
值 |
描写叙述 |
|
application/x-www-form-urlencoded |
在发送前编码全部字符（默认） |
|
multipart/form-data |
不正确字符编码。 在使用包括文件上传控件的表单时，必须使用该值。 |
|
text/plain |
不正确特殊字符编码。 |
|
属性 |
GET方法 |
POST方法 |
|
历史： |
通常使用GET方法发送的数据作为URL的一部分将会被浏览器保存起来 |
使用POST方法提交的数据则不会作为URL的一部分。当然不会浏览器保存。 |
|
书签： |
GET方法可能被浏览器当作书签(bookmark)保存 |
POST方法则不会 |
|
回退与又一次提交： |
使用GET方法的页面能够被回退并又一次运行而不通知用户 |
POST方法会通知用户再次提交 |
|
Form编码类型： |
GET提交数据仅仅支持 |
POST支持application/x-www-form-urlencoded与multipart/form-data |
|
|
|
|
|
|
application/x-www-form-urlencoded |
|
|
參数： |
由于GET的參数一般都跟在URL后面。支持的数据大小一般在2K。有些server能够支持到64K。这个就是非常多网页超过64K就挂掉的真实原因。 由于server限制了。 |
发送參数。还能够是文件，大小在理论上没有限制。 |
|
被攻击： |
GET方法提交数据非常easy被黑客攻击，实施脚本绑架。 |
POST方法相对GET方法不是那么easy被黑客攻击 |
|
数据类型限制： |
GET方法提交数据仅仅能是文本数据 |
POST方法则不受限制。二进制文件也能够。 |
|
安全性： |
GET方法的安全性比POST方法要低一些，原因是数据做为URL的一部分是可见的。并且被浏览器存在历史訪问记录中。 |
POST方法的安全性相对GET要高一些。 由于參数数据不能被浏览器作为URL的一部分而存入历史訪问记录中。 |
|
表单数据长度： |
因为表单数据做为URL的一部分而URL长度一般是有限制的。 |
POST方法没有限制。 |
|
可用性： |
GET方法通常不被用来发送password与敏感信息。可是我发现还是有不少站点用GET来实现login。 比方XXXX社区，它把login方法放在一个jquery完毕JavaScript脚本中。用GET请求完毕。 |
POST方法能够用来发送password与其它敏感信息。 |
|
可见性： |
GET方法对全部人可见 |
POST方法的变量是不可见的在URL中 |
|
缓存： |
GET方法默认被缓存。这个就是非常多时候用GET方法获取数据后面要跟个时间戳的原因 |
POST方法默认不被缓存。 |
|
|
|
|
|
|
|
除非Response头设置了Cache-Control或者Expires属性值。 |
|
最大的变量值： |
GET支持最大为7607个字符 |
POST方法支持最大值为8MB |
|
应用场合： |
GET最经常使用的场合是获取数据，浏览器获取网页时候绝大多数通过GET方法实现。大多数浏览器下载也是使用GET方法获取文件 |
POST主要用来向server提交数 |
1.2.9 div
1.3 行级标签
指依附其它块级元素存在, 紧接于被联元素之间显示, 而不换行.
1.3.1 img
<imgsrc="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
两个属性
height px %
width
1.3.2 span
<p><span>sometext.</span>some other text.</p>
1.3.3 br
<ahref="./index.html" title="asd" target="_new">超链接</a>
_blank
_new
_parent
_self
_top
framename
规定在何处
锚链接
<ahref="#name"></a>
<a name="name"></a>
邮件
<a href="mailto:985860612@qq.com" title="asd" target="">邮件</a>
1.3.5 input
|
type |
功能 |
样例 |
|
text |
单行文本输入 |
<input type="text" name="username" /> |
|
password |
password |
<input type="password" name="password" /> |
|
radio |
单选 |
<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 |
|
checkbox |
多选 |
<input type="checkbox" name="hobby" value="书" />书 <input type="checkbox" name="hobby" value="画" />画 |
|
reset |
重置表单数据 |
<input type="reset" value="重置" /> |
|
file |
文件上传 |
<input type="file" name="files" /> |
|
submit |
提交表单数据 |
<input type="submit" value="提交" /> |
|
image |
图形提交button |
<input type="image" src="images/button.gif" /> |
|
button |
普通button |
<input type="button" value="播放音乐" /> |
1.3.6 textarea
<textarea name="... " cols="列宽" rows="行宽">
文本内容
</textarea>
1.3.7 select
<select name="bmon">
<option value="" selected="selected">[选择月份]</option>
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
</select>
1.4 w3c标准
1.4.1 内容和表现分离
1.4.2 内容结构要求语义化
1.4.3 遵循xhtml1.0的规范
1.5 a标签
參阅: a
1.6 凝视特殊符号
<!--凝视-->
空格：
大于(>)：>
小于(<）: <
引號（”）："
版权号() ：©
1.7 表单
參阅: from
2 表格
2.1 表格基础
參阅: table
2.2 跨行
跨行使用的是rowspan
<table width="200"border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
2.3 夸列
跨行使用的是colspan
<tablewidth="200" border="1">
<tr>
<tdcolspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
2.4 表格布局
表格布局一般用于数据展示页
和表单页面
3 框架
什么是框架?
通过使用框架，你能够在同一个浏览器窗体中显示不止一个页面。
框架用途?
在同一个浏览器窗体显示多个页面
能够实现复用
实现典型的文件夹结构
框架分为哪两种类型
3.1 frameset
特点
结构清晰
两种
列
<frameset cols="19%,30%,*"border="1">
<framesrc="frame_a.html" />
<framesrc="frame_b.html" />
<framesrc="frame_c.html">
</frameset>
<noframes><body>您的浏览器无法处理框架！
</body></noframes>
行
<frameset rows="19%,30%,*"border="1">
<framesrc="frame_a.html" />
<framesrc="frame_b.html" />
<framesrc="frame_c.html">
</frameset>
<noframes><body>您的浏览器无法处理框架！</body></noframes>
属性
|
属性 |
值 |
描写叙述 |
|
frameborder |
0,1 |
规定是否显示框架周围的边框。 |
|
name |
name |
规定框架的名称。 |
|
noresize |
noresize |
规定无法调整框架的大小。 |
|
scrolling |
yes no auto |
规定是否在框架中显示滚动栏。 |
3.2 IFrame
<iframe src="引用页面地址"name="框架标识名"
frameborder="边框" scrolling="no" />
|
属性 |
值 |
描写叙述 |
|
frameborder |
0,1 |
规定是否显示框架周围的边框。 |
|
height |
pixels % |
高度 |
|
width |
pixels % |
宽度 |
|
src |
URL |
路径 |
|
scrolling |
yes no auto |
规定是否在 iframe 中显示滚动栏。 |
3.3 a
參阅: a
4 css样式表
使用了css
没有使用css
4.1 什么是css
CSS即层叠样式表（Cascading StyleSheet）
4.2 为什么使用css
1.实现内容和样式分离,利于团队开发.
2.实现样式复用,提高开发效率
3.实现页面的 精确控制
4.更利于搜索引擎的 搜索
4.3 css 版本号
css3 和css
CSS3是CSS2.0技术的升级版本号，CSS3语言开发是朝着模块化发展的。
曾经的规范作为一个模块实在是太庞大并且比較复杂，所以，把它分解为一些小的模块，很多其它新的模块也被增加进来。
这些模块包含：盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
当中最重要的 CSS3 模块包含：
选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面
4.4 css 怎么写
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>css样式表</title>
<style type="text/css" >
li{ font-size:80px;}
</style>
</head>
<body>
<ul>
<li>所有商品分类</li>
<li>服装城</li>
<li>食品</li>
<li>团购</li>
<li>夺宝岛</li>
<li>金融</li>
</ul>
</body>
</html>
4.5 选择器
选择器{
对象的属性1:值1;
对象的属性2:值2;
}
4.5.1 标签选择器
标签名{
属性名1:属性值1;
属性名2:属性值2;
}
4.5.2 类选择器
.类名{
属性名1:属性值1;
属性名2:属性值2;
}
4.5.3 id选择器
#id{
属性名1:属性值1;
属性名2:属性值2;
}
4.5.4 高级选择器
"CSS" 列指示该属性是在哪个 CSS 版本号中定义的。（CSS1、CSS2 还是 CSS3。
）
|
选择器 |
样例 |
样例描写叙述 |
CSS |
|
.class |
.intro |
选择 class="intro" 的全部元素。 |
1 |
|
#id |
#firstname |
选择 id="firstname" 的全部元素。 |
1 |
|
* |
* |
选择全部元素。 |
2 |
|
element |
p |
选择全部 <p> 元素。 |
1 |
|
element,element |
div,p |
选择全部 <div> 元素和全部 <p> 元素。 |
1 |
|
element element |
div p |
选择 <div> 元素内部的全部 <p> 元素。 |
1 |
|
element>element |
div>p |
选择父元素为 <div> 元素的全部 <p> 元素。 |
2 |
|
element+element |
div+p |
选择紧接在 <div> 元素之后的全部 <p> 元素。 |
2 |
|
[attribute] |
[target] |
选择带有 target 属性全部元素。 |
2 |
|
[attribute=value] |
[target=_blank] |
选择 target="_blank" 的全部元素。 |
2 |
|
[attribute~=value] |
[title~=flower] |
选择 title 属性包括单词 "flower" 的全部元素。 |
2 |
|
[attribute|=value] |
[lang|=en] |
选择 lang 属性值以 "en" 开头的全部元素。 |
2 |
|
:link |
a:link |
选择全部未被訪问的链接。 |
1 |
|
:visited |
a:visited |
选择全部已被訪问的链接。 |
1 |
|
:active |
a:active |
选择活动链接。 |
1 |
|
:hover |
a:hover |
选择鼠标指针位于其上的链接。 |
1 |
|
:focus |
input:focus |
选择获得焦点的 input 元素。 |
2 |
|
:first-letter |
p:first-letter |
选择每一个 <p> 元素的首字母。 |
1 |
|
:first-line |
p:first-line |
选择每一个 <p> 元素的首行。 |
1 |
|
:first-child |
p:first-child |
选择属于父元素的第一个子元素的每一个 <p> 元素。 |
2 |
|
:before |
p:before |
在每一个 <p> 元素的内容之前插入内容。 |
2 |
|
:after |
p:after |
在每一个 <p> 元素的内容之后插入内容。 |
2 |
|
:lang(language) |
p:lang(it) |
选择带有以 "it" 开头的 lang 属性值的每一个 <p> 元素。 |
2 |
|
element1~element2 |
p~ul |
选择前面有 <p> 元素的每一个 <ul> 元素。 |
3 |
|
[attribute^=value] |
a[src^="https"] |
选择其 src 属性值以 "https" 开头的每一个 <a> 元素。 |
3 |
|
[attribute$=value] |
a[src$=".pdf"] |
选择其 src 属性以 ".pdf" 结尾的全部 <a> 元素。 |
3 |
|
[attribute*=value] |
a[src*="abc"] |
选择其 src 属性中包括 "abc" 子串的每一个 <a> 元素。 |
3 |
|
:first-of-type |
p:first-of-type |
选择属于其父元素的首个 <p> 元素的每一个 <p> 元素。 |
3 |
|
:last-of-type |
p:last-of-type |
选择属于其父元素的最后 <p> 元素的每一个 <p> 元素。 |
3 |
|
:only-of-type |
p:only-of-type |
选择属于其父元素唯一的 <p> 元素的每一个 <p> 元素。 |
3 |
|
:only-child |
p:only-child |
选择属于其父元素的唯一子元素的每一个 <p> 元素。 |
3 |
|
:nth-child(n) |
p:nth-child(2) |
选择属于其父元素的第二个子元素的每一个 <p> 元素。 |
3 |
|
:nth-last-child(n) |
p:nth-last-child(2) |
同上，从最后一个子元素開始计数。 |
3 |
|
:nth-of-type(n) |
p:nth-of-type(2) |
选择属于其父元素第二个 <p> 元素的每一个 <p> 元素。 |
3 |
|
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
同上，可是从最后一个子元素開始计数。 |
3 |
|
:last-child |
p:last-child |
选择属于其父元素最后一个子元素每一个 <p> 元素。 |
3 |
|
:root |
:root |
选择文档的根元素。 |
3 |
|
:empty |
p:empty |
选择没有子元素的每一个 <p> 元素（包含文本节点）。 |
3 |
|
:target |
#news:target |
选择当前活动的 #news 元素。 |
3 |
|
:enabled |
input:enabled |
选择每一个启用的 <input> 元素。 |
3 |
|
:disabled |
input:disabled |
选择每一个禁用的 <input> 元素 |
3 |
|
:checked |
input:checked |
选择每一个被选中的 <input> 元素。 |
3 |
|
:not(selector) |
:not(p) |
选择非 <p> 元素的每一个元素。 |
3 |
|
::selection |
::selection |
选择被用户选取的元素部分。 |
3 |
4.6 样式修饰
字体属性：(font)
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，仅仅要用数值就能够，单位：PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大写和小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
经常使用字体： (font-family)
"Courier New", Courier,monospace, "Times New Roman", Times, serif, Arial, Helvetica,sans-serif, Verdana
背景属性： (background)
色彩 {background-color: #FFFFFF;}
图片 {background-image: url();}
反复 {background-repeat: no-repeat;}
滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
位置 {background-position: left;}(水平) top(垂直);
简写方法 {background:#000 url(..) repeat fixed lefttop;} /*简写·这个在阅读代码中常常出现。要认真的研究*/
区块属性： (Block) /*这个属性第一次认识，要多多研究*/
字间距 {letter-spacing: normal;} 数值 /*这个属性似乎实用。多实践下*/
对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进 {text-indent: 数值px;}
垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)
显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group; table-column;table-cell; table-caption;(表格标题) /*display 属性的了解非常模糊*/
方框属性： (Box)
; height:; float:; clear:both;margin:; padding:; 顺序：上右下左
边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-; 边框宽度
border-color:#;
简写方法border：width style color; /*简写*/
列表属性： (List-style)
类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
图像list-style-image: url(..);
定位属性： (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)
css属性代码大全
一 CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
二、CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
三、CSS符号属性：
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/
四、CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*反复排列-网页默认*/
background-repeat : no-repeat; /*不反复排列*/
background-repeat : repeat-x; /*在x轴反复排列*/
background-repeat : repeat-y; /*在y轴反复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
五、CSS连接属性：
a /*全部超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url("光标文件名称.cur"),text;}
六、CSS框线一览表：
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也能够使用常规的方式 例如以下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其它框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表单运用：
文字方块
button
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2
八、CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
CSS 属性： 字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式 {font:font-style font-variant font-weight font-sizefont-family}
2 字体类型 {font-family:"字体1","字体2","字体3",...}
3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large|small| smaller| x-small| xx-small}
4 字体风格 {font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字间 距 {letter-spacing:数值|inherit|normal}
10 单词间距 {word-spacing:数值|inherit|normal}
11 字体变形 {font-variant:inherit|normal|small-cps }
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}
14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(Text Style)
序号 中文说明 标记语法
1 行间 距 {line-height:数值|inherit|normal;}
2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:数值|inherit}
4 水平对齐 {text-align:left|right|center|justify}
5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 书写方式 {writing-mode:lr-tb|tb-rl}
背景样式
序号 中文说明 标记语法
1 背景颜色 {background-color:数值}
2 背景图片 {background-image: url(URL)|none}
3 背景反复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景反复|背景附件|背景位置}
框架样式(Box Style)
序号 中文说明 标记语法
1 边界留白 {margin:margin-top margin-right margin-bottommargin-left}
2 补 白 {padding:padding-top padding-right padding-bottompadding-left}
3 边框宽度 {border-border-top-width border-right-widthborder-bottom-width border-left-width}
宽度值： thin|medium|thick|数值
4 边框颜色 {border-color:数值数值 数值 数值} 数值：分别代表top、right、bottom、left颜色值
5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边 框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-stylecolor}
右 边 框 {border-right:border-right-widthborder-style color}
下 边 框 {border-bottom:border-bottom-widthborder-style color}
左 边 框 {border-left:border-left-widthborder-style color}
7 宽 度 {长度|百分比| auto}
8 高 度 {height:数值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分类列表
序号 中文说明 标记语法
1 控制显示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 文件夹列表 {list-style:文件夹样式类型|文件夹样式位置|url}
7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
4.6.1 文本属性
|
属性名 |
含义 |
应用场景 |
|
line-height |
行高行间距 |
多行布局 |
|
text-align |
对其方式(left,right,center) |
各种元素对齐 |
|
text-decoration |
下划线( underline) |
下划线 |
|
white-space |
规定怎样处理空白 |
文本溢出时不断行 |
4.6.2 字体属性
字体属性
|
属性名 |
含义 |
举例 |
应用场景 |
|
font |
在一个声明中设置全部的字体属性 |
font:bold 12px 宋体; |
字体样式缩写 |
|
font-family |
字体类型 |
font-family宋体; |
字体样式 |
|
font-size |
字体大小 |
font-size:14px; |
字体大小 |
|
font=weight |
字体粗细 |
font-weight:bold; |
加粗 |
4.6.3 背景属性
|
属性 |
含义 |
举例 |
|
background |
在一个声明中设置全部的背景属性 |
background:#ccc url(img/bg.pn) repeat-x 20px -10px; |
|
background-color |
背景颜色 |
background-color:red; |
|
background-repeat |
设置背景图片平铺方式 |
background-repeat:no-repeat; |
|
background-position |
设置背景图片位置 |
background-position:10px 10px; |
background-repeat
|
repeat |
纵向,横向都平铺 |
小方块图,设置背景 |
|
repeat-x |
横向平铺 |
细长小条设置渐变效果 |
|
repeat-y |
纵向平铺 |
小图设置特殊边框 |
|
no-repeat |
背景图片不平铺 |
大图做背景图片,使用廉价亮控制 |
4.6.4 list-style
|
属性值 |
事例 |
|
none |
|
|
disc |
● |
|
circle |
○ |
|
square |
■ |
|
decimal |
阿拉伯数字 |
|
lower-roman |
小写罗马数字 |
|
upper-roman |
大写罗马数字 |
|
lower-alpha |
小写英文字母 |
|
upper-alpha |
大写英文字母 |
4.7 盒子模型
4.8 浮动
4.9 超链接伪类
4.10 样式优先级
1，内联样式 [1.0.0.0]
A：<span id="demo" style="color:red"></span>
B：还有就是JS控制的内联样式style对象。document.getElementById("demo").style.color="red";
这两者属于同一级别。只是普通情况是JS控制的内联样式优先级高，这与先后顺序申明有关系与本质无关，由于往往DOM操作是在DOM树载入完成之后。
2，ID选择器 [0.1.0.0]
3。类，属性，伪类 选择器 [0.0.1.0]
4。元素标签，伪元素 选择器 [0.0.0.1]
接下来看下!important 这个诡异的东西。
<styletype="text/css">
div{background: red !important;background: blue}
3 </style>
4.11 布局典型
5 常见问题
5.1 frameset
frameset
不呢放到body里面,仅仅能是独立的
6 特殊标签
6.1 marquee
behavior
设定滚动的方式：
alternate：表示在两端之间来回滚动。
scroll：表示由一端滚动到还有一端。会反复。
slide： 表示由一端滚动到还有一端。不会反复。
代码例如以下:
<marqueebehavior="alternate">alternate：表示在两端之间来回滚动。 </marquee>
<marqueebehavior="scroll">scroll：表示由一端滚动到还有一端，会反复。</marquee>
<marqueebehavior="slide">slide： 表示由一端滚动到还有一端。不会反复。</marquee>
bgcolor
设定活动字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。
代码例如以下:
<marquee bgcolor="#006699">设定活动字幕的背景颜色 bgcolor="#006699"</marquee>
<marqueebgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee>
direction
设定活动字幕的滚动方向
代码例如以下:
<marquee direction="down">设定活动字幕的滚动方向direction="down"：向下</marquee>
<marquee direction="left">设定活动字幕的滚动方向direction="left"：向左</marquee>
<marquee direction="right">设定活动字幕的滚动方向direction="right"：向右</marquee>
<marquee direction="up">设定活动字幕的滚动方向direction="up"：向上</marquee>
height
设定活动字幕的高度
代码例如以下:
<marquee height="500"direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee>
width
设定活动字幕的宽度
代码例如以下:
<marquee width="500"bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>
hspace
设定活动字幕里所在的位置距离父容器水平边框的距离
This controls the horizontal（水平）space around the display box.
代码例如以下:
<table width="500"border="1" align="center" cellpadding="0"cellspacing="0">
<tr>
<td><marquee hspace="100"bgcolor="#CCCCCC">hspace="100"</marquee></td>
</tr>
</table>
vspace
设定活动字幕里所在的位置距离父容器垂直边框的距离
This controls the vertical（垂直） space around the display box.
代码例如以下:
<marquee vspace="100"bgcolor="#CCCCCC">hspace="100"</marquee>
loop
设定滚动的次数，当loop=-1表示一直滚动下去，默觉得-1
代码例如以下:
<marquee loop="-1"bgcolor="#CCCCCC">我会不停地走。
</marquee>
<p> </p>
<marquee loop="2"bgcolor="#CCCCCC">我仅仅走两次哦</marquee>
scrollamount
设定活动字幕的滚动速度。单位pixels
代码例如以下:
<marquee scrollamount="10">scrollamount="10" </marquee>
<marquee scrollamount="20">scrollamount="20" </marquee>
<marquee scrollamount="30">scrollamount="30" </marquee>
scrolldelay
设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）
值大了会有一步一停顿的效果
代码例如以下:
<marquee scrolldelay="10">scrolldelay="10" </marquee>
<marquee scrolldelay="100"> scrolldelay="100"</marquee>
<marqueescrolldelay="1000">scrolldelay="1000" </marquee>
6.2 object
<object data="movie.swf"height="200" width="200"/>
版权声明：本文博主原创文章，博客，未经同意不得转载。