第5章--网页样式表CSS.pptVIP

网站规划与网页设计 样式 样式：样式就是格式，在网页中，文字的大小、色彩及图片位置等，都是设置显示内容的样式。 普通样式是系统已经设置好的，我们只需要直接应用就可以了； CSS样式需要先定义，然后才可使用。 应用普通样式 选定文本，使用Text菜单中Style子菜单中的相应选项所代表的样式 例1 中国 Chinese 例2 欢迎来到织梦地带！ CSS样式定义 由W3C（World Wide Web Consortium）组织制定的，用来指定段落、文字等网页素材的格式。 Cascading Style Sheet（层叠样式表或级联样式表） 是用于弥补编写网页的html语言的很多不足，使网页格式更容易得到控制。 CSS样式定义 控制网页元素设计风格 改变CSS样式，使用该样式格式化的文本也会相应改变。 制作动态链接效果 STYLE type=text/cssA:link { COLOR: #003399 } A:visited { COLOR: #800080 } A:hover { COLOR: #ff3300 } /STYLE 制作动态链接效果 a:active:超级链接的激活状态 a:hover:鼠标移动到超级链接上的状态 a:link:超级链接的链接状态 a:visited:超级链接访问过的状态。 5.1 CSS的用途  使页面的字体变得更漂亮，更容易编排，使页面效果真正达到赏心悦目。 用户可以轻松地控制页面的整体风格和布局。 利用CSS，我们可以定义HTML或XML文档中元素的显示效果，包括元素的位置、颜色、背景、边空、字体、排版格式等等。 只要修改这个CSS文件中相应的代码，整个站点的所有页面都会随之发生变动。 在页面中插入样式表的方法 内部样式 行内样式 链入外部样式 导入外部样式。 HTML HEAD STYLE H1{color:red; } .myclass{color:green} H2.myclass{color:blue} #myid{color:brown} /STYLE /HEAD BODY H1这是红色的一号标题。/H1 P class=myclassmyclass类中的正文是绿色的。/P H2 class=myclass但myclass类中的二号标题是蓝色的。/H2 P class=myclass id=myid以myid为标识的正文则是棕色的。/P /BODY /HTML !DOCTYPE html PUBLIC -//W3c//DTD XHTML 1.0 Transitional//EN /TR/xhtml/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312/ titleform/title style h1{color:red; } .myclass{color:green} h2.myclass{color:blue} #myid{color:brown} /style /head body h1这是红色的一号标题。/h1 p class=myclassmyclass类中的正文是绿色的。/p h2 class=myclass但myclass类中的二号标题是蓝色的。/h2 p class=myclass id=myid以myid为标识的正文则是棕色的。/p /body /html 外部文件方式 将css样式定义在一个外部的文件，而不是定义在页面文件内，这样可使很多网页公用同样的样式。 使用css样式时，最好用链接外部css文件的方法，这样能做到网站的风格统一和便于更新。 外部文件方式 h2{color:blue;text-align:center;font-weight:bold} p{color:red;background-color:#ffff00;text-indent:2em} hr{color:green;width:80%;height:3} body{background-image:url(dsfsdf.jpg)} 外部文件方式 !DOCTYPE html PUBLIC -//W3c//DTD XHTML 1.0 Transitional//EN /TR/xhtml/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Co