html/css

网页制作技术

xhmtl+css标记语言

一、WEB标准的概念及组成

结构：xhtml、xml

表现：css

行为：DOM.ECMAScript

web标准是网页制作标准，是根据网页的组成部分而生成的一系列标准，它不是一个标准

W3C（万维网联盟）制定的是结构和表现的标准

ECMA（欧洲电脑厂商联合会）指定的是行为的标准

Web标准是一个复杂的概念集合，它由一系列标准组成。

这些标准大部分由W3C起草与发布，也有一些标准是其它标准组织制订，如ECMA（European Computer Manufactrrers Association,欧洲电脑厂商协会）的ECMAScript标准。

W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C 最重要的工作是发展 Web 规范(制定了结构和表现的标准，非盈利的）

结构：

结构标准语言在网页中主要对网页信息起到组织和分类的作用，主要包括(xhtml ,xml)

表现：(css)

表现标准语言在网页中主要对网页信息的显示进行控制，简单地说就是如何修饰网页信息的显示样式，

ECMA（欧洲电脑场商联合会）制定的行为标准

ECMA于1960年由一些欧洲最大的计算机和技术公司成立，与w3c一样，是一家非盈利的组织，目标是评估开发和认可电信和计算机标准。

旨在建立统一的电脑操作格式标准--包括程序语言和输入输出的组织。

行为标准语言在网页中主要对网页信息的结构和现实进行逻辑控制，简单地说就是动态的控制网页的结构和显示，实现网页的智能交互，

简单的说, web标准提出的就是一种静态html页面的制作标准.

本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现

HTML用1.2.1 HTML 、XHTML 、HTML5

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

XHTML指可扩展超文本标记语言（标识语言）（The EXtensible HyperText Markup Language）。 XHTML 是更严格更纯净的 HTML 版本

HTML1.0， HTML2.0 ，HTML3.0， HTML4.0 ，XHTML1.0 ，HTML5

1、HTML 1 并未曾存在，草案（并没有真正地确定），HTML 得第一个官方版本便是由 IETF （互联网工程任务组）推出得 HTML2.0。其后，W3C取代IETF得角色，成为HTML得标准构造

2、HTML 在 HTML 4.01 之后得第一个修订版本便是 XHTML 1.0，此中 X 代表 “eXtensible”，扩展，固然也有人将之解读为 “eXtreme”，极度。XHTML 1.0 是基于 HTML 4.01得，并没有引入任何新标签或属性，唯一得区别是语法，HTML 对语法比力任意，而 XHTML 则要求 XML 般得严格语法。HTML 4.01容许你利用大写或不大写字母标识标记元素和属性，XHTML 则只容许不大写字母。

3、对 W3C 而言，到了 HTML 4 已经是功德圆满，他们得下一步事变是 XHTML 2，XHTML 2 不向前兼容，乃至不兼容之前得HTML。它是一种全新得语言，盼望将Web带向 XML得光亮将来。W3C 凭空杜撰得作风引起了部分人得不满，来自 Opera, Apple, 以及 Mozilla得代表开始表达反对声音。他们自发构造创建了超文本应用技术事变组，便是 WHATWG。

目前推荐遵循的是W3C于2000年1月26日发布的XHTML1.0

HTML5 指的是HTML的第五次重大修改

WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

(HTML5 是 W3C 与 WHATWG 合作的结果，是最新的html规范）

IETF 互联网工程任务组

国际互联网工程任务组（The Internet Engineering Task Force，简称 IETF）是一个公开性质的大型民间国际团体，汇集了与互联网架构和互联网顺利运作相关的网络设计者、运营者、投资人和研究人员，并欢迎所有对此行业感兴趣的人士参与。

互联网工程任务组，成立于1985年底，是全球互联网最具权威的技术标准化组织，主要任务是负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准出自IETF。

IETF的主要任务是负责互联网相关技术标准的研发和制定，是国际互联网业界具有一定权威的网络相关技术研究团体。

二、html及相关的概念的介绍

html（Hyper Text Markup language）超文本标记语言

xhtml（Extensible Hyper Text Markup Language）可扩展超文本标记语言

Html5是Html的第五次重大修改（是W3C与WHATWG合作的结果）

三、DW基本功能

四、调试工具——浏览器

1）PC端调试工具的使用——浏览器

2）移动端调试工具chrome可以测试移动端页面

五、建立站点

站点的作用：用来规划一整个网站的所有内容和代码

六、

HTML5基本结构（新建一个HTML文件默认有哪些代码）

<!doctype html> 命名文档类型

<html> 说明我们写的是标记语言

<head> 文件头部

<title>首页</title> 文件标题（显示在状态栏上的内容）

</head>

<body> 文件主体（所有要写的内容）

</body>

</html>

xhtml基本语法（必须遵守）

1、常规标记

<标记属性=”属性值” 属性=”属性值”></标记>

2、空标记

<标记属性=”属性值” />

说明：

1.写在<>中的第一个单词叫做标记（标签、元素）

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在” ”号内

3.一个标记可以没有属性，也可以有多个属性，属性和属性之间不分先后顺序

4.空标记没有结束标签，用/代替

html常用标记

1) 文本标题（h1-h6）

……

2）段落

3）强制换行

<br/> 强制换行

4）空格

它所占的位置大小不固定空格大小和中英文没有关系，和字号大小有关

5）加粗文本

6）倾斜

<em>倾斜文本</em>（起强调作用）

7）水平线

<hr /> 空标记

8）列表

html中有三种列表：无序列表、有序列表、自定义列表

无序列表

<ul> ul里面只能放li

……

</ul>

有序列表

<ol> 子元素放在父元素里要空四个空格，或者按tab键

……

</ol>

自定义列表

<dl>

……

</dl>

</ol>

1为数字1234 a为小写abcd A为大写ADCD i为小写罗马数字 I为大写罗马数字，不能有汉字的，例如一、二

<ol type=”A” reversed> 这样可以实现倒序

加上 start=”2” 则表示从从B开始往下数

9）插入图片

注：所要插入的图片必须放在站点下

title的作用：当鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，html的绝大多数标签都支持title属性，title属性是专门做提示信息的

alt的作用：alt属性是在你的图片因为某种原因不能加载时页面现实的提示信息，他会直接输出在原本加载图片的地方

相对路径的写法：

1.当当前文件与目标文件在同一目录下，直接书写目标文件文件名+扩展名

2.当当前文件与目标文件所处的文件夹在同一目录下：文件夹名/目标文件全称.扩展名

3.当当前文件所处的文件夹和目标文件夹所处的文件夹在同一个目录下：../文件夹名/目标文件全称.扩展名

10）超链接的应用

语法：

<a href=”目标路径及全称/连接地址” alt=”替换文本” title=”提示文本”>连接文本或图片</a>

<a href=”#”></a> 空链接（跳转到顶部）

<a href=”javascript:;” /> 空链接（无动作）

属性：target：页面打开方式

属性值：_blank 新窗口打开

<a href=”#” target=”_blank”>新页面打开</a>

<a></a>在导航里，如果设置背景图，中间必须写文字，可以加text-indent:-999px;overflow:hidden;中间的文字将会隐藏。

11）数据表格的作用

作用：显示数据

cellspacing:”单元格间距” cellpadding:” 单元格内容与其边框之间的空白”

<tr> 一行

<td></td> 一列（一个单元格）

……

</tr>

</table>

注：一个tr表示一行，一个td表示一列（一个单元格）

colspan=” ”合并列 rowspan=” ”合并行

表格的(列)表头使用 <th> 标签进行定义

<tr> <th>Heading</th> <th>Another Heading</th> </tr>

</table>

12）表单

作用：收集用户信息

表单域

能完成一个功能的东西，要放在同一个表单域里面

get和post是传送方式，get传送速度快，post传送安全性高

表单元素

1.用户名

2.密码框

3.提交按钮

4.重置按钮

5.单选框/单选按钮（name属性必须相同，否则无法实现单选）

checked=”checked” 默认选中

6.复选框

disabled=”disabled” 禁用

7.下拉菜单

… …

</select>

在option标签中添加select=”select” 则可以设置默认选项

8.多行文本框（文本域）

一般宽度以英文字母的个数来算，写出来的框可以输入文本内容，也可以提前输入好内容，后面可以删除、修改

9.按钮

它和submit的区别是，submit是提交按钮，起提交信息的作用，button只起跳转的作用，不进行提交

10.隐藏域（里面的内容将被隐藏起来）

13）div的用法

14）span的用法

<span>内容</span>文本节点（某一小段文本，或是某一个字）

Span标签是根据内容占用相应的大小空间，而div标签则是占用一整行。

CSS基础

1、CSS简介

cascading style sheets 汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。

目前推荐遵循的是W3C发布的CSS3.0.

用来表现XHTML或者XML等样式文件的计算机语言。

1998年5月21日由w3C正式推出的css2.0

2、样式的建立:

内部样式外部样式和内联样式（就近原则）

内部样式：

语法：

/*css语句*/

</style>

注：使用style标记创建样式时，将该标记写在<head></head>里面。

3、CSS语法

选择符{属性：属性值；属性：属性值；}

说明：

1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；

2）属性必须放在花括号中，属性与属性值用冒号连接。

3）每条声明用分号结束。

4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。

5）在书写样式过程中，空格、换行等操作不影响属性显示。

4、外部样式的建立及调用

a:外部样式表的创建

b:外部样式表的导入

*方法一

说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。

*方法二

@import url(目标文件的路径及文件名全称);

</style>

注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；

*link和import导入外部样式的区别：

差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。

差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3：兼容性的差别：@import是CSS2.1提出的，所以老版本浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

3) 内联样式表（行间样式，行内样式，嵌入式样式）

语法：<标签 style="属性：属性值;属性:属性值;"></标签>

4、样式表的优先级

内联样式表的优先级别最高

内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。

5、CSS选择符（选择器）

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.

常用的选择符有十种左右：类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符。

1）元素选择符/类型选择符（element选择器 )

语法：元素名称{属性：属性值；}

说明：

a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p、img、em、strong、span......等。

b)所有的页面元素都可以作为选择符;

用法：

a）如果想改变某个元素的默认样式时，可以使用类型选择符；
b）当统一文档某个元素的显示效果时，可以使用类型选择符；

2) id选择器

语法：#id名{属性：属性值;}

说明：

a）当我们使用id选择符时，应该为每个元素定义一个id属性，

如：<div id="top"></div>

b）id选择符的语法格式是“#”加上自定义的id名

如：#box{width:300px; height:300px;}

c)起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)

如：head标记

d）一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。

e）最大的用处：创建网页的外围结构。

3）class选择器

语法：.class名{属性：属性值;}

说明：

a）当我们使用类选择符时，应先为每个元素定义一个类名称，

b）类选择符的语法格式是："如：<div class="top"></div>"

用法：class选择符更适合定义一类样式；

4)*通配符

语法：*{属性：属性值；}

说明：通配选择符的写法是“*”，其含义就是所有元素。
用法：常用来重置样式。

5）群组选择器

语法：选择符1，选择符2，选择符3{属性：属性值;}

说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。

居中：选择符{margin:0 auto;}

6）包含选择器

语法：选择符1 选择符2{属性：属性值;}

说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

7）伪类选择器(伪类选择符)

语法：

a:link{属性：属性值;}超链接的初始状态;

a:visited{属性：属性值;}超链接被访问后的状态;

a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;

a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;

说明：
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；

2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。

五、选择符的权重

css中用四位数字表示权重，权重的表达方式如：0，0，0，0

类型选择符的权重为0001

class选择符的权重为0010

id选择符的权重为0100

子选择符的权重为0000

属性选择符的权重为0010

伪类选择符的权重为0010

伪元素选择符的权重为0010

包含选择符的权重：为包含选择符的权重之和

内联样式的权重为1000

继承样式的权重为0000

六、注释

html的注释

css的注释

/*注释内容*/

CSS核心属性

一、CSS属性组成和作用

属性：属性值；

1.每个css样式必须由两部分组成：选择符（selector）和声明（decleration）

注：声明又包括属性（properyt）和属性值（value）

2.CSS属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性

3.CSS属性值：属性值包括法定属性值和常规的数值加单位或颜色值（color value），如25px。

二、CSS核心属性

1、文本颜色：

{color:颜色值;}

说明：

用十六进制表示颜色值：

0 1 2 3 4 5 6 7 8 9

0 1 2 3 4 5 6 7 8 9 A B C D E F

颜色模式：光色模式

R G B

FF 00 00

颜色值的缩写：

当表示三原色的三组数字同时相同时，可以缩写为三位;

当用十六进制表示颜色值时，需要在颜色值前加“#”

2、文本大小：

{font-size:value;}

例如{font-size:12px;}

说明：

1）属性值为数值型时，必须给属性值加单位，属性值为0时除外。
2）单位还可以是pt，9pt=12px;

3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px;

4)使用绝对大小关键字
                   xx-small  =9px
                   x-small   =11px
                   small    =13px
                   medium   =16px
                   arge    =19px
                   x-large   =23px
                   xx-large  =27px

3、文本字体：

{font-family:"字体1","字体2";}

说明：
*当字体是中文字体时需加引号；
*当英文字体中有空格时需加引号如“Times New Roman”；

Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

4、加粗：

{font-weight:bolder/bold/normal/100-900;}

说明：在css规范中把字体的粗细分为9个等级，分别从100-900，其中100对应最轻的字体变形，而900对应最重的字体变形。

500常规字体

600-900加粗字体

5、倾斜：

{font-style:normal/italic/oblique;}
说明：italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显。

6、行高

{line-height:normal/数值;}

说明：只适用于单行文本

1）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

2)当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；

3)当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。（IE6及以下版本存在浏览器兼容问题）

倍行高：{line-height:2} 2倍 {line-height:1.5} 1.5倍

当使用倍行高时，不加单位px

*文字属性简写：font:12px/1.5em "宋体";

font属性的简写：

说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

顺序: font-style | font-weight | font-size / line-height | font-family

(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。

(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值。

7、水平对齐方式

{text-align:left/right/center/justify（两端对齐中文不起作用）;}

8、垂直对齐方式很多情况不生效

{vertical-align:top/bottom/middle;}

9、文本修饰：

text-decoration:none/underline/overline/line-through/blink(高版本浏览器不支持blink属性)

说明：

none:没有修饰

underline:添加下划线

overline:添加上划线

line-through:添加删除线

blink：闪烁

10、border:3px solid red;

边框

border:粗细（数值+单位）线型（solid/dashed/dotted/double）颜色;

右边框

border-right:线形（solid/dashed/dotted/double）粗细（数值+单位）颜色;

左边框

border-left:线形（solid/dashed/dotted/double）粗细（数值+单位）颜色;

上边框

border-top:线形（solid/dashed/dotted/double）粗细（数值+单位）颜色;

下边框

border-bottom:线形（solid/dashed/dotted/double）粗细（数值+单位）颜色;

solid:实线，dashed:虚线，dotted:点状线，double:双线，

11、首行缩进：

{text-indent:value;}
说明：

1）text-indent可以取负值；

2）text-indent属性只对第一行起作用。

12、字间距

{letter-spacing:value;}

控制英文字母和汉字的字距。
13、词间距

{word-spacing:value;}

控制英文单词词距

14、文本流控制很少用（只支持IE浏览器）

{layout-flow:horizontal/vertical-ideographic;}
说明：

1）horizontal:自左向右
2）vertical-ideographic:自上而下

15、列表的样式

定义列表符号样式：

*list-style-type:disc(实心圆)/circle（空心圆）/square(实心方块 )none(去掉列表符号)；

*使用图片作为列表符号：

list-style-image:url(所使用图片的路径及全称);

*定义列表符号位置：

list-style-position:outside（默认）/inside;

list-style:none;去掉列表符号

注：列表符号都不用这种方式写，全部用插图、背景图来写，这个不稳定，位置不好控制

16、关于背景的css声明

1）背景颜色
语法：选择符{background-color:颜色值;}

2）背景图片的设置

语法：background-image:url(背景图片的路径及全称);

说明：

网页上有两种图片形式：

a）插入图片：属于网页内容，也就是结构。

b）背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

3）背景图片的显示原则

a）容器尺寸等于图片尺寸，背景图片正好显示在容器中;

b）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

c）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。

*背景图片平铺属性

语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

no-repeat:不平铺

repeat：平铺（默认）

repeat-x：横向平铺

repeat-y ：纵向平铺

5）背景图的固定
语法：

选择符{background-attachment:scroll(滚动)/fixed(固定);}

6）背景图片的位置
语法：

选择符{background-position:left/center/right/数值 top/center/bottom/数值;}

水平方向上的对齐方式（left/center/right）或值数值可以是负数

垂直方向上的对齐方式(top/center/bottom)或值

background-position:值1 值2;

两个值：第一个值表示水平位置的值，第二个值：表示垂直的位置。

当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

说明：向右方向，向下方向是负值

7）各属性的缩写
语法：

选择符{background：属性值1 属性值2 属性值3;}

例如：{background:#60c utl(链接地址) no-repeat 300px 300px}

调换位置不会出现问题，背景色最好加在背景图的前面前面

8）网页上常用的图片格式

a) jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )

b）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

c) png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的源文件格式，适用于颜色数量较少的图像;

17、浮动属性：

语法：float:none/left/right;

margin: 0;padding=0清空页面格式

margin:0 auto 居中

盒模型

一、盒模型的概念和组成

盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

标准盒子模型：

1）padding的使用方法

填充：padding在设定页面中一个元素内容到元素的边缘（边框）之间的距离，也称补白。

用法：

1.用来调整内容在容器的位置关系

2.用来调整子元素在父元素中的位置关系

注：padding属性需要添加在父元素上。

3.padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性

属性值的4种方式：

四个值：上右下左 {padding:10px 20px 30px 40px;} 记忆方法：顺时针

三个值：上左右下{padding:10px 20px 30px;}

两个值：上下左右{padding:10px 20px;}

一个值：四个方向padding:2px;（定义元素四周填充为2px）

说明：可单独设置一个方向填充，如padding-top（bottom、right、left）

2）border的使用方法

border：边框宽度边框风格边框颜色；缩写

例如：border:1px solid #60c;

边框：border，网页中很多修饰性线条都是有边框来实现的

边框宽度：border-width

边框颜色：border-color

边框样式：border-style:solid（dashed/dotted/double）

可单独设置一方向边框

如底边框border-bottom:边框宽度边框风格边框颜色

左边框border-left，右边框border-right，上边框border-top

3）margin的使用方法

边界：margin，在元素外边的空白区域，被称为边距

属性值的四种方式：

四个值：上右下左

三个值：上左右下

两个值：上下左右

一个值：四个方向。margin:2px 定义元素四边边界为2px

margin:2px 4px 定义上下边界为2px，左右边界为4px

margin:0 auto 定义元素上、下边界为0像素，在浏览器中横向居中

说明：可单独设置一个方向边界，如margin-top:10px;

4）盒子的实际大小（公式）：

宽=左右margin+左右border+左右padding+width

高=上下margin+上下border+上下padding+height

关于溢出

1）溢出属性（容器的）

overflow:visible/hidden（隐藏）/scroll/auto（自动）/inherit

visible：默认值，内容不会被修剪，会成现在元素框之外

hidden：内容会被修剪，并且其余内容是不可见的

scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容

auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其它的内容

inherit：规定应该从父元素集成overflow属性的值

2）空余空间

white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit

该属性用来设置如何处理元素内的空白

normal：默认值，空白会被浏览器忽略

pre：空白会被浏览器保留，其行为方式类似Html中的pre标签

nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止

pre-wrap：保留空白符序列，但是正常的进行换行

pre-line：合并空白符序列，但是保留换行符

inherit：规定应该从父元素集成white-space属性的值（IE浏览器都不支持此属性值）

3）文本溢出

text-overflow:clip/ellipsis

取值：

clip：不显示省略号（...），而是简单的裁切

ellipsis：当对象文本溢出时，显示省略号

说明：

text-overflow属性仅是“...”，当文本溢出时是否显示省略标记，并不具备其它的样式属性，要实现溢出时产生省略号的效果还需定义：

1、容器宽度 width:value

2、强制文本在一行内显示 white-space:nowrap

3、溢出内容为隐藏 overflow:hidden

4、溢出文本显示省略号 text-overflow:ellipsis

4)一个标记可以设置多个class名

语法：<标记 class=”名称1 名称2”></标记>

5）版权 ©

元素类型

一、XHTML元素分类

根据CSS显示分类，XHTML元素分为三种类型：块状元素，内联元素，可变元素

1）块状元素（block element）

1.块状元素在网页中就是以块的形式显示，所谓块状元素就是元素显示为矩形区域，常用的块状元素包括块div，dl，dt，dd，ol，ul，fieldset，h1-h6，p，form，hr，ifame，colgroup，table，tr，td等

2.默认情况下，块状元素都会占据一行，通俗的说，两个相邻的块状元素不会出现并列的现象：默认情况下，块状元素会按顺序自上而下排列。

3.块状元素都可以定义自己的宽度和高度

4.块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素。我们可以把这种容器比喻为一个盒子。

2）内联元素（inline element）（或者行内元素）

1.常见的内联元素，如：a，span，strong，b，i等

2.内联元素的表现形式是始终以行内逐个进行显示

3.内联元素没有自己的形状，不能定义它的宽度和高度、高度只能更具所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状

4.内联元素也会遵循盒模型基本原则，如，可以定义padding,border,margin,background等属性，但个别属性不能正确显示

3）可变元素

需要根据上下文关系确定块元素或者内联元素

4）元素类型的转换

盒子模型可以通过display属性来改变默认的显示类型

1.display属性与属性值（18个属性值）

display:block/inline/inline-block/none/list-item/table-header-group/table-footer-group;

作用：该属性设置或检索对象元素应该生成的盒模型的类型

说明：各属性值的作用

a）block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示

b）inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示

c）inline-block行内块元素显示：元素的内容以块状显示，与行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img，input。注：行内的块之间默认会有一段空隙，如果要删除这个空隙，给元素添加float:left;

d）当元素设置了float属性后，就相当于给该元素加了display:block; 属性

e）none此元素不会被显示

f）list-item 将元素转换成列表，li的默认类型

g）大部分块元素display属性默认为block，其中列表的默认值为list-item。大部分内联元素的idsplay属性值默认为inline，其中img，input默认为inline-block

超链接垂直居中

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

div{width:300px;height:300px;background-color:#ccc;text-align:center;}

a{display:inline-block;vertical-align:middle}

span{display:inline-block;height:100%;vertical-align:middle}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

浏览器兼容

1）为什么会出现浏览器兼容问题？

由于各大主流浏览器不同的厂家开发，所有的核心架构和代码也很难重合，这就为各种莫名其妙的bug（代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

2）关于浏览器

1.主流浏览器

Internet Explorer、Safari、Mozilla Firefox、Google Chrome、Opera、百度、360、搜狗、遨游

2.最早的浏览器

Mosaic / Netscape Navigator（网景领航者）（1994-2008）简称NN

3.浏览器大战

第一次浏览器大战发生在上个世纪90年代，微软发布了它的IE浏览器，和网景公司的Netscape Navigator大打出手

第二次浏览器大战发生在20世纪。

4.浏览器内核及代表作品

浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的“内核”

a) 五大浏览器内核

·Trident / (MSHTML) （三叉戟、三叉线、三尺鱼叉） IE

·Gecko （壁虎）火狐

·Presto （迅速的）Opera

·Webkit （Safari内核，Chrome内核原型，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）

·Blink （由Google 和 Opera Software开发的浏览器排版引擎）

b) 五大浏览器内核代表作品

·Trident: IE、 Maxthon（遨游）、腾讯、Theworld世界之窗、360浏览器

代表作品IE，因为捆绑在Windows中，所以战友极高的市场份额，又称IE内核是MSHTML，此内核只能应用于windows平台，且是不开源的。

·Gecko：代表作品Mozilla Firefox是开源的，它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。

·Webkit：代表作品Safari、Chrome，是一个开源项目

·Presto：代表作品Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界上公认的渲染速度最快的引擎。

·Blink：由google和opera software开发的浏览器排版引擎，2013年4月发布。

3）主流浏览器市场份额

4）CSS Bug、CSS Hack和Filter

1.CSS bug：CSS样式在个浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS Bug。

2.CSS Hack：CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁，有些人更喜欢使用patch（补丁）来描述这种行为。

3.Filter：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Fliter是一种用来过滤不同浏览器的Hack类型

使用Hack带来的一些副作用

降低了CSS代码的可读性，增加了代码的负担

设计CSS Hack和Filter通常有两种方法

a) 一种是利用浏览器自身的Bug，来隐藏或显示样式或声明

b) 另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式

5）IE6常见CSS解析bug及hack

1.图片间隙

a) div中的图片间隙（该bug出现在IE6及更低版本中）

描述：在div中插入图片时，图片会将div下方撑大三像素

hack1：将div和img写在同一行上<div><img src=” ” /></div>

hack2：将img转为块状元素，给img添加声明display:block;

b) dt、li中图片间隙（IE6）

hack：给dt、li添加声明：overflow:hidden;

2.默认值（IE6）

描述：在IE6及更低版本中，部分块元素拥有默认高度（低于18px高度）

hack1：给元素添加声明：font-size:0;

hack2：给元素添加声明：overflow:hidden;

3.双倍浮向（IE6）

描述：在IE6及更低版本浏览器在解析浮动元素时，会错误的把浮向边边界加倍显示

hack：给浮懂元素添加声明：display:inline;

4.表单行高不一致（IE，MOZ，C，O，S）

描述：表单元素行高对齐方式不一致

hack：给表单元素添加声明：float:left;

5.按钮元素默认大小不一

描述：个浏览器中按钮元素大小不一致

hack1：统一大小/（用a标签模拟）

hack2：input外边套一个标签，在这个标签里写按钮的样式，把input的边框和背景色去掉。

hack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可

6.百分比bug

描述：IE低版本浏览器在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%

hack：给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。

clear:left; 清除左浮动

clear:both; 清除两边的浮动

7.鼠标指针bug

描述：cursor属性的hand属性值只有在ie6以下浏览器识别，其他浏览器不识别该声明，cursor属性的pointer属性值IE6.0及以上版本及其他内核浏览器都识别该声明

hack：如果统一某鼠标指针形状为手型，应添加声明：cursor:pointer;

鼠标的样式

auto默认

crosshair加号

text文本

wait等待

help帮助

progress过程

inherit继承

move移动

ne-resize向上或向右移动

pointer手形

8.透明属性

IE浏览器写法：filter:alpha(opacity=value); 取值范围1-100

兼容其他浏览器写法：opacity:.value（value取值范围是0-9；或者在点前面加0，例如0.1, 0.2 ~ 0.9）

9.过滤器（filter）
a) 下划线属性过滤器

当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性，而忽略立刻这个声明。但是在IE6及更低版本浏览器中会继续解析这个规则。

语法：选择符{_属性:属性值;}

b) !important关键字过滤器

它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其他标准浏览器。

语法：选择符{属性:属性值!important;}

c) *属性过滤器

当在一个属性前增加了*后，该属性只能被IE7以下浏览器识别，其他浏览器忽略该属性的作用。

语法：选择符{*属性:属性值;}

定位属性

position定位属性，检索对象的定位方式

一、语法：position:static/absolute/relative/fixed

取值：

1、static：默认值，无特殊定位，对象遵循html原则

2、absolute：绝对定位。将对象从文档流中脱离出来，使用left/right/top/bottom等属性相对其最接近的一个、并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据body对象，而其层叠通过z-index属性定义

例如 position:absolute;left:10px;top:0;

相对于父元素的位置来定义新位置

多个大小一样的div可以设置在同一个位置，让其层叠起来

当移动了之后，原本的位置不占位置，其他元素会填充原本的位置

3、relative：相对定位。对依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置

相对于自己原本的位置来定义新位置

当移动了之后，原本的位置还继续占位置，其他元素不会填充原本的位置

4、fixed：固定定位，对象定位遵从绝对定位方式（absolute）；但是要遵从一些规范。支持性不好

二、绝对定位和相对定位的区别

1、参照物不同，绝对定位的参照物是包汉块，相对定位的参照物是元素本身位置

2、绝对定位将对象从文档流中脱离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素任然占据原来的空间。

三、包含块的概念和作用

包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考

默认状态下，body是一个大的包含块，所有绝对定位都是根据窗口来自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义元素为包含块：给绝对定位元素的父元素添加声明position:relative;

四、定位元素层叠属性

z-index:auto/number;

检索或设置对象的层叠顺序

auto：默认值，遵从其父对象

number：无单位的整数值，可以为负数

说明：

1.较大number值的对象会覆盖在较小number值的对象之上，如两个绝对定位对象的此属性值是相同的number，则依据他们在html文档中声明的顺序层叠（number值大的覆盖在上，如果值相等，按照html中的书写顺序，写在后面的覆盖在上面）

此属性仅仅作用于position属性值为relative或absolute的对象。

例如 position:relative;z-index:10;

五、命名锚点链接的应用

定义：是网页制作中超链接的一种，又称锚记。命名锚记像一个迅速定位器一样是一种页面内的超链接，运用相当普遍。

命名锚点的应用：

1、命名锚点的作用：L在同一页面内的不同位置进行跳转

2、给元素定义命名锚记名

语法：<标记 id=”命名锚记名”></标记>

3、命名锚记链接

语法：<a href=”#命名锚记名称”></a>

CSS属性扩展

一、圆角切图（圆角的框）

1、纯CSS书写

2、切图拼接（ps）

二、flash和marquee（滚动字幕）

1、插入flash

1）语法：

说明：flash源文件格式.fla,

导出影片为.swf,

创建播放器格式为.exe.

gif格式：.gif

2）将flash背景设置为透明

给<embed>标记添加属性：wmode="transparent"

3）IE中不显示flash,可做如下操作：

A.下载安装flash player;

B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。

2、滚动字幕的应用：

<marquee

behavior（行为）="scroll(滚动)/alternate（晃动）"direction（方向）="up(

从下向上)/down（从上向下）/left（从右向左）/right（从左向右）"

scrollamount（滚动速度）="value"height="value(上下滚动范围)"width=""(左右滚动范围)>
内容

flash

</object>

</div>

marquee

欢迎大家来学习HTML5课程！！！

</marquee>

三、滚动条

1、overflow内容溢出时的设置

属性：

overflow 水平及垂直方向内容溢出时设置

overflow-x 水平方向内容溢出时设置

overflow-y 垂直方向内容溢出时设置

以上山歌属性设置的属性值：

visible、scroll、hidden、auto

visible默认值。使用该值时，无论设置的width和height的值是多少，其中的内容无论是否超出范围豆浆杯强制显示

hidden效果与visible相反。任何超出width和height的内容都会不可见

scroll无论内容是否超越范围，都将显示滚动条

auto当内容超出范围时，显示滚动条，否则不显示

应用：

a) 没有水平滚动条 overflow-x:hidden

b) 没有垂直滚动条 overflow-y:hidden

c) 没有滚动条 overflow-x:hidden;overflow-y:hidden或overflow:hidden

d) 自动显示滚动条 height:100px;width:100px;overflow:auto;

2、自己定义滚动条的颜色

Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
}

以上适用与<body>、<div>、<textarea>、<iframe>

CSS Sprites（图片整合技术）

一、CSS Sprites原理（图片整合技术）

1）将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。

2）图片整合的优势

1、通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度

2、通过整合图片来减小图片的体积

二、CSS Sprites的实现方法

1）滑动门技术

1、什么是滑动门

滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果

2、滑动门特征：

通过滑动门技术，可以是CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性

三、宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。元素自适应在网页布局中非常中重要，它能够使网页显示更灵活，可以适应不同设备、不同窗口和不同分辨率下显示。

1）宽度自适应

元素宽度设置为100%。（块元素宽度默认为100%）

2）高度自适应

1.元素高度自适应窗口高度

设置方法：html,body{height:100%}

2.自适应元素高度：height:100%

设置背景图大小自适应 background-size:100% 100%

3.元素具备最小高度的自适应

min-height属性，最小高度属性（IE6浏览器不识别该属性）
hack1：min-height:value; _height:value;

例如：

高版本浏览器写属性 min-height:200px;

IE6则添加属性 _height:200px;

hack2：min-height:value; height:auto!important; height:value（建议用这个）

注：height属性在IE6里面类似min-height作用

加了!important，高版本只识别!important前height的高度，而IE6不能识别这个，只会识别!important后height的高度

min-height最小高度

max-height最大高度

min-width最小宽度

max-width最大宽度

注：IE6及以下版本不识别该属性

4.浮动元素父元素高度自适应（高度塌陷）

hack1：给父元素添加声明over:hidden;

hack2：在浮动元素下添加一个空div，并给该元素添加声明：clear:both;height:0;overflow:hidden;

hack3：万能清除浮动法（父元素加）

:after{content:”.”;display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}

visibility:hidden隐藏/visible可见

visibility:hidden和display:none的区别：

visibility:hidden会使对象不可见，但该对象在网页所占的空间没有改变，等译流出了一块空白区域，而display:none会使这个对象彻底消失。

伪对象选择符

一、伪对象选择符：

1）:after与content属性一起使用，定义在对象后的内容

如 div:after{content:url(logo.jpg);}

div:after{content:”文本内容”;}

2）:before与content属性一起使用，定义对象前的内容

如 div:before{content:”放其前放内容”}

3）:first-letter{ }定义对象内第一个字符

说明：该伪元素只能用于块级元素

4）:first-line{ }定义对象内第一行的样式

说明：该伪元素只能用于块级元素。IE6以下版本浏览器不支持伪对象选择符。

高级表单、表格

一、表单高级

表单的组成：

表单域<form name=” ” method=”get/post” action=” “></form>

表单控件（表单元素）<input type=”text” value>

提示信息

1）表单字段集

<fieldset></fieldset> field领域 set集合

功能：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本

fieldset元素可以嵌套，在其内部可以设置多个fieldset对象

2）字段集标题

<legend></legend> legend ['ledʒ(ə)nd]说明

功能：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。

3）提示信息标签

<label for=”绑定空间id名”></label> label标签

功能：label元素用来定义标签，为页面上其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性这定位与该控件属性的id属性值相同

例如

4）表单元素

1、上传文件框每个浏览器样式不同

文件域<input type=”file” />

2、图像域（图片提交按钮）支持性不好，不建议使用

二、表格高级

表格作用：显示属性

1）关于表格的CSS属性

1、单元格间距（该属性必须给table添加）

border-spacing:value;

2、合并相邻单元格边框

border-collapse:separate（边框分开）/collapse（边框合并）

collapse [kə'læps] 倒塌，瓦解 ['sep(ə)reɪt]

3、无内容单元格显示、隐藏给tabel加此属性

empty-cells:show/hide;

4、表格布局算法（加快运行的速度）

table-layout:auto/fixed（固定宽高，不会随内容多少改变单元格宽高）

5、表格标题

<caption>标题内容</caption> caption标题

表格标题位置：caption-side:top/right/left/bottom

说明：left、right位置只有火狐识别。top、bottom只有IE6以上版本支持。低版本只识别top，不支持其他属性

6.表格布局元素

a) 表格基本组成

table表格 tr行 td列

th：表格列标题（放在tr里） th特点：默认居中加粗

重要属性：

①colspan=”value”合并列

②rowspan=”value”合并行

③valign=”top/middle/bottom/baseline”垂直对齐方式

④rules=”groups/rows/cols/all/none”添加组分隔线写在table中要给td设置宽高

说明：

rows：位于行之间的线条

cols：位于列之间的线条

all：位于行和列之间的线条

none：没有线条

groups：位于行组和列组之间的线条

b) 数据行分组

<thead></thead>表头

<tbody></tbody?>表体

<tfoot></tfoot>表尾

说明：一个table中，只能包含一个thead和一个tfoot，可包含多个tbody

c) 数据列分组

span默认数为1

说明：

①col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组

②span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组

③可以通过给table添加rules=”groups”属性来给分组列添加组分割线。

注：col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来决定表格内容部分分隔线rules应该处于的位置，而col没有这个功能。

两者区别：

<colgroup></colgroup>必须为对标签形式，可以独立使用；

<col>必须为但标签形式，不可以写成<col></col>，需要包含在<colgroup></colgroup>内部。

重要说明：

FF、Chrome、Safari仅支持colgroup元素的span和width属性；

只有IE6、IE7、Opera支持align属性，IE8+不支持"

css滤镜拓展内容

一、CSS滤镜

二、图片高级-透明图片

（一）网页上常用的图片格式（jpg,png,gif）

支持透明：gif，png(png8,png24,png32)

（二）网页上的图片形式（插入图片和背景图）

（三）插入图片透明

A.图片背景透明：

.gif：支持

.png8：支持(建议使用)

.png24:IE6不支持，其它内核浏览器支持（PS制作)

.png32：IE6不支持，其它内核浏览器支持

B.图片本身透明

.png24:IE6不支持（ps制作)，可用filter兼容。

.png32：IE6不支持，可用filter兼容。

半透明插入图片兼容IE6做法:（使用png32或PS制作的png24半透明图片）：

样式：

.alpha{display:none;_display:inline-block;filter:progid:DXImagn eTransform.Microsoft.AlphgeLoaderaIma

(src="图片路径",sizingMethod="scale");width:value;height:value;}

.ie6hidden{_display:none;}

</style>

结构：

C、css3新增透明属性

语法：background:rgba(value,value,value,value);

说明：前三个值是RGB的颜色值，最后一个是透明的数值。

CSS文档统筹

1.整站里相同的CSS样式提取到一个样式表里，各个页面调用相同的样式文件即可

2.网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件

一、根据页面类型分离文件

二、根据功能模块分离文件

三、根据标签类型分离文件

四、根据设备类型分离文件

五、根据代码规模综合分离文件

Keywords关键字，后面橙色字体部分设置需要的关键字，注意关键字不要是已有的网站名多个关键字之间用“,”隔开

Description 对本页的一个描述

posted @ 2016-07-06 11:03 loewe0202 阅读(208) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

loewe0202

html/css

公告