html + CSS

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

1.2.7 table

<table width="200"border="1">

  <tr>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

  </tr>

  <tr>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

  </tr>

</table>

1.2.8 from

<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

1.3.4 a

 <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 凝视特殊符号

<!--凝视-->

空格:&nbsp; 

大于(>):&gt; 

小于(<):  &lt; 

引號(”):&quot; 

版权号() :&copy;

1.7 表单

參阅: from

2 表格

2.1 表格基础

參阅: table

2.2 跨行

跨行使用的是rowspan

  

<table width="200"border="1">

  <tr>

    <td rowspan="2">&nbsp;</td>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

  </tr>

  <tr>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

  </tr>

  <tr>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

  </tr>

</table>

2.3 夸列

跨行使用的是colspan

 

 

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

  <tr>

    <tdcolspan="3">&nbsp;</td>

    </tr>

  <tr>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

  </tr>

  <tr>

   <td>&nbsp;</td>

   <td>&nbsp;</td>

   <td>&nbsp;</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)

 

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.

代码例如以下:

  <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>&nbsp;</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"/>

 

 

 

版权声明:本文博主原创文章,博客,未经同意不得转载。

posted @ 2015-10-25 09:51  mengfanrong  阅读(220)  评论(0编辑  收藏  举报