CSS样式表复习讲义.docVIP

CSS样式表复习讲义 一、CSS概述 CSS的全称是Cascading Style Sheet，通常称为“层叠样式表”。是网页设计不可缺少的工具之一。 CSS是一组样式，它是用来进行网页风格设计的CSS样式和没使用CSS样式的对比。（1.html） 二、CSS样式内容形式和应用 对象｛a属性:a属性值；b属性:b属性值；……….. ；x属性:x属性值；｝ 对象：表示要定义样式的对象名称 属性：属性名称，如color(前景色) 属性值：设置属性的具体值，如给color设置red或#00FF00。（常见属性另见文件） （一）、对象：可以是： 1、HTML标签。如：body、p、a等；只对该标签起作用。 例： P { color: #FFFFFF; background-color: #999999; font-family: 宋体; font-size: 30px; } 直接应用到相同标签： P使用样式表的文字/P *2、类对象（class），以“.”开始，名称可以是字母和数字的组合。 例： .myfirst { font-family: 宋体; font-size: 12px; color: #FF0000; } 应用： font class=myfirst使用样式表的文字/font *3、ID对象，以“#”开始，名称可以是字母和数字的组合。 例： #hh { font-family: 宋体; font-size: 36px; font-style: italic; } 应用：font id=hh我用了css样式表/font 【思考】查看2.html的代码，使用了css样式的有哪几处（） 三、在网页中添加CSS的方法 1、嵌入式：CSS代码属性和值书写在style= 之中既可。 【格式示范】 td style=font-size:12px; color:#999999; 使用样式表的文字/td 【特点】：直接使用，作为标签style属性的值，仅对本标签应用样式。 2、内联式：位于HTML文件的头部，即head/head标签内，并以style开始，以/style结束。 【格式示范】 head style type=“text/css” !-- .dy{ Background-color:#eeeeee; } -- /style /head 【特点】：仅对当前页面应用样式 3、外联式：将CSS样式代码单独编写在一个独立文件中，由页面进行调用，多个网页可以同时使用一个样式表文件。样式表文件格式为“.css”。 【格式示范】 在head标签内，用link连接样式表文件style.css head link href=“style.css” rel=“stylesheet” type=“text/css” /head style.css 内容为： .myfirst { font-family: 宋体; font-size: 12px; color: #FF0000; } 【特点】：可以对多个网页进行相同风格的布局和外观设置 代码书写注意： 语法上一定要用：1、英文 2、半角的字符。 １、“” （错）　提示：不能用中文标点 (对) 2、；和; 3、：和: 【课堂巩固】 1. 内联式样式表定义部分，应位于哪个标签( ) A. TABLE/TABLE B. HTML/HTML C. HEAD/HEAD D. TD/TD 2.根据下图判断当前页面使用的CSS加入方式是( ) A. 嵌入式样式表 B. 内联式样式表 C. 外联式样式表 D. 依赖式样式表 3. 从index.htm中的代码link href=style/home.css rel=stylesheet type=text/css可以看出，index.htm采用了哪种方式的css样式表？( ) A. 内嵌样式 B. 内部样式表 C. 外部样式表 D. 混合样式表 4. 在HTML中加入CSS的方法有多种，其中把样式代码定义成一个文件，然后链接到被引用的网页中，这种方法称为( ) A. 直接编写 B. 外联式样式表 C. 内联式样式表 D. 嵌入式样式表 5. 在网站开发时，为了保证网站各个页面风格的一致，最好采用( ) A. 外联式样式表 B. 内联式样式表 C. 嵌入式样式表 D. JavaScript 6. 网站中若干网页，若使用同一种文字效果，使用下列哪一种样式表最合适？( ) A. 嵌入式样式表 B. 内嵌式样式表 C. 外联式样式表 D. 静态样式表 7. 所谓外联式样式表，就是把样式定义为一个文件，然后在网页中调用该文件，这个文件的