网页设计课件css基础.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,网页设计与制作,*,第,13,章,CSS,基础,网页设计与制作,Cascading Style Sheet,层叠样式表,网页包括的,内容,和,样式,。,CSS,就是让,内容和样式分离开来,，,HTML,只控制网页的内容，内容的样式由,CSS,来控制。,CSS,的优点,可以更加精细的控制网页的内容。,比,HTML,更加丰富。,便于重用、修改,基于,Web,标准的网页设计方法的设计基础,CSS,样式的优点：,只修改一个,.,css,文件就可以改变页数不定的外观和格式（避免了一个一个网页的修改，大大减少了重复劳动的工作量。）,可以“随心所欲”地控制页面布局和外观；,在所有浏览器和平台之间具有较好的兼容性；,精简网页，提高下载速度（简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。,一、,CSS,分类,CSS,按其位置可以分成三种：,内嵌样式,(Inline Style),内部样式表,(Internal Style Sheet),外部样式表,(External Style Sheet),1,、内嵌样式,(Inline Style),Inline Style,是写在,Tag,里面的。内嵌样式只对所在的,Tag,有效。,这个,Style,定义里面的文字是,20px,字体，字体颜色是红色。,2,、内部样式表,(,Internal Style Sheet,),内部样式表是写在,HTML,的,里面的。内部样式表只对所在的网页有效。,内部样式表,(Internal,Sytle,Sheet),要用到,Style,这个,Tag,，写法如下：,内部,css,对,HTML,标记直接定义,h1 font-family:,楷体,;,color:yellow,h2 font-family:,黑体,;,color:blue,此行文字为黄色楷体的字体,此行文字为蓝色黑体的字体,第一个,CSS,应用了,s1,样式,绿色，字体大小,57px,应用了,s2,样式，字体为红色,3.1,、引入外部,CSS1link,head,link,rel,=”,stylesheet,”,href,=”*.,css,”type=”text/,css,”,/head,3.2,引入外部,CSS1import,import url(“1.css”);,Import,和,link,的区别,两种外部样式表的调用方法虽然有所不同，但它们的效果是一样的，只是嵌入,CSS,外部表的时候，,import,把,CSS,文件的内容复制到,HTML,文件中，,link,直接向,CSS,文件读取所定义的,CSS,样式。,小的,CSS,文件采用,import,，大的文件采用,link,，在实际应用中，,CSS,文件一般很小，两种方法差别很小。,使用外部,(,Extenal,),样式表，相对于内嵌,(Inline),和内部式,(Internal),的，有以下优点：,样式代码可以复用。,一个外部,CSS,文件，可以被很多网页共用。,便于修改。,如果要修改样式，只需要修改,CSS,文件，而不需要修改每个网页。,提高网页显示的速度。,（外部的样式表会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。,二、层叠,(Cascading),CSS,第一个字母，是,Cascading,，意为,层叠,。它是指不同来源的样式,(Styles),可以合在一起，形成一种样式。,Cascading,的顺序是：,内嵌样式表,(Inline Style)(,优先级最高,),内部样式表,(Internal Style Sheet),外部样式表,(,Extenal,Style Sheet),import,link,浏览器缺省,(browser default)(,优先级最低,),三、基本语法,一个样式,(Style),的语法由三部分构成：,Selector(,选择符,),，属性,(Property),，属性值,(Value),。,selector,property:value,；,property:value,；,第一个,CSS,应用了,s1,样式,绿色，字体大小,57px,应用了,s2,样式，字体为红色,自定义样式（类选择符）的命名规则：,必须以,.,开头,不能以数字开头,不能包含汉字和特殊字符,四、常见样式属性,1,、,CSS,字体属性,说明,属性,值,字体风格,font-style,normal,italic(oblique,),字体变量,font-variant,normal,small-caps,（小的大写字母）,字体浓淡,font-weight,normal,bold,字体大小,font-size,字体名称,font-family,例如：宋体、隶书、,Arial,等等,字体属性,font,综合以上,字体颜色,color,red,#FF0000,2,、,CSS,常用文本属性,说明,属性,值,文本对齐,text-align,left,、,right,、,center,、,justify(,两端对齐,),文本修饰,text-decoration,none,、,underline,、,overline,、,line-through,文本缩进,text-indent,length,、,percentage,行高属性,line-height,normal,、,length,、,percentage,字间距,letter-spacing,normal,、,length,大小写,text-transform,uppercase,、,lowercase,、,capitalize;none,length(,长度，可以用,绝对单位,(cm,mm,in,pt,pc),或者,相对单位,(,em,ex,px,),percentage(,百分比，相当于父对象宽度的百分比,),相对长度单位,em,相对于当前对象内文本的字体尺寸,ex,相对于字符“,x,”,的高度。通常为字体高度的一半,px,像素（,Pixel,）,%,百分比,Percentage,绝对长度单位,pt,点（,Point,）,pc,派卡（,Pica,）。相当于我国新四号铅字的尺寸,in,英寸（,Inch,）,cm,厘米（,Centimeter,）,mm,毫米（,Millimeter,）,单位换算：,1in=2.54cm=25.4 mm=72pt=6pc,3,、背景属性,说明,属性,值,背景颜色,background-color,red,，,#ff0000,背景图片,background-image,url,(),背景重复,background-repeat,repeat-x,repeat-y,no-repeat,背景附着,background-attachment,scroll,、,fixed,背景位置,background-position,left top,背景,background,综合,第,14,章,CSS,选择符,一、,class,选择符,二、标签选择符,三、,ID,选择符,一、,class,选择符,class,选择符允许重复使用，其命名必须以“,.”,开头，这样的样式可以与任何标签组合使用,1,、通用的类选择器,例如：,定义：,.s1color:green,；,调用：,绿色,绿色,2,、只能与指定标签一起使用,例如：,定义：,p.s1 color:green,；,调用：,绿色,绿色,这里只有,标记显示为绿色。,二、标签选择符,指以,HTML,标签作为名称的选择符，通过,CSS,可以重新定义这些,HTML,标签的显示样式。这些重新定义的标签会自动按照,CSS,中重新的定义得样式显示,1,、单标签选择符,例如：,定义：,p,color:green,；,调用：,绿色,大家好,这里所有的,标记都显示为绿色,2,、包含选择符,定义只有在指定标签内的标签才显示,CSS,样式,例如：,定义：,p span,color:green,；,调用：,绿,颜色,大,家好,hello,这里的只有,p,标记中的,span,标记才显示为绿色，即字“绿”显示为绿色,三、,ID,选择符,ID,的含义是标识，,ID,选择符可以标识网页中的元素，它可以实现的功能和,CSS,选择符相似。与,CLASS,选择符不同的是，,ID,选择符在一个网页中按照规范只能使用一次，并且可以被,Javascript,在需要的时候调用。,例如：,定义：,#box,color:green,；,background-,color:yellow,;,调用：,这里的文字是绿色的，背景颜色是黄色,div,标记内的标记的样式,例如：,定义：,#box,spancolor:green,；,background-,color:yellow,;,调用：,大家好,这里的文字是绿色的，背景颜色是黄色,三种定义和调用的方法,定义方法,调用方法,说明,h1(,或其他任何存在的标签）,直接使用原有标签,重新定义已有标签。,#f1,选择性调用，原则上一个文件中只能用一次。,.s1,H1.s1,选择性调用，推荐。,群组选择符,定义将多个,CSS,样式定义为相同的内容，多个,CSS,样式间用“，”分隔。,例如：,定义：,p,h1,h2,color:green,；,调用：,绿色,大家好,hello,这里的,p,、,h1,、,h2,标记都显示为绿色,四、,CSS,伪类,(pseudo class),超链接伪类,伪类是最常用的伪类,。,例句：,a:link,color:#FF0000/*,未被访问的链接 红色*,/,a:visited,color:#00FF00/*,已被访问过的链接 绿色*,/,a:hover,color:#FFFF00/*,鼠标悬浮在上的链接 橙色*,/,a:active,color:#0000FF/*,鼠标点中激活链接 蓝色*,/,CSS,伪类的语法有两种,第一种：,selector:pseudo,-class property:value,例如：,a:link,color:red,第二种：,selector.class:pseudo,-class property:value,例如：,a.c1:link,color:red,其他伪类,Selector,:first-letter,property:value,Selector,:first-line,property:value,例如：,p font-size:30px;color:blue;,p:first,-letter,color:red;font-size:200%;float:left;,p:first,-line,color:pink,;font-variant:small-caps;letter-spacing:200%;,作业,1,：用,CSS,完成下列效果,1,、文字为粗体，,12px,，斜体，带删除线（,line-through,），黑体,2,、文字中都是大写字母，首行缩进为,30px,，字符间距为,5px,，行高为,14px,，文字水平对齐方式为右对齐。,作业,2,自己建一个,css,文件，完成下列样式的定义,（,1,）,h1,：红色，字体大小,12px,，,bold,。,（,2,）,#f3:,幼圆，水平居中，字符间距：,10px,，下划线。,（,3,）,.s1:,绿色，段落行距：,8px,，首行缩进：,25px,。,在,html,中调用这个,css,文件中的这三个样式。,