html+　CSS_html/css

Html

1 html的基本标签

1.1 html文件结构

无标题文档

1.1.1 DOCTYPE

定义和用法

声明必须是 HTML 文档的第一行，位于标签之前。

声明不是 HTML标签；它是指示web浏览器关于页面使用哪个 HTML版本进行编写的指令。

在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

(Standard Generalized Markup Language(SGML即标准通用置标语言))

提示：请始终向HTML文档添加声明，这样浏览器才能获知文档类型。

HTML 元素和文档类型（Doctype）

Strict 严格型

Transitional过渡类型

Frameset 框架

HTML 4.01

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

"http://www.w3.org/TR/html4/loose.dtd">

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

"http://www.w3.org/TR/html4/loose.dtd">

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 5

请参阅这个 HTML 元素表，其中列出了每种元素会出现在哪个文档类型中。

提示和注释

注释：声明没有结束标签。

提示：声明对大小写不敏感。

提示：请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

XHTML1.0是HTML4.0的重新组织,算是HTML4.01的修正版,发行命名为XHTML1.0。

1.所有卷标元素名称都使用小写

2.所有没有成对的空标签必须以 />结尾，

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.文件类别宣告」还有指定文件编码

1.1.2 meta

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

提示和注释：

注释：标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

属性

值

描述

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如下：

这样就可以区分开了使用的是哪个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

1.2.2 p

1.2.3 hr

1.2.4 ol li

1.2.5 ul li

1.2.6 dl dt dd

1.2.7 table

1.2.8 from

属性	值	描述
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，有些服务器可以支持到64K。这个就是很多网页超过64K就挂掉的真实原因。因为服务器限制了。	发送参数，还可以是文件，大小在理论上没有限制。
被攻击：	GET方法提交数据很容易被黑客攻击，实施脚本绑架。	POST方法相对GET方法不是那么容易被黑客攻击
数据类型限制：	GET方法提交数据只能是文本数据	POST方法则不受限制，二进制文件也可以。
安全性：	GET方法的安全性比POST方法要低一些，原因是数据做为URL的一部分是可见的。而且被浏览器存在历史访问记录中。	POST方法的安全性相对GET要高一些。因为参数数据不能被浏览器作为URL的一部分而存入历史访问记录中。
表单数据长度：	由于表单数据做为URL的一部分而URL长度通常是有限制的。	POST方法没有限制。
可用性：	GET方法通常不被用来发送密码与敏感信息。但是我发现还是有不少网站用GET来实现login。比如XXXX社区，它把login方法放在一个jquery完成JavaScript脚本中，用GET请求完成。	POST方法可以用来发送密码与其他敏感信息。
可见性：	GET方法对所有人可见	POST方法的变量是不可见的在URL中
缓存：	GET方法默认被缓存，这个就是很多时候用GET方法获取数据后面要跟个时间戳的原因	POST方法默认不被缓存。

		除非Response头设置了Cache-Control或者Expires属性值。
最大的变量值：	GET支持最大为7607个字符	POST方法支持最大值为8MB
应用场合：	GET最常用的场合是获取数据，浏览器获取网页时候绝大多数通过GET方法实现，大多数浏览器下载也是使用GET方法获取文件	POST主要用来向服务器提交数

1.2.9 div

1.3 行级标签

指依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行.

1.3.1 img

两个属性

height px %

width

1.3.2 span

sometext.some other text.

1.3.3 br

1.3.4 a

超链接

_blank

_new

_parent

_self

_top

framename

规定在何处

锚链接

邮件

1.3.5 input

type	功能	例子
text	单行文本输入
password	密码
radio	单选	男女
checkbox	多选	书画
reset	重置表单数据
file	文件上传
submit	提交表单数据
image	图形提交按钮
button	普通按钮

1.3.6 textarea

 文本内容 

1.3.7 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

2.3 夸列

跨行使用的是colspan

2.4 表格布局

表格布局一般用于数据展示页

和表单页面

3 框架

什么是框架?

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

框架用途?

在同一个浏览器窗口显示多个页面

可以实现复用

实现典型的目录结构

框架分为哪两种类型

3.1 frameset

特点

结构清晰

两种

列

行

属性

属性	值	描述
frameborder	0,1	规定是否显示框架周围的边框。
name	name	规定框架的名称。
noresize	noresize	规定无法调整框架的大小。
scrolling	yes no auto	规定是否在框架中显示滚动条。

3.2 IFrame

frameborder="边框" scrolling="no" /> <table> <tr> <td> 属性 </td> <td> 值 </td> <td> 描述 </td> </tr> <tr> <td> frameborder </td> <td> 0,1 </td> <td> 规定是否显示框架周围的边框。 </td> </tr> <tr> <td> height </td> <td> pixels % </td> <td> 高度 </td> </tr> <tr> <td> width </td> <td> pixels % </td> <td> 宽度 </td> </tr> <tr> <td> src </td> <td> URL </td> <td> 路径 </td> </tr> <tr> <td> scrolling </td> <td> yes no auto </td> <td> 规定是否在 iframe 中显示滚动条。 </td> </tr> </table> 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。） <table> <tr> <td> 选择器 </td> <td> 例子 </td> <td> 例子描述 </td> <td> CSS </td> </tr> <tr> <td> .class </td> <td> .intro </td> <td> 选择 class="intro" 的所有元素。 </td> <td> 1 </td> </tr> <tr> <td> #id </td> <td> #firstname </td> <td> 选择 id="firstname" 的所有元素。 </td> <td> 1 </td> </tr> <tr> <td> * </td> <td> * </td> <td> 选择所有元素。 </td> <td> 2 </td> </tr> <tr> <td> element </td> <td> p </td> <td> 选择所有 元素。 </td> <td> 1 </td> </tr> <tr> <td> element,element </td> <td> div,p </td> <td> 选择所有 <div> 元素和所有 元素。 </td> <td> 1 </td> </tr> <tr> <td> element element </td> <td> div p </td> <td> 选择 <div> 元素内部的所有 元素。 </td> <td> 1 </td> </tr> <tr> <td> element>element </td> <td> div>p </td> <td> 选择父元素为 <div> 元素的所有 元素。 </td> <td> 2 </td> </tr> <tr> <td> element+element </td> <td> div+p </td> <td> 选择紧接在 <div> 元素之后的所有 元素。 </td> <td> 2 </td> </tr> <tr> <td> [attribute] </td> <td> [target] </td> <td> 选择带有 target 属性所有元素。 </td> <td> 2 </td> </tr> <tr> <td> [attribute=value] </td> <td> [target=_blank] </td> <td> 选择 target="_blank" 的所有元素。 </td> <td> 2 </td> </tr> <tr> <td> [attribute~=value] </td> <td> [title~=flower] </td> <td> 选择 title 属性包含单词 "flower" 的所有元素。 </td> <td> 2 </td> </tr> <tr> <td> [attribute|=value] </td> <td> [lang|=en] </td> <td> 选择 lang 属性值以 "en" 开头的所有元素。 </td> <td> 2 </td> </tr> <tr> <td> :link </td> <td> a:link </td> <td> 选择所有未被访问的链接。 </td> <td> 1 </td> </tr> <tr> <td> :visited </td> <td> a:visited </td> <td> 选择所有已被访问的链接。 </td> <td> 1 </td> </tr> <tr> <td> :active </td> <td> a:active </td> <td> 选择活动链接。 </td> <td> 1 </td> </tr> <tr> <td> :hover </td> <td> a:hover </td> <td> 选择鼠标指针位于其上的链接。 </td> <td> 1 </td> </tr> <tr> <td> :focus </td> <td> input:focus </td> <td> 选择获得焦点的 input 元素。 </td> <td> 2 </td> </tr> <tr> <td> :first-letter </td> <td> p:first-letter </td> <td> 选择每个 元素的首字母。 </td> <td> 1 </td> </tr> <tr> <td> :first-line </td> <td> p:first-line </td> <td> 选择每个 元素的首行。 </td> <td> 1 </td> </tr> <tr> <td> :first-child </td> <td> p:first-child </td> <td> 选择属于父元素的第一个子元素的每个 元素。 </td> <td> 2 </td> </tr> <tr> <td> :before </td> <td> p:before </td> <td> 在每个 元素的内容之前插入内容。 </td> <td> 2 </td> </tr> <tr> <td> :after </td> <td> p:after </td> <td> 在每个 元素的内容之后插入内容。 </td> <td> 2 </td> </tr> <tr> <td> :lang(language) </td> <td> p:lang(it) </td> <td> 选择带有以 "it" 开头的 lang 属性值的每个 元素。 </td> <td> 2 </td> </tr> <tr> <td> element1~element2 </td> <td> p~ul </td> <td> 选择前面有 元素的每个 <ul> 元素。 </td> <td> 3 </td> </tr> <tr> <td> [attribute^=value] </td> <td> a[src^="https"] </td> <td> 选择其 src 属性值以 "https" 开头的每个元素。 </td> <td> 3 </td> </tr> <tr> <td> [attribute$=value] </td> <td> a[src$=".pdf"] </td> <td> 选择其 src 属性以 ".pdf" 结尾的所有元素。 </td> <td> 3 </td> </tr> <tr> <td> [attribute*=value] </td> <td> a[src*="abc"] </td> <td> 选择其 src 属性中包含 "abc" 子串的每个元素。 </td> <td> 3 </td> </tr> <tr> <td> :first-of-type </td> <td> p:first-of-type </td> <td> 选择属于其父元素的首个 元素的每个 元素。 </td> <td> 3 </td> </tr> <tr> <td> :last-of-type </td> <td> p:last-of-type </td> <td> 选择属于其父元素的最后 元素的每个 元素。 </td> <td> 3 </td> </tr> <tr> <td> :only-of-type </td> <td> p:only-of-type </td> <td> 选择属于其父元素唯一的 元素的每个 元素。 </td> <td> 3 </td> </tr> <tr> <td> :only-child </td> <td> p:only-child </td> <td> 选择属于其父元素的唯一子元素的每个 元素。 </td> <td> 3 </td> </tr> <tr> <td> :nth-child(n) </td> <td> p:nth-child(2) </td> <td> 选择属于其父元素的第二个子元素的每个 元素。 </td> <td> 3 </td> </tr> <tr> <td> :nth-last-child(n) </td> <td> p:nth-last-child(2) </td> <td> 同上，从最后一个子元素开始计数。 </td> <td> 3 </td> </tr> <tr> <td> :nth-of-type(n) </td> <td> p:nth-of-type(2) </td> <td> 选择属于其父元素第二个 元素的每个 元素。 </td> <td> 3 </td> </tr> <tr> <td> :nth-last-of-type(n) </td> <td> p:nth-last-of-type(2) </td> <td> 同上，但是从最后一个子元素开始计数。 </td> <td> 3 </td> </tr> <tr> <td> :last-child </td> <td> p:last-child </td> <td> 选择属于其父元素最后一个子元素每个 元素。 </td> <td> 3 </td> </tr> <tr> <td> :root </td> <td> :root </td> <td> 选择文档的根元素。 </td> <td> 3 </td> </tr> <tr> <td> :empty </td> <td> p:empty </td> <td> 选择没有子元素的每个 元素（包括文本节点）。 </td> <td> 3 </td> </tr> <tr> <td> :target </td> <td> #news:target </td> <td> 选择当前活动的 #news 元素。 </td> <td> 3 </td> </tr> <tr> <td> :enabled </td> <td> input:enabled </td> <td> 选择每个启用的 <input> 元素。 </td> <td> 3 </td> </tr> <tr> <td> :disabled </td> <td> input:disabled </td> <td> 选择每个禁用的 <input> 元素 </td> <td> 3 </td> </tr> <tr> <td> :checked </td> <td> input:checked </td> <td> 选择每个被选中的 <input> 元素。 </td> <td> 3 </td> </tr> <tr> <td> :not(selector) </td> <td> :not(p) </td> <td> 选择非 元素的每个元素。 </td> <td> 3 </td> </tr> <tr> <td> ::selection </td> <td> ::selection </td> <td> 选择被用户选取的元素部分。 </td> <td> 3 </td> </tr> </table> 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) width:; height:; float:; clear:both;margin:; padding:; 顺序：上右下左 边框属性： (Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 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表单运用： 文字方块 按钮 复选框 选择钮 多行文字方块 下拉式菜单选项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-width: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 宽　　度 {width:长度|百分比| 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 文本属性 <table> <tr> <td> 属性名 </td> <td> 含义 </td> <td> 应用场景 </td> </tr> <tr> <td> line-height </td> <td> 行高行间距 </td> <td> 多行布局 </td> </tr> <tr> <td> text-align </td> <td> 对其方式(left,right,center) </td> <td> 各种元素对齐 </td> </tr> <tr> <td> text-decoration </td> <td> 下划线( underline) </td> <td> 下划线 </td> </tr> <tr> <td> white-space </td> <td> 规定如何处理空白 </td> <td> 文本溢出时不断行 </td> </tr> </table> 4.6.2 字体属性 字体属性 <table> <tr> <td> 属性名 </td> <td> 含义 </td> <td> 举例 </td> <td> 应用场景 </td> </tr> <tr> <td> font </td> <td> 在一个声明中设置所有的字体属性 </td> <td> font:bold 12px 宋体; </td> <td> 字体样式缩写 </td> </tr> <tr> <td> font-family </td> <td> 字体类型 </td> <td> font-family宋体; </td> <td> 字体样式 </td> </tr> <tr> <td> font-size </td> <td> 字体大小 </td> <td> font-size:14px; </td> <td> 字体大小 </td> </tr> <tr> <td> font=weight </td> <td> 字体粗细 </td> <td> font-weight:bold; </td> <td> 加粗 </td> </tr> </table> 4.6.3 背景属性 <table> <tr> <td> 属性 </td> <td> 含义 </td> <td> 举例 </td> </tr> <tr> <td> background </td> <td> 在一个声明中设置所有的背景属性 </td> <td> background:#ccc url(img/bg.pn) repeat-x 20px -10px; </td> </tr> <tr> <td> background-color </td> <td> 背景颜色 </td> <td> background-color:red; </td> </tr> <tr> <td> background-repeat </td> <td> 设置背景图片平铺方式 </td> <td> background-repeat:no-repeat; </td> </tr> <tr> <td> background-position </td> <td> 设置背景图片位置 </td> <td> background-position:10px 10px; </td> </tr> </table> background-repeat <table> <tr> <td> repeat </td> <td> 纵向,横向都平铺 </td> <td> 小方块图,设置背景 </td> </tr> <tr> <td> repeat-x </td> <td> 横向平铺 </td> <td> 细长小条设置渐变效果 </td> </tr> <tr> <td> repeat-y </td> <td> 纵向平铺 </td> <td> 小图设置特殊边框 </td> </tr> <tr> <td> no-repeat </td> <td> 背景图片不平铺 </td> <td> 大图做背景图片,使用便宜亮控制 </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> 4.6.4 list-style <table> <tr> <td> 属性值 </td> <td> 事例 </td> </tr> <tr> <td> none </td> <td> </td> </tr> <tr> <td> disc </td> <td> ● </td> </tr> <tr> <td> circle </td> <td> ○ </td> </tr> <tr> <td> square </td> <td> ■ </td> </tr> <tr> <td> decimal </td> <td> 阿拉伯数字 </td> </tr> <tr> <td> lower-roman </td> <td> 小写罗马数字 </td> </tr> <tr> <td> upper-roman </td> <td> 大写罗马数字 </td> </tr> <tr> <td> lower-alpha </td> <td> 小写英文字母 </td> </tr> <tr> <td> upper-alpha </td> <td> 大写英文字母 </td> </tr> </table> 4.7 盒子模型 4.8 浮动 4.9 超链接伪类 4.10 样式优先级 1，内联样式 [1.0.0.0] A： 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> <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"/> </div> </div> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function(){ layui.code({ elem: 'pre', //默认值为.layui-code about:false, title:'html+　CSS_html/css_WEB-ITnose代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <footer class="comm-footer"> <ul class="channels"> <li> <a target="_top" href="/system/">操作系统</a> </li><li> <a target="_top" href="/down/">程序下载</a> </li><li> <a target="_top" href="/jquery/">jquery插件库</a> </li><li> <a target="_top" href="/jiaoben/">编程</a> </li><li> <a target="_top" href="/db/">数据库</a> </li><li> <a target="_top" href="/tools/">在线工具</a> </li><li> <a target="_top" href="/framebook/">框架书籍</a> </li><li> <a target="_top" href="/xitongjiaocheng/">系统教程</a> </li><li> <a target="_top" href="/ruanjianxiazai/">软件下载</a> </li> </ul> <ul class="versions"> <li> <a href="https://m.gxlcms.com" class="active">触屏版</a> </li> <li> <a href="https://www.gxlcms.com" target="_top">电脑版</a> </li> </ul> <a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> </body> </html>

html+ CSS_html/css_WEB-ITnose

html+　CSS_html/css_WEB-ITnose