《中小学网页设计课件css基础公开课教案教学设计课件案例测试练习卷题》由会员分享，可在线阅读，更多相关《中小学网页设计课件css基础公开课教案教学设计课件案例测试练习卷题（41页珍藏版）》请在金锄头文库上搜索。
1、第13章 CSS基础网页设计与制作Cascading Style Sheet 层叠样式表n网页包括的内容内容和和样式样式。nCSS就是让内容和样式分离开来内容和样式分离开来，HTML只控制网页的内容，内容的样式由CSS来控制。CSS的优点n可以更加精细的控制网页的内容。n比HTML更加丰富。n便于重用、修改n 基于Web标准的网页设计方法的设计基础CSS样式的优点：样式的优点：n只修改一个只修改一个.css文件就可以改变页数不定的外观和格式文件就可以改变页数不定的外观和格式（避免了一个一个网页的修改，大大减少了重复劳动的（避免了一个一个网页的修改，大大减少了重复劳动的工作量。）工作量。）n可以
2、可以“随心所欲随心所欲”地控制页面布局和外观；地控制页面布局和外观；n在所有浏览器和平台之间具有较好的兼容性；在所有浏览器和平台之间具有较好的兼容性；n精简网页，提高下载速度（简化了网页的格式代码，外精简网页，提高下载速度（简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。置的格式将被只保存一次）。一、CSS分类nCSS按其位置可以分成三种：按其位置可以分成三种：n内嵌样式内嵌样式(InlineStyle
3、)n内部样式表内部样式表(InternalStyleSheet)n外部样式表外部样式表(ExternalStyleSheet)1、内嵌样式(Inline Style)nInline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。 这个Style定义里面的文字是20px字体，字体颜色是红色。 2、内部样式表(Internal Style Sheet)n内部样式表是写在内部样式表是写在HTML的的里面的。内部里面的。内部样式表只对所在的网页有效。样式表只对所在的网页有效。n内部样式表内部样式表(InternalSytleSheet)要用到要用到Style这个这个Tag，写法如下：写法
4、如下：内部css对对HTML标记直接定义标记直接定义h1font-family:楷体楷体;color:yellowh2font-family:黑体黑体;color:blue此行文字为黄色楷体的字体此行文字为黄色楷体的字体此行文字为蓝色黑体的字体此行文字为蓝色黑体的字体nnn第一个第一个CSSnnnnnn应用了应用了s1样式样式,绿色，字体大小绿色，字体大小57pxn应用了应用了s2样式，字体为红色样式，字体为红色n3.1、引入外部CSS1linkheadlink rel=”stylesheet” href=”*.css” type=”text/css” /head3.2引入外部CSS1impo
5、rt import url(“1.css”);Import 和 link 的区别n两种外部样式表的调用方法虽然有所不同，但它们的效果是一样的，只是嵌入CSS外部表的时候，import把CSS文件的内容复制到HTML文件中，link直接向CSS文件读取所定义的CSS样式。n小的CSS文件采用import，大的文件采用link，在实际应用中，CSS文件一般很小，两种方法差别很小。使用外部使用外部(Extenal)样式表，相对于内嵌样式表，相对于内嵌(Inline)和内和内部式部式(Internal)的，有以下优点：的，有以下优点：n样式代码可以复用。样式代码可以复用。一个外部一个外部CSSCSS文
6、件，可以文件，可以被很多网页共用。被很多网页共用。 n便于修改。便于修改。如果要修改样式，只需要修改如果要修改样式，只需要修改CSSCSS文件，而不需要修改每个网页。文件，而不需要修改每个网页。n提高网页显示的速度。提高网页显示的速度。 （外部的样式表会被（外部的样式表会被浏览器保存在缓存里，加快了下载显示的速度，浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。的格式将被只保存一次）。二、层叠二、层叠(Cascading)nCSS第一个字母，是第一个字母，是Cascading，意为，意为层叠层叠。
7、它是指不同来源的样式它是指不同来源的样式(Styles)可以合在一起，可以合在一起，形成一种样式。形成一种样式。nCascading的顺序是：的顺序是：q内嵌样式表内嵌样式表(InlineStyle)(优先级最高优先级最高)q内部样式表内部样式表(InternalStyleSheet)q外部样式表外部样式表(ExtenalStyleSheet)nimportnlinkq浏览器缺省浏览器缺省(browserdefault)(优先级最低优先级最低)三、基本语法 n一个样式(Style)的语法由三部分构成：Selector(选择符)，属性(Property)，属性值(Value)。nselector
8、 n property: value；n property: value；n n注意：如果值为若干单词，则要给值加引号：p font-family: sans serif; 第一个第一个CSS应用了应用了s1样式样式,绿色，字体大小绿色，字体大小57px应用了应用了s2样式，字体为红色样式，字体为红色n自定义样式（类选择符）的命名规则：自定义样式（类选择符）的命名规则：q必须以必须以.开头开头q不能以数字开头不能以数字开头q不能包含汉字和特殊字符不能包含汉字和特殊字符四、常见样式属性1、CSS字体属性说明属性值字体风格font-stylenormal, italic(oblique)字体变量f
9、ont-variantnormal, small-caps（小的大写字母）字体浓淡font-weightnormal, bold字体大小font-size字体名称font-family例如：宋体、隶书、Arial等等字体属性font综合以上字体颜色colorred , #FF00002、CSS常用文本属性说明属性值文本对齐text-alignleft、right、center、justify(两端对齐) 文本修饰text-decorationnone、underline、overline、line-through文本缩进text-indentlength、percentage行高属性line-
10、heightnormal、length、percentage字间距letter-spacingnormal、length大小写text-transformuppercase、lowercase、capitalize;nonelength(长度，可以用长度，可以用绝对单位绝对单位(cm,mm,in,pt,pc)或者或者相对单位相对单位(em,ex,px)percentage(百分比，相当于父对象宽度的百分比百分比，相当于父对象宽度的百分比)相对长度单位em相对于当前对象内文本的字体尺寸ex相对于字符“x” 的高度。通常为字体高度的一半px像素（Pixel）%百分比Percentage绝对长度单位
11、pt点（Point）pc派卡（Pica）。相当于我国新四号铅字的尺寸in英寸（Inch）cm厘米（Centimeter）mm毫米（Millimeter）单位换算：1in = 2.54cm = 25.4 mm = 72pt = 6pc尺寸尺寸n % 百分比n in 英寸n cm厘米n mm毫米n em 1em 等于当前的字体尺寸。n 2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。n 在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。n ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的
12、一半。)n pt磅 (1 pt 等于 1/72 英寸)n pc12 点活字 (1 pc 等于 12 点)n px像素 (计算机屏幕上的一个点)颜色颜色n (颜色名) 颜色名称 (比如 red)n rgb(x,x,x) RGB 值 (比如 rgb(255,0,0)n rgb(x%, x%, x%)RGB 百分比值 (比如 rgb(100%,0%,0%)n #rrggbb十六进制数 (比如 #ff0000)3、背景属性说明属性值背景颜色background-colorred，#ff0000背景图片background-imageurl()背景重复background-repeatrepeat-xr
13、epeat-yno-repeat背景附着background-attachmentscroll、fixed背景位置background-positionleft top 背景background综合3、CSS position 属性属性nposition属性规定元素的定位类型。属性规定元素的定位类型。n定义建立元素布局所用的定位机制。定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默型。相对定位元素会相对于它在正常
14、流中的默认位置偏移。认位置偏移。3、CSS position 属性属性nabsolute生成绝对定位的元素，相对于生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位定位以外的第一个父元素进行定位。元素的位置通过置通过“left”,“top”,“right”以及以及“bottom”属性进行规定。属性进行规定。nfixed生成绝对定位的元素，相对于浏览器窗生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过口进行定位。元素的位置通过left,top,right以及以及bottom属性进行规定。属性进行规定。3、CSS position 属性属性nrelative
15、生成相对定位的元素，相对于其正常生成相对定位的元素，相对于其正常位置进行定位。因此，位置进行定位。因此，“left:20”会向元素的会向元素的LEFT位置添加位置添加20像素。像素。nstatic默认值。没有定位，元素出现在正常的默认值。没有定位，元素出现在正常的流中（忽略流中（忽略top,bottom,left,right或者或者z-index声明）。声明）。ninherit规定应该从父元素继承规定应该从父元素继承position属性属性的值。的值。3、CSS position 属性属性h2.pos_leftposition:relative;left:-20pxh2.pos_rightpo
16、sition:relative;left:20px这是位于正常位置的标题这是位于正常位置的标题这个标题相对于其正常位置向左移动这个标题相对于其正常位置向左移动这个标题相对于其正常位置向右移动这个标题相对于其正常位置向右移动相对定位会按照元素的原始位置对该元素进行移动。相对定位会按照元素的原始位置对该元素进行移动。样式样式left:-20px从元素的原始左侧位置减去从元素的原始左侧位置减去20像素。像素。样式样式left:20px向元素的原始左侧位置增加向元素的原始左侧位置增加20像素。像素。3、CSS position 属性属性h2.pos_absposition:absolute;left:
17、100px;top:150px这是带有绝对定位的标题这是带有绝对定位的标题通过绝对定位，元素可以放置到页面上的任何位置。下面通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧的标题距离页面左侧100px，距离页面顶部，距离页面顶部150px。3、CSS position 属性属性p.oneposition:fixed;left:5px;top:5px;p.twoposition:fixed;top:30px;right:5px;一些文本。一些文本。更多的文本。更多的文本。第14章 CSS选择符n一、class选择符n二、标签选择符n三、ID选择符一、class选择符nclas
18、s选择符允许重复使用，其命名必须以选择符允许重复使用，其命名必须以“.”开头，开头，这样的样式可以与任何标签组合使用这样的样式可以与任何标签组合使用1、通用的类选择器、通用的类选择器n例如：例如：q定义：定义：.s1color:green；q调用：调用：绿色绿色q绿色绿色2、只能与指定标签一起使用、只能与指定标签一起使用n例如：例如：q定义：定义：p.s1color:green；q调用：调用：绿色绿色q绿色绿色q这里只有这里只有标记显示为绿色。标记显示为绿色。二、标签选择符n指以指以HTML标签作为名称的选择符，通过标签作为名称的选择符，通过CSS可以重新定义这些可以重新定义这些HTML标签的
19、显示样式。这标签的显示样式。这些重新定义的标签会自动按照些重新定义的标签会自动按照CSS中重新的定中重新的定义得样式显示义得样式显示1、单标签选择符、单标签选择符n例如：例如：q定义：定义：pcolor:green；q调用：调用：绿色绿色q大家好大家好q这里所有的这里所有的标记都显示为绿色标记都显示为绿色2、包含选择符、包含选择符n定义只有在指定标签内的标签才显示定义只有在指定标签内的标签才显示CSS样式样式n例如：例如：q定义：定义：pspancolor:green；q调用：调用：绿绿颜色颜色q大大家好家好qhelloq这里的只有这里的只有p标记中的标记中的span标记才显示为绿色，即标记才
20、显示为绿色，即字字“绿绿”显示为绿色显示为绿色三、ID选择符nID的含义是标识，ID选择符可以标识网页中的元素，它可以实现的功能和CSS选择符相似。与CLASS选择符不同的是，ID选择符在一个网页中按照规范只能使用一次，并且可以被Javascript在需要的时候调用。n例如：例如：q定义：定义：#boxcolor:green；background-color:yellow;q调用：调用：这里的文字是绿色的，背景颜这里的文字是绿色的，背景颜色是黄色色是黄色ndiv标记内的标记的样式标记内的标记的样式n例如：例如：q定义：定义：#boxspancolor:green；background-colo
21、r:yellow;q调用：调用：大家好大家好这里的文字这里的文字是绿色的，背景颜色是黄色是绿色的，背景颜色是黄色三种定义和调用的方法定义方法定义方法调用方法调用方法说明 h1(或其他任何存在的标签）直接使用原有标签重新定义已有标签。#f1选择性调用，原则上一个文件中只能用一次。.s1H1.s1选择性调用，推荐。群组选择符群组选择符定义将多个定义将多个CSS样式定义为相同的内容，多个样式定义为相同的内容，多个CSS样式间用样式间用“，”分隔。分隔。n例如：例如：q定义：定义：p,h1,h2color:green；q调用：调用：绿色绿色q大家好大家好qhelloq这里的这里的p、h1、h2标记都显
22、示为绿色标记都显示为绿色四、CSS伪类(pseudo class)n超链接伪类超链接伪类,伪类是最常用的伪类伪类是最常用的伪类。n例句：例句：na:linkcolor:#FF0000/*未被访问的链接未被访问的链接红色红色*/na:visitedcolor:#00FF00/*已被访问过的链接已被访问过的链接绿绿色色*/na:hovercolor:#FFFF00/*鼠标悬浮在上的链接鼠标悬浮在上的链接橙橙色色*/na:activecolor:#0000FF/*鼠标点中激活链接鼠标点中激活链接蓝色蓝色*/CSS伪类的语法有两种n第一种： selector:pseudo-class property
23、: valueq例如： a:link color:red n第二种：第二种：selector.class:pseudo-class property: valueq例如：例如：a.c1:link color:red 其他伪类n Selector:first-letterproperty: value Selector:first-lineproperty: value 例如：np font-size:30px;color:blue;np:first-letter color:red;font-size:200%;float:left; np:first-line color:pink; font-variant: small-caps; letter-spacing: 200%;作业1：用CSS完成下列效果n1、文字为粗体，12px，斜体，带删除线（line-through），黑体n2、文字中都是大写字母，首行缩进为30px，字符间距为5px，行高为14px，文字水平对齐方式为右对齐。作业2n自己建一个css文件，完成下列样式的定义（1）h1：红色，字体大小12px，bold。（2）#f3: 幼圆，水平居中，字符间距：10px，下划线。（3）.s1:绿色，段落行距：8px，首行缩进：25px。n在html中调用这个css文件中的这三个样式。
