网站地图    收藏   

子栏目

主页 > 前端 > css教程 >

html +CSS - html/css语言栏目：html.css - 自学php

来源：自学PHP网    时间：2015-04-14 14:51 作者： 阅读:次

[导读] Html1 html的基本标签1 1 html文件结构无标题文档 1 1 1 DOCTYPE定义和用法 声明必须是 HTML 文档的第一行，位于 标签之前。 声明不是 HTML标签；它是指示web浏览器关于...

 

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

&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;

1.2.8 from

First name:

Last name:


属性

值

描述

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 注释特殊符号

空格：&nbsp;

大于(>)：&gt;

小于(<）: &lt;

引号（”）：&quot;

版权号() ：&copy;

1.7 表单

参阅: from

2 表格

2.1 表格基础

参阅: table

2.2 跨行

跨行使用的是rowspan

&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;

2.3 夸列

跨行使用的是colspan

&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;

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>

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

行

<frameset rows="19%,30%,*"border="1">

<framesrc="frame_a.html" />

<framesrc="frame_b.html" />

<framesrc="frame_c.html">

</frameset>

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

属性

属性

值

描述

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 怎么写

css样式表

  • 全部商品分类

  • 服装城

  • 食品

  • 团购

  • 夺宝岛

  • 金融

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

选择所有

元素。

1

element,element

div,p

选择所有

元素和所有

元素。

1

element element

div p

选择

元素内部的所有

元素。

1

element>element

div>p

选择父元素为

元素的所有

元素。

2

element+element

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

选择每个

元素的首字母。

1

:first-line

p:first-line

选择每个

元素的首行。

1

:first-child

p:first-child

选择属于父元素的第一个子元素的每个

元素。

2

:before

p:before

在每个

元素的内容之前插入内容。

2

:after

p:after

在每个

元素的内容之后插入内容。

2

:lang(language)

p:lang(it)

选择带有以 "it" 开头的 lang 属性值的每个

元素。

2

element1~element2

p~ul

选择前面有

元素的每个

    元素。

3

[attribute^=value]

a[src^="https"]

选择其 src 属性值以 "https" 开头的每个 元素。

3

[attribute$=value]

a[src$=".pdf"]

选择其 src 属性以 ".pdf" 结尾的所有 元素。

3

[attribute*=value]

a[src*="abc"]

选择其 src 属性中包含 "abc" 子串的每个 元素。

3

:first-of-type

p:first-of-type

选择属于其父元素的首个

元素的每个

元素。

3

:last-of-type

p:last-of-type

选择属于其父元素的最后

元素的每个

元素。

3

:only-of-type

p:only-of-type

选择属于其父元素唯一的

元素的每个

元素。

3

:only-child

p:only-child

选择属于其父元素的唯一子元素的每个

元素。

3

:nth-child(n)

p:nth-child(2)

选择属于其父元素的第二个子元素的每个

元素。

3

:nth-last-child(n)

p:nth-last-child(2)

同上，从最后一个子元素开始计数。

3

:nth-of-type(n)

p:nth-of-type(2)

选择属于其父元素第二个

元素的每个

元素。

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上，但是从最后一个子元素开始计数。

3

:last-child

p:last-child

选择属于其父元素最后一个子元素每个

元素。

3

:root

:root

选择文档的根元素。

3

:empty

p:empty

选择没有子元素的每个

元素（包括文本节点）。

3

:target

#news:target

选择当前活动的 #news 元素。

3

:enabled

input:enabled

选择每个启用的 元素。

3

:disabled

input:disabled

选择每个禁用的 元素

3

:checked

input:checked

选择每个被选中的 元素。

3

:not(selector)

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

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单 选项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：

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 这个诡异的东西。

div{background: red !important;background: blue}

3 -

4.11 布局典型

5 常见问题

5.1 frameset

frameset

不呢放到body里面,只能是独立的

6 特殊标签

6.1 marquee

behavior

设定滚动的方式：

alternate：表示在两端之间来回滚动。

scroll：表示由一端滚动到另一端，会重复。

slide： 表示由一端滚动到另一端，不会重复。

代码如下:

alternate：表示在两端之间来回滚动。

scroll：表示由一端滚动到另一端，会重复。

slide： 表示由一端滚动到另一端，不会重复。

bgcolor

设定活动字幕的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设定。

代码如下:

设定活动字幕的背景颜色 bgcolor="#006699"

设定活动字幕的背景颜色bgcolor="rgb(10%,50%,100%,)"

设定活动字幕的背景颜色 bgcolor="red"

direction

设定活动字幕的滚动方向

代码如下:

设定活动字幕的滚动方向direction="down"：向下

设定活动字幕的滚动方向direction="left"：向左

设定活动字幕的滚动方向direction="right"：向右

设定活动字幕的滚动方向direction="up"：向上

height

设定活动字幕的高度

代码如下:

设定活动字幕的高度height="500"

width

设定活动字幕的宽度

代码如下:

设定活动字幕的宽度width="500"

hspace

设定活动字幕里所在的位置距离父容器水平边框的距离

This controls the horizontal（水平）space around the display box.

代码如下:

hspace="100"

vspace

设定活动字幕里所在的位置距离父容器垂直边框的距离

This controls the vertical（垂直） space around the display box.

代码如下:

hspace="100"

loop

设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1

代码如下:

我会不停地走。

&nbsp;

我只走两次哦

scrollamount

设定活动字幕的滚动速度，单位pixels

代码如下:

scrollamount="10"

scrollamount="20"

scrollamount="30"

scrolldelay

设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）

值大了会有一步一停顿的效果

代码如下:

scrolldelay="10"

scrolldelay="100"

scrolldelay="1000"

6.2 object

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论