PHP程序设计第2.2讲 CSS知识巩固.pptVIP

任务一: 制作会员注册页面 《PHP程序设计》 --教师姓名 */39 * 1. CSS的基本语法 2. 行内样式表 3. 内部样式表 4. 外部样式表 内容要点 CONTENTS  5. CSS样式表设置 样式表能实现内容与样式的分离，方便团队开发 为什么需要CSS样式表 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 height border 基本属性 width bgcolor background color HTML知识回顾 table style=“width:100px; height:200px” trtd/td/tr /table 现设置表格宽度. HTML知识回顾 新的属性写法 table width=“100px” height=“200px” trtd/td/tr /table 1 样式表的基本语法 style=color:red; font-size:30px; font-family:隶书} 属性 属性的值 height border 2) 基本属性 width bgcolor background color height border width Backgournd-color Background-image color 1 样式表的基本语法 CSS样式 style= 1 样式表的基本语法 行内样式 内嵌样式 外部样式表 CSS的声明方法 2 行内（行间）样式表 HTML HEAD TITLE设置属性/TITLE /HEAD BODY P style = color:red;font-size:30px;font-family:隶书; 这个段落应用了样式 P 这个段落按默认样式显示 /BODY /HTML 为标签p指定样式 本段P标签采用了行内样式 STYLE type=text/css .red1 { color:red; font-family:隶书; font-size:24px; } …… /STYLE 如果一个页面有多个标签使用同一种效果，怎么办？ 2 样式表的基本语法 多个标签采用相同的样式，所以要为它们定义一个共享样式。 内部样式表 选择器(选择符) 样式规则 1 样式表的基本语法 行内样式 内嵌样式 外部样式表 CSS的声明方法 2 内部（内嵌）样式表 HEAD TITLE样式规则/TITLE STYLE type=text/css .red1 { color:red; font-family:隶书; } /STYLE /HEAD BODY H2 class=red1静夜思/H2 P class=red1床前明月光，/P P class=red1疑是地上霜。/P P我是郭德刚，/P P class=red低头思故乡。/P /BODY 选择器 样式规则 class＝”选择器“ H2和P标签要应用同一样式 如何实现这样的样式效果？字体类型都为隶书 3 外部样式表文件 如果希望一个网站中多个页面的样式保持一致， 如何解决？ 使用外部样式表文件样式表可以解决 3 外部样式表文件 行内样式 内嵌样式 外部样式表 CSS的声明方法 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 3 外部样式表文件 样式文件.css 网页2 网页3 网页1 …… 使用LINK（链接）标签 : HEAD LINK href=newsyle.css rel=stylesheet type=text/css /HEAD 3 外部样式表文件 第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定 第三步：浏览查看各网页 样式文件： newstyle.css Link_Outcss1.html Link_Outcss2.html 演示：使用外部样式表1 使用外部样式表2 引入的样式文件 3 外部样式表文件 选择符 { 属性1：值1； 属性2： 值2； … } 4 CSS样式表设置 CSS代码编写格式 CSS选择符有5种 标签选择符 Id选择符 Class选择符 伪类及伪对象选择符 通配选择符 4 CSS样式表设置 CSS选择符有5种 标签选择符 Id选择符 Class选择符 伪类及伪对象选择符 通配选择符 HEAD TITLE样式规则/TITLE STYLE type=text/css P { color:red; font-family:隶书; } H2 { color:back;