信息发布与网页设计.ppt

《信息发布与网页设计.ppt》由会员分享，可在线阅读，更多相关《信息发布与网页设计.ppt（17页珍藏版）》请在三一办公上搜索。

1、信息发布与网页设计,信息学院信息发布与网页设计课题组2023年7月12日星期三,CSS简介,随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的标签主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。,CSS简介,CSS的英文是Cascading Style Sheets，中文可以翻译成串联式（层叠）样式表。CSS按其位置可以分成三种：内嵌样式(Inline Style)内部样式表(Intern

2、al Style Sheet)外部样式表(External Style Sheet),CSS简介,CSS第一个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。Cascading的顺序是：浏览器缺省(browser default)(优先级最低)外部样式表(Extenal Style Sheet)内部样式表(Internal Style Sheet)内嵌样式表(Inline Style)(优先级最高),CSS的优点,网页维护方便，网页内容和显示分离。缩短下载时间，避免标记的重复下载。样式功能强大，样式效果丰富。可以一处指定，多处使用。文件易读

3、性好。,CSS样式格式,选择符属性：值选择符属性1：值1；属性2：值2CSS注释为了方便你自己或者他人日后更好地理解你的CSS代码，你可以写CSS代码注释。CSS代码注释以/*开头，以*/结束。,CSS声明方式,基本声明方式：pfont-size:36px分项声明方式：pfont-size:36pxpcolor:#FF0000集体声明方式：Pfont-size:36px;color:#FF0000P,h1font-size:36px;color:#FF0000,创建CSS样式,在css样式面板上单击鼠标右键css样式面板右上角的下拉菜单css样式面板下方的“新建css样式”按钮,创建CSS样式

4、,CSS样式表类型类：可以被任意标签通过Class属性引用标签：重新定义某特定标签的外观高级：设定链接或特定ID的属性,CSS应用,内嵌样式的使用方法：将STYLE属性直接加在个别的元件标签里，元件(标签)STYLE=属性1:值1;属性2:值2;.例如：TD STYLE=“COLOR:BLUE;font-size:9pt;font-family:“楷体”;line-height:150%这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的“统一性”。,CSS应用,内部样式表，写在HTML的里面的。内部样式表只对所 在的网页有效。例如：STYLE TYPE=text/css!-

5、BODY color:BLUE;background:#ffffff;font-size:9pt TD,P COLOR:GREEN;font-size:9pt-/STYLE,CSS应用,将样式规则写在STYLE./STYLE标签之中。通常是将整个的 STYLE./STYLE结构写在网页的HEAD/HEAD部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。,CSS应用,外部样式表将样式规则写在.css的样式档案中，再以LINK标签引入。假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入LINK RE

6、L=STYLESHEET TYPE=“text/css”HREF=“example.css”即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的head/head部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。,CSS应用,使用import引入，跟LINK用法很像，但必放在STYLE./STYLE 中。STYLE TYPE=“text/css”!-import url(引入的的位址、路径与档名);-/STYLE 例如：STYLE TYPE=text/css!-import url(http:/y

7、ourweb/example.css);-/STYLE,创建CSS样式,CSS样式定义的冲突同一个标签的相同属性被多处定义时，以最后定义的为准。页面元素被多个标签作用时，如果标签样式定义有冲突，以距离页面元素最近的标签样式为准。一个标签中，如果既有用HTML定义的样式，也有通过Class引用的样式，则以Class引用的样式为准。,创建CSS样式,CSS编辑器类型背景区块（段落文字）方框（图片、文字）边框（表格）列表（有序、无序列表）定位（层）扩展（CSS滤镜只适合图像、表格、层，不适合直接作用于文字）,创建CSS样式,应用CSS样式管理CSS样式在CSS样式面板上右键单击，可以“修改”、“复制”、“删除”、“附加样式表”等在CSS样式面板右上方的下拉菜单，可以“编辑”、“删除”、“附加样式表”在CSS样式面板下方，利用编辑、删除、附加样式表 按钮,