html +　CSS

2021-09-24 00:22:43

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

1.1.2 meta

提示和凝视：

凝视：<meta> 标签永远位于 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例如以下：

<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

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

1.2.7 table

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

1.2.8 from

<p>First name: <inputtype="text" name="fname" /></p>

</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

1.3.4 a

<ahref="./index.html" title="asd" target="_new">超链接</a>

_blank

_new

_parent

_self

_top

framename

规定在何处

锚链接

<ahref="#name"></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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

2.3 夸列

跨行使用的是colspan

<tablewidth="200" border="1">

<tr>

<tdcolspan="3"> </td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

2.4 表格布局

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

和表单页面

3 框架

什么是框架?

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

框架用途?

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

能够实现复用

实现典型的文件夹结构

框架分为哪两种类型

3.1 frameset

特点

结构清晰

两种

列

<framesrc="frame_a.html" />

<framesrc="frame_b.html" />

<framesrc="frame_c.html">

</frameset>

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

</body></noframes>

行

<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>

li{ font-size:80px;}

</style>

</head>

<body>

<ul>

<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)

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表单运用：

文字方块

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-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 文本属性

属性名	含义	应用场景
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.

代码例如以下:

<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

码农公寓

相关文章