信息发布和网页相关设计

1、信息发布和网页相关设计n 随着随着Internet的迅猛发展，的迅猛发展，HTML被广泛应用，被广泛应用，上网的人们当然希望网页做得漂亮些，因此上网的人们当然希望网页做得漂亮些，因此HTML n CSS可算是网页设计的一个突破，它解决了网可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，页界面排版的难题。可以这么说，HTML的标的标签主要是定义网页的内容签主要是定义网页的内容(Content)，而，而CSS决定这些网页内容如何显示决定这些网页内容如何显示(Layout)。n CSS的英文是的英文是Cascading Style Sheets，中文可以翻译成串联式（层叠）样式表。

2、中文可以翻译成串联式（层叠）样式表。n CSS按其位置可以分成三种：按其位置可以分成三种：o 内嵌样式(Inline Style) o 内部样式表 (Internal Style Sheet ) o 外部样式表(External Style Sheet)n CSS第一个字母，是第一个字母，是Cascading，意为串联。，意为串联。它是指不同来源的样式它是指不同来源的样式(Styles)可以合在一起，可以合在一起，形成一种样式。形成一种样式。n Cascading的顺序是：的顺序是：o 浏览器缺省(browser default )(优先级最低) o 外部样式表(Extenal Style S

3、heet) o 内部样式表(Internal Style Sheet) o 内嵌样式表(Inline Style)(优先级最高)n 网页维护方便，网页内容和显示分离。网页维护方便，网页内容和显示分离。n 缩短下载时间，避免标记的重复下载。缩短下载时间，避免标记的重复下载。n 样式功能强大，样式效果丰富。样式功能强大，样式效果丰富。n 可以一处指定，多处使用。可以一处指定，多处使用。n 文件易读性好。文件易读性好。n 选择符选择符属性：值属性：值n 选择符选择符属性属性1：值：值1；属性；属性2：值：值2n CSS注释注释o 为了方便你自己或者他人日后更好地理解你的为了方便你自己或者他人日后更好

4、地理解你的CSS代码，你可以写代码，你可以写CSS代码注释。代码注释。CSS代码注释以代码注释以/*开头开头 ，以，以*/结束。结束。n 基本声明方式：基本声明方式：pfont-size:36pxn 分项声明方式：分项声明方式： o pfont-size:36pxo pcolor:#FF0000n 集体声明方式：集体声明方式：o Pfont-size:36px; color:#FF0000o P,h1font-size:36px; color:#FF0000n 在在css样式面板上单击鼠标右键样式面板上单击鼠标右键n css样式面板右上角的下拉菜单样式面板右上角的下拉菜单n css样式面板下方

5、的样式面板下方的“新建新建css样式样式”按钮按钮n CSS样式表类型样式表类型o 类：可以被任意标签通过类：可以被任意标签通过Class属性引用属性引用o 标签：重新定义某特定标签的外观标签：重新定义某特定标签的外观o 高级：设定链接或特定高级：设定链接或特定ID的属性的属性n 内嵌样式的使用方法：内嵌样式的使用方法：n 将将STYLE属性直接加在个别的元件标签里，属性直接加在个别的元件标签里， 元件元件(标签标签) STYLE=属性属性1: 值值1; 属性属性2: 值值2; . n 例如：例如：TD STYLE=“COLOR:BLUE; font-size:9pt; font-family

6、: “楷体楷体”; line-height:150% 这种用法的优点这种用法的优点 是可灵巧应用样式於各标是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的签中，但是缺点则是没有整篇文件的“统一统一性性”。 n内部样式表，写在内部样式表，写在HTML的的里面的。内部样式表只对所里面的。内部样式表只对所 在的在的网页有效。网页有效。 n例如：例如： STYLE TYPE=text/css !- BODY color: BLUE; background: #ffffff; font-size: 9pt TD, P COLOR: GREEN; font-size: 9pt - /STYLEn 将

7、样式规则写在将样式规则写在STYLE./STYLE标标签之中。签之中。n 通常是将整个的通常是将整个的 STYLE./STYLE结构写在网页的结构写在网页的HEAD /HEAD部份部份之中。这种用法的优点就是在於整篇文件的统之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。规则。缺点就是在个别元件的灵活度不足。 n 外部样式表外部样式表n 将样式规则写在将样式规则写在.css的样式档案中，再以的样式档案中，再以LINK标签引入。标签引入。 n 假设我们把样式规则存成一个假设我们把样式规则

8、存成一个example.css的档的档案，我们只要在网页中加入案，我们只要在网页中加入LINK REL=STYLESHEET TYPE=“text/css” HREF=“example.css” n 即可套用该样式档案中所制定好的样式了。即可套用该样式档案中所制定好的样式了。 通常是通常是将将LINK标签写在网页的标签写在网页的head/head部部份之中。这种用法的优点就是在於可以把要套用相份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。可。缺点也是在个别文件或元件的

9、灵活度不足。 n使用使用import引入，跟引入，跟LINK用法很像，但必放在用法很像，但必放在STYLE./STYLE 中。中。 nSTYLE TYPE=“text/css” !- import url(引入的的位址、路径与档名引入的的位址、路径与档名);- /STYLE n例如：例如： STYLE TYPE=text/css !- import url( :/yourweb/ example.css); - /STYLE n CSS样式定义的冲突样式定义的冲突o 同一个标签的相同属性被多处定义时，以最后定义同一个标签的相同属性被多处定义时，以最后定义的为准。的为准。o 页面元素被多个标签作

10、用时，如果标签样式定义有页面元素被多个标签作用时，如果标签样式定义有冲突，以距离页面元素最近的标签样式为准。冲突，以距离页面元素最近的标签样式为准。o 一个标签中，如果既有用一个标签中，如果既有用HTML定义的样式，也有定义的样式，也有通过通过Class引用的样式，则以引用的样式，则以Class引用的样式为引用的样式为准。准。n CSS编辑器编辑器o 类型类型o 背景背景o 区块（段落文字）区块（段落文字）o 方框（图片、文字）方框（图片、文字）o 边框（表格）边框（表格）o 列表（有序、无序列表）列表（有序、无序列表）o 定位（层）定位（层）o 扩展（扩展（CSS滤镜只适合图像、表格、层，不适合直滤镜只适合图像、表格、层，不适合直接作用于文字）接作用于文字）n 应用应用CSS样式样式n 管理管理CSS样式样式o 在在CSS样式面板上右键单击，可以样式