网页设计CSS样式表应用.ppt
38页
CSS,样式表应用,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,*,第四章,CSS,样式表应用,主讲：钟杰卓,0,本章内容概述,CSS,简介,1,CSS,语法基础,2,CSS,布局基础,3,CSS,布局实例,4,CSS,滤镜应用,5,1,4.1 CSS,简介,CSS,的全称是,Cascading Style Sheet,，通常称为“层叠样式表”是网页设计不可缺少的工具之一CSS,是一组样式，样式的属性在,HTML,元素中一次出现，并显示在浏览器中样式可以定义在,HTML,文档的标记里，也可以放在外部附加文档中，一个样式表文档可以用于多个页面，甚至是整个站点，因此具有更好的易用性和扩展性CSS,可以减少开发和维护,HTML,文档所用的时间增加了,Web,站点中文档间的灵活性2,4.2 CSS,语法基础,完成了网页框架的构建，下一步就应该使用,CSS,来布局和修饰了使用,CSS,的方法可以简单概括为：,选择符：,表示要定义样式的对象，可以是元素本身，也可以是一类元素或指定名称的元素选择属性：,制定选择符所具有的属性，它是,CSS,的核心CSS 2,一共定义了,150,多个属性，其中大部分属性是用于任何选择符。
定义属性值：,数值表示（,25px,）、百分比表式（,20%,）、范围表示（,top,、,right,）,Selector property:value;property:value;,body color:#333;background-color:#eee;,3,4.2 CSS,语法基础,CSS,选择符,类型选择器：,类型选择符就是网页元素本身，定义时直接使用元素名称，如定义段落样式，可以选择,p,元素，即把,p,作为选择符在,HTML,和,XHTML,中，所有的元素都可以作为类型选择符来进行定义：,定义了类型选择符，所定义的属性会影响引用这个样式的所有该元素的显示效果使用恰当会非常省力，但如果考虑不周，贸然定义会给网页设计增加无穷烦恼html,/*/,color:#f60;font-size:14px;,Body,/*/,Margin-left:0px;Margin-top:0px;,Td,/*/,Font-family:”,宋体”,”,黑体”,;,4,4.2 CSS,语法基础,id,选择符：,CSS,中的,id,是作为网页中元素的“身份证”来使用的因此它是唯一的，不同元素的,id,值不能重复。
使用,id,选择器能够扩展,HTML,和,XHTML,元素的显示效果为每个元素的具体对象定义不同的样式，方便了用户更加精细地控制页面当使用,id,选择符时，应先为元素定义一个,id,属性：,在样式表中，需要使用,#,号进行标识：,#lefttable,color:#f60;font-size:14px;border:1pt#999 solid;,5,4.2 CSS,语法基础,class,选择符：,class,是一个集合名次，意味着在一个文档中可以为不同类型的元素定义相同的类名是先把具有相同样式的元素统一为一类使用,class,选择符可以实现代码简化的目的，节约了了,CSS,代码的编写，增强了代码的可读性当使用,class,选择符时，首先应为每个元素定义,class,属性：,在样式表中，需要使用,.,号进行标识：,.red,color:#ff0000;,6,4.2 CSS,语法基础,群选择符：,群选择符不是一种选择符的类型，而是一种选择符的使用方法当多个对象定义了相同的样式时，可以把它们分成一组，以便简化代码读写，选择符分组，可以用逗号把同组内不同对象分割：,派生选择符：,可以使用派生选择器给一个元素里的子元素定义样式，例如，给,li,下面的子元素,a,定义文字大小和颜色的样式：,.dh1 a,font-size:12px;color:#333333;,p,td,li,font-size:12px;,7,4.2 CSS,语法基础,伪类：,CSS,中用四个伪类来定义链接的样式，分别是：,a:link,、,a:visited,、,a:hover,和,a:active,a:link,/*,定义超级链接的默认样式,*/,font-size:12px;color:#c00;,text-decoration:none;,a:visited,/*,定义访问过的链接样式,*/,font-size:12px;color:#c00;,text-decoration:none;,a:hover,/*,定义鼠标经过的链接样式,*/,font-size:12px;color:#f30;,text-decoration:underline;,a:active,/*,定义鼠标按下的链接样式,*/,font-size:12px;color:#c00;,text-decoration:none;,8,4.2 CSS,语法基础,在网页中添加,CSS,的方法,CSS,样式可以以多种方式灵活地应用到设计的页面中，选择方法根据设计的不同要求来指定。
行内样式表：,指将,CSS,样式混合在,HTML,标签里使用，行内样式由,HTML,元素的,style,属性支持，只需要将,CSS,代码用分号隔开，书写在,style=“”,之中既可此做法是先了,CSS,对元素的精确控制，但是没有很好地将表现与内容分离，所以不推荐这样的用法9,4.2 CSS,语法基础,内部样式表：,内部样式表也将,CSS,样式编写到页面中，不同的是，内部样式可以将样式统一放置在一个固定的位置这种,CSS,样式控制的内容一般位于,HTML,文件的头部，即,标签内，并以,开始，以,结束10,4.2 CSS,语法基础,链接外部样式表：,链接外部样式表是,CSS,应用的首选形式，将,CSS,样式代码单独编写在一个独立文件中，由页面进行调用，多个网页可以同时使用一个样式表文件Style.css,文件内容：,Body,Background-color:#eeeeee;,Margin-left:0px;,Margin-top:0px;,Td Font-size:12px;,11,4.2 CSS,语法基础,CSS,字体属性：,文字的属性主要有字体样式、字体大小、字体加粗等属 性,属性描述,属性值,font-family,字体设置。
可设置多种字体,font-family:”,字体,1”,，,”,字体,2”,font-size,设置文字的大小font-size:14px;,font-style,设置字体是否为斜体,font-style:normal|italic|oblique,font-weight,设置字体的粗细,font-weight:normal|bold|bolder|lighter|100-900,font-variant,将小写英文字母转变为大写,font-variant:normal|small-caps,font-decoration,对文本进行修饰，如设置下划线、删除线,font-decoration:underline(,添加下划线,),|overline(,上划线,)|line-through(,删除线,)|blink(,闪烁文字效果,),12,4.2 CSS,语法基础,CSS,文本属性：,文本属性指整段文本的样式包括单词间隔、字符间隔、文本缩进、行高等,属 性,属性描述,属性值,word-spacing,设置英文单词间的距离,word-spacing:15px,letter-spacing,设置字母之间的间隔数,letter-spacing:14px;,text-align,设置文本的水平对齐方式,Left|right|center|justify,vertical-align,设置段落的垂直对齐方式,baseline|sub|super|top|text-top|middle|text-bottom,text-indent,设置段落的首行缩进及距离,text-indent:24px;,line-height,设置文本的行高,line-height:20px|1.5em|160%,white-space,页面文本空格的处理方式,white-space:pre|nowrap,text-transform,转换英文字母的大小写,lowercase|uppercase|capitalize,13,4.2 CSS,语法基础,CSS,背景属性：,属 性,属性描述,属性值,background-color,以固定的颜色作为背景色,background-color:#eee;,background-image,设置元素的背景图片,background-image:url(images/bg.jpg),background-repeat,设置背景图片的重复方式,no-repeat|repeat|repeat-x|repeat-y,background-position,设置背景图片位置,0,%,0,%,|50,%,0,%|10,0,%,0,%|,0,%,50,%,top left|top center|left center,background-attachment,拉动滚动时条背景图是随对象滚动还是固定不动。
scroll|fixed,14,4.2 CSS,语法基础,CSS,边框属性：,属 性,属性描述,属性值,border-style,边框样式：无、实线、虚线,Dotted|dashed|solid|double|groove|ridge|inset|outset,border-width,设置元素边框的宽度,border-width:1px,border-color,设置边框的颜色,border-color:#333,15,4.3 CSS,布局基础,表现和结构相分离,1.,内容,内容就是页面实际要传达的真正信息，包含数据、文档或者图片等注意这里强调的“真正”，是指纯粹的数据信息本身比如一个不包含辅助的信息,比如导航菜单、装饰性图片等2.,结构,(Structure),可以看到上面的文本信息本身已经完整但是混乱一团，难以阅读和理解，我们必须给它格式化一下把它分成标题、作者、章、节、段落和列表等16,4.3 CSS,布局基础,3.,表现,(Presentation),虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰所有这些用来改变内容外观的东西，我们称之为“表现”。
4.,行为,(Behavior),行为就是对内容的交互及操作效果例如，我们最熟悉不过的,JavaScript,使用,JavaScript,我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作17,4.3 CSS,布局基础,所有,HTML,和,XHTML,页面就是由“结构、表现和行为”这三方面组成的抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”：,18,4.3 CSS,布局基础,传统的,HTML,方法,忆江南,19,4.3 CSS,布局基础,web,标准推荐的方法,忆江南,唐,.,白居易,江南好,.,772,846,，字乐天,.,据,乐府杂录,.,此词写江南春色,.,20,4.3 CSS,布局基础,用于布局的时候，它是一个控制表现的标签混杂在内容和结构中，使我们的内容数据无法再利用结构与表现相分离带来的好处主要有：,数据的多样显示通过不同的样式表适应不同的设备，做到内容与设备无关,保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版,;,由于结构清晰，数据的集成、更新和处理更加方便灵活；,更有意义的搜索21,4.3 CSS,布局基础,调用样式表,在符合,web,标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改,.css,文件而改变页。
