《信息发布与网页设计.ppt》由会员分享，可在线阅读，更多相关《信息发布与网页设计.ppt（17页珍藏版）》请在三一文库上搜索。
1、信息发布与网页设计 信息学院 信息发布与网页设计课题组 * CSS简介 n随着Internet的迅猛发展，HTML被广泛应用 ，上网的人们当然希望网页做得漂亮些，因此 HTML排版和界面效果的局限性日益暴露出来 。 nCSS可算是网页设计的一个突破，它解决了网 页界面排版的难题。可以这么说，HTML的标 签主要是定义网页的内容(Content)，而CSS 决定这些网页内容如何显示(Layout)。 CSS简介 nCSS的英文是Cascading Style Sheets， 中文可以翻译成串联式（层叠）样式表。 nCSS按其位置可以分成三种： o内嵌样式(Inline Style) o内部样式表
2、 (Internal Style Sheet ) o外部样式表(External Style Sheet) CSS简介 nCSS第一个字母，是Cascading，意为串联。 它是指不同来源的样式(Styles)可以合在一起 ，形成一种样式。 nCascading的顺序是： o浏览器缺省(browser default )(优先级最低) o外部样式表(Extenal Style Sheet) o内部样式表(Internal Style Sheet) o内嵌样式表(Inline Style)(优先级最高) CSS的优点 n网页维护方便，网页内容和显示分离。 n缩短下载时间，避免标记的重复下载。 n
3、样式功能强大，样式效果丰富。 n可以一处指定，多处使用。 n文件易读性好。 CSS样式格式 n选择符属性：值 n选择符属性1：值1；属性2：值2 nCSS注释 o为了方便你自己或者他人日后更好地理解你的CSS 代码，你可以写CSS代码注释。CSS代码注释以 /*开头 ，以*/结束。 CSS声明方式 n基本声明方式：pfont-size:36px n分项声明方式： opfont-size:36px opcolor:#FF0000 n集体声明方式： oPfont-size:36px; color:#FF0000 oP,h1font-size:36px; color:#FF0000 创建CSS样式
4、n在css样式面板上单击鼠标右键 ncss样式面板右上角的下拉菜单 ncss样式面板下方的“新建css样式”按钮 创建CSS样式 nCSS样式表类型 o类：可以被任意标签通过Class属性引用 o标签：重新定义某特定标签的外观 o高级：设定链接或特定ID的属性 CSS应用 n内嵌样式的使用方法： n将STYLE属性直接加在个别的元件标签里， 元件(标签) STYLE=“属性1: 值1; 属性2: 值2; . n例如： TD STYLE=“COLOR:BLUE; font- size:9pt; font-family: “楷体”; line- height:150% 这种用法的优点 是可灵巧应用
5、样式於各标 签中，但是缺点则是没有整篇文件的“统一性” 。 CSS应用 n内部样式表，写在HTML的里面的。内部样式表只对所 在的 网页有效。 n例如： STYLE TYPE=“text/css“ !- BODY color: BLUE; background: #ffffff; font-size: 9pt TD, P COLOR: GREEN; font-size: 9pt - /STYLE CSS应用 n将样式规则写在STYLE./STYLE标 签之中。 n通常是将整个的 STYLE./STYLE 结构写在网页的HEAD /HEAD部份 之中。这种用法的优点就是在於整篇文件的统 一性，只
6、要是有声明的的元件即会套用该样式 规则。缺点就是在个别元件的灵活度不足。 CSS应用 n外部样式表 n将样式规则写在.css的样式档案中，再以LINK 标签引入。 n假设我们把样式规则存成一个example.css的档 案，我们只要在网页中加入 LINK REL=STYLESHEET TYPE=“text/css” HREF=“example.css” n即可套用该样式档案中所制定好的样式了。 通常是 将LINK标签写在网页的head/head部 份之中。这种用法的优点就是在於可以把要套用相 同样式规则的数篇文件都指定到同一个样式档案即 可。缺点也是在个别文件或元件的灵活度不足。 CSS应用
7、n使用import引入，跟LINK用法很像，但必放在STYLE./STYLE 中。 nSTYLE TYPE=“text/css” !- import url(引入的的位址、路径与档名); - /STYLE n例如： STYLE TYPE=“text/css“ !- import url(http:/yourweb/ example.css); - /STYLE 创建CSS样式 nCSS样式定义的冲突 o同一个标签的相同属性被多处定义时，以最后定义 的为准。 o页面元素被多个标签作用时，如果标签样式定义有 冲突，以距离页面元素最近的标签样式为准。 o一个标签中，如果既有用HTML定义的样式，也有 通过Class引用的样式，则以Class引用的样式为 准。 创建CSS样式 nCSS编辑器 o类型 o背景 o区块（段落文字） o方框（图片、文字） o边框（表格） o列表（有序、无序列表） o定位（层） o扩展（CSS滤镜只适合图像、表格、层，不适合直 接作用于文字） 创建CSS样式 n应用CSS样式 n管理CSS样式 o在CSS样式面板上右键单击，可以“修改”、“复制 ”、“删除”、“附加样式表”等 o在CSS样式面板右上方的下拉菜单，可以“编辑” 、“删除”、 “附加样式表” o在CSS样式面板下方，利用编辑、删除、 附加样 式表 按钮