《PHP程序设计案例教程 教学课件 ppt 作者 陈建国 第2讲 第2.2讲 CSS知识巩固》由会员分享，可在线阅读，更多相关《PHP程序设计案例教程 教学课件 ppt 作者 陈建国 第2讲 第2.2讲 CSS知识巩固（40页珍藏版）》请在金锄头文库上搜索。
1、第2.2 CSS知识巩固,教师姓名 教研室名称 2012年01月01日,机械工业出版社,内容要点 CONTENTS,样式表能实现内容与样式的分离，方便团队开发,为什么需要CSS样式表,程序员写代码,美工做样式,内容与样式和谐统一的完整网页,height,border,基本属性,width,bgcolor,background,color,HTML知识回顾,现设置表格宽度.,HTML知识回顾,新的属性写法,1 样式表的基本语法,style=“color:red; font-size:30px; font-family:隶书“,height,border,2) 基本属性,width,bgcolor
2、,background,color,height,border,width,Backgournd-color,Background-image,color,1 样式表的基本语法,CSS样式 style=,1 样式表的基本语法,行内样式,内嵌样式,外部样式表,CSS的声明方法,2 行内（行间）样式表, 设置属性 这个段落应用了样式 这个段落按默认样式显示 ,为标签p指定样式,本段标签采用了行内样式, .red1 color:red; font-family:“隶书“; font-size:24px; ,如果一个页面有多个标签使用同一种效果，怎么办？,2 样式表的基本语法,多个标签采用相同的样式，
3、所以要为它们定义一个共享样式。,内部样式表,选择器(选择符),样式规则,1 样式表的基本语法,行内样式,内嵌样式,外部样式表,CSS的声明方法,2 内部（内嵌）样式表, 样式规则 .red1 color:red; font-family:“隶书“; 静夜思 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 ,选择器,样式规则,class”选择器“,和标签要应用同一样式,如何实现这样的样式效果？字体类型都为隶书,3 外部样式表文件,如果希望一个网站中多个页面的样式保持一致， 如何解决？,使用外部样式表文件样式表可以解决,3 外部样式表文件,行内样式,内嵌样式,外部样式表,CSS的声明方法,
4、根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表,3 外部样式表文件,使用LINK（链接）标签 : ,3 外部样式表文件,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页绑定,第三步：浏览查看各网页,演示：使用外部样式表1 使用外部样式表2,引入的样式文件,3 外部样式表文件,选择符 属性1：值1； 属性2： 值2； ,4 CSS样式表设置,CSS代码编写格式,CSS选择符有5种,标签选择符 Id选择符 Class选择符 伪类及伪对象选择符 通配选择符,4 CSS样式表设置,CSS选择符有5种,标签选择符 Id选择符 Class选择符 伪类及伪对象选择
5、符 通配选择符, 样式规则 P color:red; font-family:“隶书“; H2 color:back; font-size:20px; 标题2 床前明月光， 疑是地上霜， ,使用标签名作选择符；页面中所有同类标签均被该样式修饰。,4 CSS样式表设置,CSS选择符有5种,标签选择符 Id选择符 Class选择符 伪类及伪对象选择符 通配选择符, 样式规则 #P1 color:red; font-family:“隶书“; 标题2 床前明月光， 疑是地上霜， ,为标签设置ID属性，用”#”+ID作选择符；该ID的标签被该样式修饰。,4 CSS样式表设置,CSS选择符有5种,标签选择
6、符 Id选择符 Class选择符 伪类及伪对象选择符 通配选择符, 样式规则 .P1 color:red; font-family:“隶书“; 标题2 床前明月光， 疑是地上霜， ,为标签设置class属性，用”.”+某class名称作选择符；页面中所有设置class=某class名称的标签均被该样式修饰。,4 CSS样式表设置,CSS选择符有5种,标签选择符 Id选择符 Class选择符 伪类及伪对象选择符 通配选择符, 样式规则 .a1:hover color:red .a1:visited color:green 标题2 床前明月光， 疑是地上霜， ,用id或class名+“：伪对象名“
7、 作选择符；该ID或class的标签被该样式修饰；并有多种效果。,4 CSS样式表设置,CSS选择符有5种,标签选择符 Id选择符 Class选择符 伪类及伪对象选择符 通配选择符,4 CSS样式表设置,CSS选择符有5种,标签选择符 Id选择符 Class选择符 伪类及伪对象选择符 通配选择符, 样式规则 * color:green; font-family:“宋体“; 标题2 床前明月光， 疑是地上霜， ,用”*”作选择符；该页面所有标签被该样式修饰。,4 CSS样式表设置,课堂练习,分别使用普通属性设置, CSS行内(行间)样式表, 内部（内嵌）样式表, 外部样式表的设置方法制作该网页.
8、,本章任务,制作会员注册页面,制作电影介绍页面,回顾: CSS知识,行内样式,内嵌样式,外部样式表,CSS的声明方法, 样式规则 .red1 color:red; font-family:“隶书“; 静夜思 床前明月光， 疑是地上霜。 我是郭德刚， 低头思故乡。 ,使用LINK（链接）标签 : ,回顾: CSS知识,常用属性,width:180px;,宽度 高度 边框 背景颜色 背景图片 字体颜色 字体大小 字体粗细 水平对齐 垂直对齐,height:25px;,border-width:1px; border-style:solid; border-color:#aadafe;,backgr
9、ound-color:#ebf8ff;,background-image:url(images/btn_register.gif);,color:#1f8f00;,font-size:12px;,font-weight:bold;,text-align:left;,vertical-align:top;,任务一: 制作会员注册页面,任务一: 制作会员注册页面,实现步骤 (1) 编写HTML代码_不设置属性 (2) 设置页面表格属性 (3) 设置文本框按钮属性,单元格合并 colspan=“合并列数” rowspan=“合并行数”,任务一: 制作会员注册页面,实现步骤 (1) 编写HTML代码_
10、不设置属性 相关知识点,1) 新建网站文件夹 2) 新建网页”会员注册.html” 3) 编写HTML代码.,任务一: 制作会员注册页面,实现步骤 (1) 编写HTML代码_不设置属性 相关代码:,外部样式表使用,任务一: 制作会员注册页面,实现步骤 (2)设置页面表格属性 相关知识点,1) 新建样式文件”外部样式表.css” 2) 为”会员注册.html”添加样式表引用 3) 编写相关标签的样式 4) 调用相关标签样式,任务一: 制作会员注册页面,实现步骤 (2)设置页面表格属性 相关代码:,外部样式表使用,任务一: 制作会员注册页面,实现步骤 (3)设置文本框按钮属性 相关知识点,1) 继续在”外部样式表.css” 编写相关标签的样式 4) 在”会员注册.html”页面调用相关标签样式,任务一: 制作会员注册页面,实现步骤 (3)设置文本框按钮属性 相关代码:,任务二: 制作电影页面,实现步骤 (1) 编写HTML代码_不设置属性 (2) 设置页面顶层表格属性 (3) 设置子表格属性,任务二: 制作电影介绍页面,
