2_设计web页面.pptVIP

第二章 设计Web页面 要创建漂亮、格式统一的页面，需要使用某种方法来改变页面元素在浏览器中的表现。 最常使用的方法是使用CSS（Cascading Style Sheet，层次样式表） 本章内容： 为什么要使用CSS CSS语言简介及如何编写CSS 在VWD中使用CSS ２.1 为什么要使用CSS 从Internet出现开始，Web页面主要由文本和图像构成。文本使用纯HTML格式化，如用strong标记加粗，用font标记设置字体格式。如： p font face=Arial size=+2 color=black Good afternoon , Class! /font/p HTML格式化页面存在的问题 HTML提供的样式化页面的选项很有限 数据和格式混合在一起 HTML不容易在用户浏览页面时动态修改格式 页面中的附加标记大大增加了页面的大小 2.2 CSS简介 head id=Head1 runat=server titleCssDemo/title style type=text/css h1 { font-size:20px; color:Green; } p{color:Blue; font-style:italic;} .RightAligned{ text-align:right;} /style /head body form id=form1 runat=server 　　 h1 Welcome to this CSS Demo page/h1 p CSS makes it super easy to style your pages./p p class=“RightAligned” With little code, you can quickly change the looks of a page.　/p 　/form /body 一、４种常见的选择器格式 1）Universal选择器 * { font-family：Arial； } 适用于页面的所有元素，可用来进行全局设置，比如全页字体。 ４种常见的选择器格式 2）Type选择器 h1 { color: Green; font-size: 36px; } 指向某种特定类型的HTML元素。Type选择器不区分大小写，因此所设定的格式可用于H1或h1类型。 ４种常见的选择器格式 3）ID选择器 #IntroText {font-style: italic; } ID选择器以“#”为前缀，指向具有特定ID的HTML元素。ID选择器区分大小写，要保证ID属性和选择器总使用一致的大小写。 例：下面第一行将会显示斜体： span id=IntroText I am italic because i have the right ID/span br / span id=BodyText I am NOT italic/span ４种常见的选择器格式 4）Class选择器 .HighLight { font-weight: bold; color:Red;} Class选择器以“.”为前缀，指向具有特定Class的HTML元素。当需要赋予若干不相关的元素相同格式时，使用这个选择器就非常方便。Class选择器也区分大小写。 例：下面两行中class为HighLight的文字会应用上面的设置： pHELLO,GOOD span class=HighLight Afternoon/span!/p Please a href=mailto:abc@163.com class =HighLight send a mail/a to me. 组合和合并选择器 1）CSS允许组合多个选择器，用逗号将它们隔开 h1,h2,h3,h4 { color:Blue;} p,#BodyText,.HighLight { background-color:Gray; } 组合和合并选择器 2）CSS还允许为同时满足多个条件（选择器）的HTML设置格式，此时这多个选择器间用空格隔开 p .HighLight { font-size:32px ; } 二、常见的CSS属性 1、颜色(color)和背景(background)属性 1) color属性 color：Red; 2) backg