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

《Web应用程序客户端界面设计第4章.ppt》由会员分享，可在线阅读，更多相关《Web应用程序客户端界面设计第4章.ppt（46页珍藏版）》请在三一办公上搜索。

1、,第四章 CSS基础,复习（第一章）,应用计算演变主机/哑终端模式 c/s模式 b/s模式Web应用程序工作原理服务器 浏览器HTTP协议,复习（第二章）,复习（第三章）,请注意一定要设,复习（第三章）,用户名 性别 Tabindex accessKey通过jsp/asp/php等服务器上的脚本来处理表单数据。,目标,理解使用CSS的优点掌握CSS的语法规则掌握CSS基本属性理解样式层叠和继承,为什么需要CSS样式表,HTML标签的外观样式比较单一颜色只有黑白字体类型和大小无变化样式表的作用相当于华丽的衣服,内容相同,外观不同,为什么需要CSS样式表,样式表能实现内容与样式的分离，方便团队开发

2、,程序员写代码,美工做样式,内容与样式和谐统一的完整网页,什么是CSS,CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。CSS现在已经被大多数浏览器所支持，成为网页设计者必须掌握的技术之一。W3CWorld Wide Web Consortium 自1996年12月发布第一个CSS正式推荐版CSS 1.0以来，一直在对CSS标准进行修订、升级。1999年1月，CSS 2.0 正式推荐版发布，增加了对其它媒体（打印机、视觉设备）、可下载字体、元素定位和表格的支持。最新版本的CSS标准CSS 3.0正在开发中。

3、,使用CSS的优点,CSS将从基础开始建设直到全面替代传统Web设计方法。W3C组织创建的CSS技术将替代HTML中用于表现的HTML元素。提高页面浏览速度。使用CSS，比传统的Web设计方法至少节约50%以上的文件尺寸。缩短改版时间，降低维护费用。只要简单修改几个CSS文件就可以重新设计一个有成百上千页面的站点。强大的字体控制和排版能力。有了CSS，我们不再需要用font标记或者透明的1 px GIF图片来控制标题，改变字体颜色、字体样式等等。CSS非常容易编写。我们可以象写HTML代码一样轻松地编写CSS。可以一次设计，随处发布。你的设计不仅仅用于Web浏览器，也可以发布在其他设备上。更好

4、的控制页面布局。结合CSS和div元素，可以比传统的使用table元素更好地控制页面布局。实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放在一个独立样式文件中，可以减少未来网页无效的可能。更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到网页的内容，并可能给网页一个较高的评价。,样式表的基本语法,样式表的基本结构,P color:red;font-size:30px;font-family:隶书;,声明文档样式表结束,文档样式表开始，类型为CSS样式,样式规则,选择器,样式规则 P color:red;font-size:30px;font-f

5、amily:隶书;,样式表的基本语法,样式规则 P color:red;font-family:隶书;font-size:24px;静夜思床前明月光，疑是地上霜。我是郭德刚，低头思故乡。,本页面中所有的P标签都应用了此样式,所有的段落都采用P样式，保证风格统一,用分号隔开,选择器,如何编写此样式?字体类型为律书、大小24px,CSS属性单位,长度单位：cm mm in pt 1点=1/72英寸pc 1pc=12点em 当前字体中M字母的宽度px 象素ex 当前字体中X字母的宽度颜色单位color:rgb(50%,0,50%);color:rgb(255,0,255);color:rgb(#ff

6、0000);Red,blueURL单位background-image:url(“1.gif”);,设置元素字体,设置字体名称font-family:verdana;设置字体倾斜程度font-style:italic normal,italic,oblique设置字体的变体Font-variant:normal:正常的字体 small-caps:小型的大写字母字体 设置字重font-weight:normal|bold|bolder|lighter|number 设置字体大小font-size:larger 12pt缩写font-style Font-variant font-weight f

7、ont-size font-family,小结1,编写如下图所示效果对应的HTML代码,黑体，字体大小20px,字体大小14px，蓝色,设置元素内容文本,设置首行缩进Text-indent:3em;设置文本对齐Text-align:left right center设置文本修饰方式Text-decoration:none underline下划线 overline上划线 line-through删除线设置文本阴影特效Text-shadow:black设置行高Line-height:2em;设置字间距Letter-spacing:0.1em;,设置元素内容文本,设置词间距Word-spacing

8、:1em;设置文本大小写形式Text-transform:uppercase lowercase设置空白显示形式pwhite-space:pre,设置元素字体颜色和背景,颜色：color背景色:background-color背景图像:background-image背景图像是否铺排:background-repeat图像随对象滚动还是固定:background-attachment,设置列表格式(list-style-type),实心黑点 disc空心圆圈 circle方形黑块 square十进制 decimal小写罗马数字 lower-roman大写罗马数字 upper-roman小写字母

9、 lower-alpha大写字母 upper-alpha,样式规则的位置,外部样式表不需要style标签嵌入式样式表p内联样式属性名为style举例:,样式表的三类应用方式,嵌入样式表内嵌样式表使用格式如下：行内（嵌入）样式表外部样式表文件,样式规则,如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。,嵌入样式表,P font-family:隶书;font-size:18px;color:#FF0000;床前明月光，疑是地上霜。我是郭德刚，低头思故乡。,所有的段落都采用 P 样式，保证样式统一,内联样式表,如果希望某段文字和其他段落文字显示风格不一样，该如何解决？,使用行内（内

10、联）样式表可以解决,行内（内联）样式表,设置属性 这个段落应用了样式这个段落按默认样式显示,为标签p指定样式,本段标签采用了行内样式,行内（内联）样式表,静夜思作者：李白 床前明月光，疑是地上霜。我是郭德刚，低头思故乡。,查看源代码,行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用,本段标签采用了行内样式,外部样式表文件,如果希望一个网站中多个页面的样式保持一致，如何解决？,使用外部样式表文件样式表可以解决,外部样式表文件,根据样式文件与网页的关联方式又分为：链接（LINK）外部样式表导入（import）外部样式表,链接（LINK）外部样式表,使用LINK（链接）标签:,第一步：创

11、建样式表文件newstyle.css,第二步：把样式文件和网页绑定,第三步：浏览查看各网页,引入的样式文件,导入（import）外部样式表,使用import导入，语法：import newstyle.css;,引入样式表文件,理解样式表的层叠,层叠样式表背后的概念是，多个样式定义可以层叠向下通过多个层次来影响文档。样式定义的多个层次可以应用于任何文档。层次的优先级别从小到大依次为：用户浏览器的设置外部样式表嵌入式样式表内联样式,创建样式规则,理解样式表的第一步就是理解如何正确编写样式规则。每个样式规则分为选择器和规则本身两个部分，选择器用于规则所应用的元素，规则本身则指定格式。选择器元素选择器

12、类选择器ID选择器 包含选择器通配选择器 伪类选择器伪元素选择器,元素选择器,HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器,元素 属性:值;,h1 color:red;,h1 color:#ff0000;h2 color:#FF0000;,h1,h2 color:#ff0000;,类选择器1,如果想要把某一个样式应用到不同的HTML元素上，可以采用类选择器来定义，然后在不同标签中应用它们。,.类名 属性:值;,类选择器示例1.tt font-size:10pt;font-family:黑体;color:#800080;font-weight:bold;示例一/*p标签

13、应用名字为tt的类层叠样式表*/示例二/*h1标签也应用名字为tt的类层叠样式表*/,类选择器2,如果我们希望为某一个HTML元素创建多个样式规则，可以在类名前面加上该元素的名称,元素.类名 属性:值;,类选择器示例2 h1.left color:blue;h1.right color:red;第一行/*h1应用名为h1.left的类样式规则/第二行/*h1也应用名为h1.right 的类样式规则*/,ID选择器,除了使用类选择器的方式定义一个样式以外，还可以使用ID定义样式。ID与类选择器的概念相似，只是ID选择器只能被引用一次，而类选择器可以被多次引用。要将一个ID包括在样式定义中，应用一

14、个井号（#）作为ID名称的前缀,#id名 属性:值;,#red color:red;欢迎使用id选择器,ID选择器和类选择器的选择,是否在一个文档内重复使用是否可以使用组合类选择器ID选择器比类选择器优先级高,包含选择器,如果需要为位于某个标记符内的元素设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记,h1 b color:blue;/*注意h1和b之间以空格分隔*/,通配选择器,通配选择器可以用来匹配文档中任何元素。通配选择器是一个星号（*）,*color:red;,伪类及伪元素选择器,伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元

15、素。例如，visited links（已访问的链接）和active links（可激活链接）描述了两个锚点的类型。伪元素指元素的一部分，例如段落的第一个字母。,选择器:伪类 属性:值;选择器:伪元素 属性:值;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-decor

16、ation:underline/*激活链接*/,伪类及伪元素选择器(续),选择器.类:伪类 属性:值;选择器.类:伪元素 属性:值;a.red:link color:reda.red:visited color:bluea.blue:link color:yellowa.blue:visited color:black现在应用在不同的链接上：这是第一组链接这是第二组链接,有时为了给不同的链接添加不同的效果，我们可以将类与伪类配合起来实现，格式如下：,编写如下图所示效果对应的HTML代码,小结2,细边框solid样式,无下划线的超连接样式,鼠标在超链接上悬停时，超链接文本变为红色,p font-

17、size:12ptp:first-letter font-size:200%;The first words of an article.,伪类及伪元素选择器(续),样式继承,继承从文档树中有些css属性会从祖先元素传到后代元素不能被继承的属性：border/margin/padding/backgroud.Font-size不能直接继承,样式表的层叠,默认的优先级浏览器默认样式外部样式表嵌入样式内联样式样式的优先级算法Css的重要性和来源！importantCss规则的特殊性Css规则在文档中出现的顺序,总结,CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定

18、义HTML元素的显示形式，是一种格式化网页内容的技术。CSS样式由样式规则组成，所有的样式规则的语法遵循如下相同的基本格式：选择器 属性1:值1;属性2:值2;.属性N:值N;一条样式规则由一个选择器和一个或者多个声明组成；选择器指定规则可作用于HTML文档中哪个或者哪些元素；声明由一个属性/值对组成。在HTML文档中，样式可以以三种形式出现：外部样式表、嵌入式样式表、内联样式。多个样式定义可以层叠向下通过多个层次来影响文档。这种层叠是有优先级别的，从小到大依次为：用户浏览器的设置、外部样式表、嵌入式样式表、内联样式。在定义样式规则时，常用的选择器包括：元素选择器、类选择器、ID选择器、属性选择器、包含和子对象选择器、通配符选择器、伪元素和伪类选择等。各种选择器匹配元素的范围有所不同。,作业,将前两天做的首页和注册页面用css进行格式控制，增强页面美观效果。,