Web应用程序客户端界面设计_第4章.ppt

1李健Email: 第四章第四章 CSSCSS基础基础 21-224-2复习（第一章）复习（第一章）u应用计算演变应用计算演变主机主机/哑终端模式哑终端模式 c/s模式模式 b/s模式模式uWeb应用程序工作原理应用程序工作原理服务器服务器 浏览器浏览器uHTTP协议协议31-334-3复习（第二章）复习（第二章）uuuuuuuu <>u uuuu41-444-4复习（第三章）复习（第三章）uuuuuuu 请注意一定要设请注意一定要设u51-554-5复习（第三章）复习（第三章）uuuuuu用户名用户名u 性别性别 uTabindex accessKeyu通过通过jsp/asp/php等服务器上的脚本来处理表单数据。等服务器上的脚本来处理表单数据。61-664-6目标目标u理解使用理解使用CSS的优点的优点u掌握掌握CSS的语法规则的语法规则u掌握掌握CSS基本属性基本属性u理解样式层叠和继承理解样式层叠和继承71-774-7为什么需要为什么需要CSSCSS样式表样式表uHTML标签的外观样式比较单一标签的外观样式比较单一颜色只有黑白颜色只有黑白字体类型和大小无变化字体类型和大小无变化u样式表的作用相当于华丽的衣服样式表的作用相当于华丽的衣服内容相同内容相同外观不同外观不同81-884-8为什么需要为什么需要CSSCSS样式表样式表u样式表能实现内容与样式的分离，方便团队开发样式表能实现内容与样式的分离，方便团队开发程序员程序员写代码写代码美工做样式美工做样式内容与样式和谐内容与样式和谐统一的完整网页统一的完整网页91-994-9什么是什么是CSSCSSuCSS是层叠样式表（是层叠样式表（Cascading Style Sheets）的缩）的缩写，它用于定义写，它用于定义HTML元素的显示形式，是一种格式化元素的显示形式，是一种格式化网页内容的技术。网页内容的技术。CSS现在已经被大多数浏览器所支持，现在已经被大多数浏览器所支持，成为网页设计者必须掌握的技术之一。成为网页设计者必须掌握的技术之一。uW3CWorld Wide Web Consortium 自自1996年年12月月发布第一个发布第一个CSS正式推荐版正式推荐版CSS 1.0以来，一直在对以来，一直在对CSS标准进行修订、升级。标准进行修订、升级。1999年年1月，月，CSS 2.0 正式正式推荐版发布，增加了对其它媒体（打印机、视觉设备）、推荐版发布，增加了对其它媒体（打印机、视觉设备）、可下载字体、元素定位和表格的支持。最新版本的可下载字体、元素定位和表格的支持。最新版本的CSS标准标准CSS 3.0正在开发中。正在开发中。101-10104-10使用使用CSSCSS的优点的优点 uCSS将从基础开始建设直到全面替代传统将从基础开始建设直到全面替代传统Web设计方法。设计方法。W3C组组织创建的织创建的CSS技术将替代技术将替代HTML中用于表现的中用于表现的HTML元素。元素。u提高页面浏览速度。使用提高页面浏览速度。使用CSS，比传统的，比传统的Web设计方法至少节约设计方法至少节约50%以上的文件尺寸。以上的文件尺寸。u缩短改版时间，降低维护费用。只要简单修改几个缩短改版时间，降低维护费用。只要简单修改几个CSS文件就可以文件就可以重新设计一个有成百上千页面的站点。重新设计一个有成百上千页面的站点。u强大的字体控制和排版能力。有了强大的字体控制和排版能力。有了CSS，我们不再需要用，我们不再需要用font标记标记或者透明的或者透明的1 px GIF图片来控制标题，改变字体颜色、字体样式等图片来控制标题，改变字体颜色、字体样式等等。等。uCSS非常容易编写。我们可以象写非常容易编写。我们可以象写HTML代码一样轻松地编写代码一样轻松地编写CSS。u可以一次设计，随处发布。你的设计不仅仅用于可以一次设计，随处发布。你的设计不仅仅用于Web浏览器，也可浏览器，也可以发布在其他设备上。以发布在其他设备上。u更好的控制页面布局。结合更好的控制页面布局。结合CSS和和div元素，可以比传统的使用元素，可以比传统的使用table元素更好地控制页面布局。元素更好地控制页面布局。u实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放在一个独立样式文件中，可以减少未来网页无效的可能。在一个独立样式文件中，可以减少未来网页无效的可能。u更方便搜索引擎的搜索。用只包含结构化内容的更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的代替嵌套的标签，搜索引擎将更有效地搜索到网页的内容，并可能给网页一个标签，搜索引擎将更有效地搜索到网页的内容，并可能给网页一个较高的评价。较高的评价。111-11114-11样式表的基本语法样式表的基本语法u样式表的基本结构样式表的基本结构 P color:red;font-size:30px;font-family:隶书隶书;声明文档样声明文档样式表结束式表结束文档样式表开始，文档样式表开始，类型为类型为CSSCSS样式样式样式规则样式规则选择器选择器u样式规则样式规则 P color:red;font-size:30px;font-family:隶书隶书;属性属性属性的值属性的值121-12124-12样式表的基本语法样式表的基本语法样式规则样式规则 P color:red;font-family:隶书隶书;font-size:24px;静夜思静夜思床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。本页面中所有的本页面中所有的P标标签都应用了此样式签都应用了此样式所有的段落都采用所有的段落都采用P样式，保证风格统一样式，保证风格统一用分号用分号隔开隔开选择器选择器如何编写此样式如何编写此样式?字体类型为律书、字体类型为律书、大小大小24px131-13134-13CSSCSS属性单位属性单位u长度单位：长度单位：cm mm in pt 1点点=1/72英寸英寸pc 1pc=12点点em 当前字体中当前字体中M字母的宽度字母的宽度px 象素象素ex 当前字体中当前字体中X字母的宽度字母的宽度u颜色单位颜色单位color:rgb(50%,0,50%);color:rgb(255,0,255);color:rgb(#ff0000);Red,blueURL单位单位background-image:url(“1.gif”);141-14144-14设置元素字体设置元素字体u设置字体名称设置字体名称font-family:verdana;u设置字体倾斜程度设置字体倾斜程度font-style:italic normal,italic,obliqueu设置字体的变体设置字体的变体Font-variant:normal:正常的字体正常的字体 small-caps:小型的大写字母字体小型的大写字母字体 u设置字重设置字重font-weight:normal|bold|bolder|lighter|number u设置字体大小设置字体大小font-size:larger 12ptu缩写缩写font-style Font-variant font-weight font-size font-family151-15154-15小结小结1 1编写如下图所示效果对应的编写如下图所示效果对应的HTML代码代码黑体，字体大小黑体，字体大小20px字体大小字体大小14px，蓝色，蓝色161-16164-16设置元素内容文本u设置首行缩进设置首行缩进Text-indent:3em;u设置文本对齐设置文本对齐Text-align:left right centeru设置文本修饰方式设置文本修饰方式Text-decoration:none underline下划线下划线 overline上划线上划线 line-through删除线删除线u设置文本阴影特效设置文本阴影特效Text-shadow:blacku设置行高设置行高Line-height:2em;u设置字间距设置字间距Letter-spacing:0.1em;171-17174-17设置元素内容文本u设置词间距设置词间距Word-spacing:1em;u设置文本大小写形式设置文本大小写形式Text-transform:uppercase lowercaseu设置空白显示形式设置空白显示形式pwhite-space:pre181-18184-18设置元素字体颜色和背景设置元素字体颜色和背景u颜色：颜色：coloru背景色背景色:background-coloru背景图像背景图像:background-imageu背景图像是否铺排背景图像是否铺排:background-repeatu图像随对象滚动还是固定图像随对象滚动还是固定:background-attachment191-19194-19设置列表格式设置列表格式(list-style-type)(list-style-type)u实心黑点实心黑点 discu空心圆圈空心圆圈 circleu方形黑块方形黑块 squareu十进制十进制 decimalu小写罗马数字小写罗马数字 lower-romanu大写罗马数字大写罗马数字 upper-romanu小写字母小写字母 lower-alphau大写字母大写字母 upper-alpha201-20204-20样式规则的位置样式规则的位置 u外部样式表外部样式表不需要不需要style标签标签u嵌入式样式表嵌入式样式表pu内联样式内联样式属性名为属性名为style举例举例:211-21214-21样式表的三类应用方式样式表的三类应用方式u嵌入样式表嵌入样式表内嵌样式表使用格式如下：内嵌样式表使用格式如下：u行内（嵌入）样式表行内（嵌入）样式表u外部样式表文件外部样式表文件 样式规则样式规则 如果希望本网页内的所有同类标签都采如果希望本网页内的所有同类标签都采用用统一样式统一样式，这时应采用内嵌样式。，这时应采用内嵌样式。221-22224-22嵌入样式表嵌入样式表P font-family:隶书隶书;font-size:18px;color:#FF0000;床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。样式规则样式规则所有的段落都采用所有的段落都采用 P 样式，保证样式统一样式，保证样式统一选择符选择符样式表样式表231-23234-23内联样式表内联样式表 如果希望某段文字和其他段落文字显示风格不一样，如果希望某段文字和其他段落文字显示风格不一样，该如何解决？该如何解决？使用行内（内联）样式表可以解决使用行内（内联）样式表可以解决241-24244-24行内（内联）样式表行内（内联）样式表设置属性设置属性 这个段落应用了样式这个段落应用了样式这个段落按默认样式显示这个段落按默认样式显示为标签为标签p指指定样式定样式本段本段标签采标签采用了行内样式用了行内样式251-25254-25行内（内联）样式表行内（内联）样式表静夜思静夜思作者：李白作者：李白 床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。查看源代码查看源代码行内样式使用范围更小，只适用于行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用某一个标签，对其他标签不起作用本段本段标签采标签采用了行内样式用了行内样式261-26264-26外部样式表文件外部样式表文件 如果希望一个网站中多个页面的样式保持一致，如果希望一个网站中多个页面的样式保持一致，如何解决？如何解决？使用外部样式表文件样式表可以解决使用外部样式表文件样式表可以解决271-27274-27外部样式表文件外部样式表文件u根据样式文件与网页的关联方式又分为：根据样式文件与网页的关联方式又分为：链接（链接（LINK）外部样式表）外部样式表导入（导入（import）外部样式表）外部样式表样式文件样式文件.css网页网页2网页网页3网页网页1281-28284-28链接（链接（LINK ）外部样式表）外部样式表使用使用LINK（链接）标签（链接）标签:第一步：创建样式表文件第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定第二步：把样式文件和网页绑定第三步：浏览查看各网页第三步：浏览查看各网页样式文件：样式文件：newstyle.css Link_Outcss1.htmlLink_Outcss2.html 引入的样引入的样式文件式文件291-29294-29导入（导入（importimport）外部样式表）外部样式表使用使用import导入导入，语法：，语法：import newstyle.css;引入样式表文件引入样式表文件301-30304-30理解样式表的层叠理解样式表的层叠 u层叠样式表背后的概念是，多个样式定义可以层叠向下层叠样式表背后的概念是，多个样式定义可以层叠向下通过多个层次来影响文档。样式定义的多个层次可以应通过多个层次来影响文档。样式定义的多个层次可以应用于任何文档。层次的优先级别从小到大依次为：用于任何文档。层次的优先级别从小到大依次为：用户浏览器的设置用户浏览器的设置外部样式表外部样式表嵌入式样式表嵌入式样式表内联样式内联样式311-31314-31创建样式规则创建样式规则 u理解样式表的第一步就是理解如何正确编写样式规则。理解样式表的第一步就是理解如何正确编写样式规则。u每个样式规则分为选择器和规则本身两个部分，选择器每个样式规则分为选择器和规则本身两个部分，选择器用于规则所应用的元素，规则本身则指定格式。用于规则所应用的元素，规则本身则指定格式。u选择器选择器元素选择器元素选择器类选择器类选择器ID选择器选择器 包含选择器包含选择器通配选择器通配选择器 伪类选择器伪类选择器伪元素选择器伪元素选择器 321-32324-32元素选择器元素选择器uHTML元素是最典型的选择器类型，任何一个元素是最典型的选择器类型，任何一个HTML元元素都可以做为选择器素都可以做为选择器 元素元素 属性属性:值值;h1 color:red;h1 color:#ff0000;h2 color:#FF0000;h1,h2 color:#ff0000;331-33334-33类选择器类选择器1 1 u如果想要把某一个样式应用到不同的如果想要把某一个样式应用到不同的HTML元素上，可元素上，可以采用类选择器来定义，然后在不同标签中应用它们。以采用类选择器来定义，然后在不同标签中应用它们。.类名类名 属性属性:值值;html 类选择器示例类选择器示例1.tt font-size:10pt;font-family:黑体黑体;color:#800080;font-weight:bold;示例一示例一/*p标签应用名字为标签应用名字为tt的类层叠样式表的类层叠样式表*/示例二示例二/*h1标签也应用名字为标签也应用名字为tt的类层叠样式表的类层叠样式表*/341-34344-34类选择器类选择器2 2 u如果我们希望为某一个如果我们希望为某一个HTML元素创建多个样式规则，元素创建多个样式规则，可以在类名前面加上该元素的名称可以在类名前面加上该元素的名称 元素元素.类名类名 属性属性:值值;类选择器示例类选择器示例2 h1.left color:blue;h1.right color:red;第一行第一行/*h1应用名为应用名为h1.left的类样式规则的类样式规则/第二行第二行/*h1也应用名为也应用名为h1.right 的类样式规则的类样式规则*/351-35354-35IDID选择器选择器 u除了使用类选择器的方式定义一个样式以外，还可以使除了使用类选择器的方式定义一个样式以外，还可以使用用ID定义样式。定义样式。ID与类选择器的概念相似，只是与类选择器的概念相似，只是ID选择选择器只能被引用一次，而类选择器可以被多次引用。器只能被引用一次，而类选择器可以被多次引用。u要将一个要将一个ID包括在样式定义中，应用一个井号（包括在样式定义中，应用一个井号（#）作）作为为ID名称的前缀名称的前缀#id名名 属性属性:值值;#red color:red;欢迎使用欢迎使用id选择器选择器361-36364-36IDID选择器和类选择器的选择选择器和类选择器的选择u是否在一个文档内重复使用是否在一个文档内重复使用u是否可以使用组合类选择器是否可以使用组合类选择器uID选择器比类选择器优先级高选择器比类选择器优先级高371-37374-37包含选择器包含选择器u如果需要为位于某个标记符内的元素设置特定的样式规如果需要为位于某个标记符内的元素设置特定的样式规则，则应将选择器指定为具有上下文关系的则，则应将选择器指定为具有上下文关系的HTML标记标记 h1 b color:blue;/*注意注意h1和和b之间以空格分隔之间以空格分隔*/381-38384-38通配选择器通配选择器 u通配选择器可以用来匹配文档中任何元素。通配选择器通配选择器可以用来匹配文档中任何元素。通配选择器是一个星号（是一个星号（*）*color:red;391-39394-39伪类及伪元素选择器伪类及伪元素选择器 u伪类和伪元素是特殊的类和元素，能自动地被支持伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。的浏览器所识别。u伪类区别开不同种类的元素。例如，伪类区别开不同种类的元素。例如，visited links（已（已访问的链接）和访问的链接）和active links（可激活链接）描述了两（可激活链接）描述了两个锚点的类型。个锚点的类型。u伪元素指元素的一部分，例如段落的第一个字母。伪元素指元素的一部分，例如段落的第一个字母。选择器选择器:伪类伪类 属性属性:值值;选择器选择器:伪元素伪元素 属性属性:值值;a:link color:#FF0000;text-decoration:none/*未访问的链接未访问的链接*/a:visited color:#00FF00;text-decoration:none/*已访问的链接已访问的链接*/a:hover color:#FF00FF;text-decoration:underline/*鼠标在链接上鼠标在链接上*/a:active color:#0000FF;text-decoration:underline/*激活链接激活链接*/401-40404-40伪类及伪元素选择器伪类及伪元素选择器(续续)u选择器选择器.类类:伪类伪类 属性属性:值值;u选择器选择器.类类:伪元素伪元素 属性属性:值值;a.red:link color:reda.red:visited color:bluea.blue:link color:yellowa.blue:visited color:blacku现在应用在不同的链接上：现在应用在不同的链接上：这是第一组链接这是第一组链接这是第二组链接这是第二组链接有时为了给不同的链接添加不同的效果，我们可以将类与伪类配合起来有时为了给不同的链接添加不同的效果，我们可以将类与伪类配合起来实现，格式如下：实现，格式如下：411-41414-41编写如下图所示效果对应的编写如下图所示效果对应的HTML代码代码小结小结2 2细边框细边框solid样式样式无下划线的无下划线的超连接样式超连接样式鼠标在超链接上鼠标在超链接上悬停时，超链接悬停时，超链接文本变为红色文本变为红色421-42424-42up font-size:12ptup:first-letter font-size:200%;uThe first words of an article.伪类及伪元素选择器伪类及伪元素选择器(续续)431-43434-43样式继承样式继承u继承从文档树中有些继承从文档树中有些css属性会从祖先元素传到后属性会从祖先元素传到后代元素代元素u不能被继承的属性：不能被继承的属性：border/margin/padding/backgroud.uFont-size不能直接继承不能直接继承441-44444-44样式表的层叠样式表的层叠u默认的优先级默认的优先级浏览器默认样式浏览器默认样式外部样式表外部样式表嵌入样式嵌入样式内联样式内联样式u样式的优先级算法样式的优先级算法Css的重要性和来源的重要性和来源 ！importantCss规则的特殊性规则的特殊性Css规则在文档中出现的顺序规则在文档中出现的顺序451-45454-45总结总结uCSS是层叠样式表（是层叠样式表（Cascading Style Sheets）的缩写，它用于）的缩写，它用于定义定义HTML元素的显示形式，是一种格式化网页内容的技术。元素的显示形式，是一种格式化网页内容的技术。uCSS样式由样式规则组成，所有的样式规则的语法遵循如下相同的样式由样式规则组成，所有的样式规则的语法遵循如下相同的基本格式：基本格式：选择器选择器 属性属性1:值值1;属性属性2:值值2;.属性属性N:值值N;u一条样式规则由一个选择器和一个或者多个声明组成；选择器指定一条样式规则由一个选择器和一个或者多个声明组成；选择器指定规则可作用于规则可作用于HTML文档中哪个或者哪些元素；声明由一个属性文档中哪个或者哪些元素；声明由一个属性/值对组成。值对组成。u在在HTML文档中，样式可以以三种形式出现：外部样式表、嵌入式文档中，样式可以以三种形式出现：外部样式表、嵌入式样式表、内联样式。样式表、内联样式。u多个样式定义可以层叠向下通过多个层次来影响文档。这种层叠是多个样式定义可以层叠向下通过多个层次来影响文档。这种层叠是有优先级别的，从小到大依次为：用户浏览器的设置、外部样式表、有优先级别的，从小到大依次为：用户浏览器的设置、外部样式表、嵌入式样式表、内联样式。嵌入式样式表、内联样式。u在定义样式规则时，常用的选择器包括：元素选择器、类选择器、在定义样式规则时，常用的选择器包括：元素选择器、类选择器、ID选择器、属性选择器、包含和子对象选择器、通配符选择器、伪选择器、属性选择器、包含和子对象选择器、通配符选择器、伪元素和伪类选择等。各种选择器匹配元素的范围有所不同。元素和伪类选择等。各种选择器匹配元素的范围有所不同。461-46464-46作业作业u将前两天做的首页和注册页面用将前两天做的首页和注册页面用css进行格式控制，增进行格式控制，增强页面美观效果。强页面美观效果。