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

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 正式推荐版发布，增加了对其它媒体（打印机、视觉设备）、可下载字体、元素定位和表格的支持。最新版本的C

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

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

5、lor:red; font-size:30px; font-family:隶书;,样式表的基本语法, 样式规则 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:rg

6、b(50%,0,50%); color:rgb(255,0,255); color:rgb(#ff0000); Red,blue URL单位 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 | n

7、umber 设置字体大小 font-size:larger 12pt 缩写 font-style Font-variant font-weight font-size font-family,小结1,编写如下图所示效果对应的HTML代码,黑体，字体大小20px,字体大小14px，蓝色,设置元素内容文本,设置首行缩进 Text-indent:3em; 设置文本对齐 Text-align:left right center 设置文本修饰方式 Text-decoration:none underline下划线 overline上划线 line-through删除线 设置文本阴影特效 Text-sha

8、dow:black 设置行高 Line-height:2em; 设置字间距 Letter-spacing:0.1em;,设置元素内容文本,设置词间距 Word-spacing:1em; 设置文本大小写形式 Text-transform:uppercase lowercase 设置空白显示形式 pwhite-space:pre,设置元素字体颜色和背景,颜色：color 背景色:background-color 背景图像:background-image 背景图像是否铺排:background-repeat 图像随对象滚动还是固定:background-attachment,设置列表格式(list

9、-style-type),实心黑点 disc 空心圆圈 circle 方形黑块 square 十进制 decimal 小写罗马数字 lower-roman 大写罗马数字 upper-roman 小写字母 lower-alpha 大写字母 upper-alpha,样式规则的位置,外部样式表 不需要style标签 嵌入式样式表 p 内联样式 属性名为style 举例:,样式表的三类应用方式,嵌入样式表 内嵌样式表使用格式如下： 行内（嵌入）样式表 外部样式表文件, 样式规则 ,如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。,嵌入样式表, P font-family:隶书; fo

10、nt-size:18px; color:#FF0000; 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 ,所有的段落都采用 P 样式，保证样式统一,内联样式表,如果希望某段文字和其他段落文字显示风格不一样， 该如何解决？,使用行内（内联）样式表可以解决,行内（内联）样式表, 设置属性 这个段落应用了样式 这个段落按默认样式显示 ,为标签p指定样式,本段标签采用了行内样式,行内（内联）样式表, 静夜思 作者：李白 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。,查看源代码,行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用,本段标签采用了行内样式,外部样式表文件,如果

11、希望一个网站中多个页面的样式保持一致， 如何解决？,使用外部样式表文件样式表可以解决,外部样式表文件,根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表,链接（LINK ）外部样式表,使用LINK（链接）标签 : ,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页绑定,第三步：浏览查看各网页,引入的样式文件,导入（import）外部样式表,使用import导入 ，语法： import newstyle.css; ,引入样式表文件,理解样式表的层叠,层叠样式表背后的概念是，多个样式定义可以层叠向下通过多个层次来影响文档。样式

12、定义的多个层次可以应用于任何文档。层次的优先级别从小到大依次为： 用户浏览器的设置 外部样式表 嵌入式样式表 内联样式,创建样式规则,理解样式表的第一步就是理解如何正确编写样式规则。 每个样式规则分为选择器和规则本身两个部分，选择器用于规则所应用的元素，规则本身则指定格式。 选择器 元素选择器 类选择器 ID选择器 包含选择器 通配选择器 伪类选择器 伪元素选择器,元素选择器,HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器,元素 属性: 值; ,h1 color: red; ,h1 color: #ff0000; h2 color: #FF0000; ,h1, h2 c

13、olor: #ff0000; ,类选择器1,如果想要把某一个样式应用到不同的HTML元素上，可以采用类选择器来定义，然后在不同标签中应用它们。,.类名 属性: 值; , 类选择器示例1 .tt font-size:10pt; font-family:黑体; color:#800080; font-weight:bold; 示例一 /*p标签应用名字为tt的类层叠样式表*/ 示例二 /*h1标签也应用名字为tt的类层叠样式表*/ ,类选择器2,如果我们希望为某一个HTML元素创建多个样式规则，可以在类名前面加上该元素的名称,元素.类名 属性: 值; , 类选择器示例2 h1.left color

14、:blue; h1.right color:red; 第一行 /*h1应用名为h1.left的类样式规则/ 第二行 /*h1也应用名为h1.right 的类样式规则*/ ,ID选择器,除了使用类选择器的方式定义一个样式以外，还可以使用ID定义样式。ID与类选择器的概念相似，只是ID选择器只能被引用一次，而类选择器可以被多次引用。 要将一个ID包括在样式定义中，应用一个井号（#）作为ID名称的前缀,#id名 属性: 值; ,#red color: red; 欢迎使用id选择器,ID选择器和类选择器的选择,是否在一个文档内重复使用 是否可以使用组合类选择器 ID选择器比类选择器优先级高,包含选择器

15、,如果需要为位于某个标记符内的元素设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记,h1 b color:blue; /*注意h1和b之间以空格分隔*/,通配选择器,通配选择器可以用来匹配文档中任何元素。通配选择器是一个星号（*）,* color: red; ,伪类及伪元素选择器,伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。 伪类区别开不同种类的元素。例如，visited links（已访问的链接）和active links（可激活链接）描述了两个锚点的类型。 伪元素指元素的一部分，例如段落的第一个字母。,选择器:伪类 属性: 值; 选择器:伪元素 属性

16、:值; 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 /* 激活链接 */,伪类及伪元素选择器(续),选择器.类:伪类 属性:值; 选择器.类:伪元素 属性:值; a.red:

17、link color: red a.red:visited color: blue a.blue:link color: yellow a.blue:visited color: black 现在应用在不同的链接上： 这是第一组链接 这是第二组链接,有时为了给不同的链接添加不同的效果，我们可以将类与伪类配合起来实现，格式如下：,编写如下图所示效果对应的HTML代码,小结2,细边框solid样式,无下划线的超连接样式,鼠标在超链接上悬停时，超链接文本变为红色,p font-size: 12pt p:first-letter font-size: 200%; The first words of

18、an article.,伪类及伪元素选择器(续),样式继承,继承从文档树中有些css属性会从祖先元素传到后代元素 不能被继承的属性：border/margin/padding/backgroud. Font-size不能直接继承,样式表的层叠,默认的优先级 浏览器默认样式外部样式表嵌入样式内联样式 样式的优先级算法 Css的重要性和来源 ！important Css规则的特殊性 Css规则在文档中出现的顺序,总结,CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。 CSS样式由样式规则组成，所有的样式规则的语法遵循如下相同的基本格式： 选择器 属性1: 值1; 属性2: 值2; . 属性N: 值N; 一条样式规则由一个选择器和