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

1李健Email:[e-mail]第四章CSS基础21-224-2复习（第一章）应用计算演变–主机/哑终端模式c/s模式b/s模式Web应用程序工作原理–服务器浏览器HTTP协议31-334-3复习（第二章）h1－h6pblockquoteulollidtddpredivspan <>ahref=“”/aaname=“a1”/aimgsrc=“”/objecttabletrthtdrowspan=2colspan=2iframe41-444-4复习（第三章）formaction=“”method=“get|post”inputtype=“text”size=“”maxlength=“”inputtype=“password”size=“”maxlength=“”inputtype=“checkbox”value=“”name=“”id=“”checked=“checked”inputtype=“radio”value=“”name=“”id=“”checked=“checked”inputtype=“hidden”id=“”value=“”inputtype=“file”id=“”请注意一定要设formmethod=“post”enctype=“form/multipart”selectname=“”id=“”optionvalue=“”selected=“selected”51-554-5复习（第三章）selectmultiple=“multiple”size=“3”optiontextarearows=“10”cols=“15”/inputtype=“submit”value=“提交”/inputtype=“reset”value=“重置”/inputtype=“button”value=“发送”labelfor=“username”用户名/labelfieldsetlegend性别/legend/fieldsetTabindexaccessKey通过jsp/asp/php等服务器上的脚本来处理表单数据。61-664-6目标理解使用CSS的优点掌握CSS的语法规则掌握CSS基本属性理解样式层叠和继承71-774-7为什么需要CSS样式表HTML标签的外观样式比较单一–颜色只有黑白–字体类型和大小无变化样式表的作用相当于华丽的衣服内容相同外观不同81-884-8为什么需要CSS样式表样式表能实现内容与样式的分离，方便团队开发程序员写代码美工做样式内容与样式和谐统一的完整网页91-994-9什么是CSSCSS是层叠样式表（CascadingStyleSheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。CSS现在已经被大多数浏览器所支持，成为网页设计者必须掌握的技术之一。W3C－WorldWideWebConsortium自1996年12月发布第一个CSS正式推荐版CSS1.0以来，一直在对CSS标准进行修订、升级。1999年1月，CSS2.0正式推荐版发布，增加了对其它媒体（打印机、视觉设备）、可下载字体、元素定位和表格的支持。最新版本的CSS标准CSS3.0正在开发中。101-10104-10使用CSS的优点CSS将从基础开始建设直到全面替代传统Web设计方法。W3C组织创建的CSS技术将替代HTML中用于表现的HTML元素。提高页面浏览速度。使用CSS，比传统的Web设计方法至少节约50%以上的文件尺寸。缩短改版时间，降低维护费用。只要简单修改几个CSS文件就可以重新设计一个有成百上千页面的站点。强大的字体控制和排版能力。有了CSS，我们不再需要用font标记或者透明的1pxGIF图片来控制标题，改变字体颜色、字体样式等等。CSS非常容易编写。我们可以象写HTML代码一样轻松地编写CSS。可以一次设计，随处发布。你的设计不仅仅用于Web浏览器，也可以发布在其他设备上。更好的控制页面布局。结合CSS和div元素，可以比传统的使用table元素更好地控制页面布局。实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放在一个独立样式文件中，可以减少未来网页无效的可能。更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到网页的内容，并可能给网页一个较高的评价。111-11114-11样式表的基本语法样式表的基本结构STYLEtype=text/cssP{color:red;font-size:30px;font-family:隶书;}……/STYLE声明文档样式表结束文档样式表开始，类型为CSS样式样式规则选择器样式规则P{color:red;font-size:30px;font-family:隶书;}属性属性的值121-12124-12样式表的基本语法HTMLHEADTITLE样式规则/TITLESTYLEtype=text/cssP{color:red;font-family:隶书;font-size:24px;}/STYLE/HEADBODYH2静夜思/H2P床前明月光，/PP疑是地上霜。/PP我是郭德刚，/PP低头思故乡。/P/BODY/HTML本页面中所有的P标签都应用了此样式所有的段落都采用P样式，保证风格统一用分号隔开选择器如何编写此样式?字体类型为律书、大小24px131-13134-13CSS属性单位长度单位：–cmmmin–pt1点=1/72英寸–pc1pc=12点–em当前字体中M字母的宽度–px象素–ex当前字体中X字母的宽度颜色单位–color:rgb(50%,0,50%);–color:rgb(255,0,255);–color:rgb(#ff0000);–Red,blueURL单位–background-image:url(“1.gif”);141-14144-14设置元素字体设置字体名称–font-family:verdana;设置字体倾斜程度–font-style:italic–normal,italic,oblique设置字体的变体–Font-variant:normal:正常的字体small-caps:小型的大写字母字体设置字重–font-weight:normal|bold|bolder|lighter|number设置字体大小–font-size:larger12pt缩写–font-styleFont-variantfont-weightfont-sizefont-family151-15154-15小结1编写如下图所示效果对应的HTML代码黑体，字体大小20px字体大小14px，蓝色161-16164-16设置元素内容文本设置首行缩进–Text-indent:3em;设置文本对齐–Text-align:leftrightcenter设置文本修饰方式–Text-decoration:noneunderline下划线overline上划线line-through删除线设置文本阴影特效–Text-shadow:black设置行高–Line-height:2em;设置字间距–Letter-spacing:0.1em;171-17174-17设置元素内容文本设置词间距–Word-spacing:1em;设置文本大小写形式–Text-transform:uppercaselowercase设置空白显示形式–p{white-space:pre}181-18184-18设置元素字体颜色和背景颜色：color背景色:background-color背景图像:background-image背景图像是否铺排:background-repeat图像随对象滚动还是固定:background-attachment191-19194-19设置列表格式(list-style-type)实心黑点disc空心圆圈circle方形黑块square十进制decimal小写罗马数字lower-roman大写罗马数字upper-roman小写字母lower-alpha大写字母upper-alpha201-20204-20样式规则的位置外部样式表不需要style标签linkrel=“stylesheet”href=“”/嵌入式样式表styletype=“text/css”p{}/style内联样式属性名为style举例:pstyle=“”/p211-21214-21样式表的三类应用方式嵌入样式表–内嵌样式表使用格式如下：行内（嵌入）样式表外部样式表文件HEADSTYLEtype=text/css样式规则/STYLE/HEAD如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。221-22224-22嵌入样式表STYLEtype=text/cssP{font-family:隶书;font-size:18px;color:#FF0000;}/STYLE/HEAD……P床前明月光，/PP疑是地上霜。/PP我是郭德刚，/PP低头思故乡。/P……样式规则所有的段落都采用P样式，保证样式统一选择符样式表231-23234-23内联样式表如果希望某段文字和其他段落文字显示风格不一样，该如何解决？使用行内（内联）样式表可以解决241-24244-24行内（内联）样式表HTMLHEADTITLE设置属性/TITLE/HEADBODYPstyle=color:red;font-size:30px;font-family:隶书;这个段落应用了样式P这个段落按默认样式显示/BODY/HTML为标签p指定样式本段P标签采用了行内样式251-25254-25行内（内联）样式表BODYstyle=background-color:#CCCCCCPIMGsrc=libai.jpgwidth=140height=170align=left/PH2静夜思/H2H3作者：李白/H3Pstyle=color:#FF0000;font-size:18px;font-family:隶书;border-bottom-style:dashed床前明月光，BR疑是地上霜。BR我是郭德刚，BR低头思故乡。/P查看源代码行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用本段P标签采用了行内样式261-26264-26外部样式表文件如果希望一个网站中多个页面的样式保持一致，如何解决？使用外部样式表文件样式表可以解决271-27274-27外部样式表文件根据样式文件与网页的关联方式又分为：–链接（LINK）外部样式表–导入（@import）外部样式表样式文件.css网页2网页3网页1……281-28284-28链接（LINK）外部样式表使用LINK（链接）标签:HEADLINKhref=newsyle.cssrel=stylesheettype=text/css/HEAD第一步：创建样式表文件newstyle.css第二步：把样式文件和网页绑定第三步：浏览查看各网页样式文件：newstyle.cssLink_Outcss1.htmlLink_Outcss2.html引入的样式文件291-29294-29导入（@import）外部样式表使用@import导入，语法：HEADSTYLETYPE=text/