2 设计web页面.ppt
《2 设计web页面.ppt》由会员分享,可在线阅读,更多相关《2 设计web页面.ppt(29页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第二章 设计Web页面要创建漂亮、格式统一的页面,需要使要创建漂亮、格式统一的页面,需要使用某种方法来改变页面元素在浏览器中用某种方法来改变页面元素在浏览器中的表现。的表现。最常使用的方法是使用最常使用的方法是使用CSSCSS(Cascading Cascading Style SheetStyle Sheet,层次样式表),层次样式表)本章内容:本章内容:为什么要使用CSS CSS语言简介及如何编写CSS 在VWD中使用CSS.1 .1 为什么要使用为什么要使用CSSCSSn从从Internet出现开始,出现开始,Web页面页面主要由文本和图像构主要由文本和图像构成。文本使用纯成。文本使用纯
2、HTML格式化,如用格式化,如用标记标记加粗,用加粗,用标记设置字体格式。如:标记设置字体格式。如:Good afternoon,Class!HTMLHTML格式化页面存在的问题格式化页面存在的问题nHTML提供的样式化页面的选项很有限提供的样式化页面的选项很有限n数据和格式混合在一起数据和格式混合在一起nHTML不容易在用户浏览页面时动态修改格不容易在用户浏览页面时动态修改格式式n页面中的附加标记大大增加了页面的大小页面中的附加标记大大增加了页面的大小2.2 CSS2.2 CSS简介简介 CssDemo h1 font-size:20px;color:Green;pcolor:Blue;fo
3、nt-style:italic;.RightAligned text-align:right;Welcome to this CSS Demo page CSS makes it super easy to style your pages.With little code,you can quickly change the looks of a page.一、种常见的选择器格式一、种常见的选择器格式1)Universal选择器选择器*font-family:Arial;n适用于页面的所有元素,可用来进行全局设适用于页面的所有元素,可用来进行全局设置,比如全页字体。置,比如全页字体。种常见的
4、选择器格式种常见的选择器格式2)Type选择器选择器h1color:Green;font-size:36px;n指向某种指向某种特定类型的特定类型的HTML元素元素。Type选择器选择器不区不区分大小写分大小写,因此所设定的格式可用于,因此所设定的格式可用于H1或或h1类型。类型。种常见的选择器格式种常见的选择器格式3)ID选择器选择器#IntroText font-style:italic;nID选择器以选择器以“#”为前缀,指向具有特定为前缀,指向具有特定ID的的HTML元素。元素。ID选择器选择器区分大小写区分大小写,要保证,要保证ID属性和选择属性和选择器总使用一致的大小写。器总使用一
5、致的大小写。n例:下面第一行将会显示斜体:例:下面第一行将会显示斜体:I am italic because i have the right ID I am NOT italic种常见的选择器格式种常见的选择器格式4)Class选择器选择器.HighLight font-weight:bold;color:Red;nClass选择器以选择器以“.”为前缀,指向具有特定为前缀,指向具有特定Class的的HTML元素。当需要赋予若干不相关的元素相同格式时,使用这个元素。当需要赋予若干不相关的元素相同格式时,使用这个选择器就非常方便。选择器就非常方便。Class选择器也选择器也区分大小写区分大小写
6、。n例:下面两行中例:下面两行中class为为HighLight的文字会应用上面的设置:的文字会应用上面的设置:HELLO,GOOD Afternoon!Please send a mail to me.组合和合并选择器组合和合并选择器1)CSS允许组合多个选择器,用逗号将它们隔允许组合多个选择器,用逗号将它们隔开开h1,h2,h3,h4 color:Blue;p,#BodyText,.HighLight background-color:Gray;组合和合并选择器组合和合并选择器2)CSS还允许为同时满足多个条件(选择器)还允许为同时满足多个条件(选择器)的的HTML设置格式,此时这多个选择
7、器间用设置格式,此时这多个选择器间用空格隔开空格隔开 p .HighLight font-size:32px;二、常见的二、常见的CSSCSS属性属性1、颜色、颜色(color)和背景和背景(background)属性属性 1)color属性属性 color:Red;2)background属性属性 该该CSS属性是一个复合属性,由五个属性组成:属性是一个复合属性,由五个属性组成:l背景颜色背景颜色(background-color)属性属性l背景图片背景图片(background-image)属性属性l背景位置背景位置(background-position)属性属性l背景重复背景重复(ba
8、ckground-repeat)属性属性l背景附着背景附着(background-attachment)属性属性:该该CSS属性用来设定背景属性用来设定背景图片是否随文档一起滚动。图片是否随文档一起滚动。常见的常见的CSSCSS属性属性2、字体、字体(font)属性属性l字体名称字体名称(font-family)属性属性l字体大小字体大小(font-size)属性属性l字体风格字体风格(font-style)属性属性:该该CSS属性用来设定属性用来设定字体风格是斜体,或是正常等字体风格是斜体,或是正常等l字体浓淡字体浓淡(font-weight)属性属性:l字体变量字体变量(font-vari
9、ant)属性属性:设定字体是正常显设定字体是正常显示,还是以小型大写字母显示。示,还是以小型大写字母显示。常见的常见的CSSCSS属性属性3、布局、布局(Layout)n边框边框(border)属性属性:其中其中border-width用来设定边框宽度。用来设定边框宽度。border-color属性设定边框颜色。属性设定边框颜色。border-style属性设定边框风格。属性设定边框风格。border-collapse属性设定表格的属性设定表格的行和列的边框是合并成单边框,还是分别有各自的边框。行和列的边框是合并成单边框,还是分别有各自的边框。n外部边距外部边距(margin)属性属性:mar
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 设计web页面 设计 web 页面
限制150内