第04章CSS应用.ppt

* 讲解要点： * * 第四章 CSS样式表 回顾 表单中提交数据的方法有那两种及其区别？ 创建一个登录界面需要哪些表单元素？ target属性取值可以为哪些及其含义？ 本章任务 美化“宝贝分类”页面 制作并美化“注册”页面 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 本章目标 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 内容相同 外观不同 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 样式表的基本语法 样式表的基本结构 STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} …… /STYLE 声明文档样式表结束 文档样式表开始，类型为CSS样式 样式规则 选择器 样式规则 P {color:red; font-size:30px; font-family:隶书;} 属性 属性的值 样式表的基本语法 HTML HEAD TITLE样式规则/TITLE STYLE type=text/css P { color:red; font-family:隶书; font-size:24px;} /STYLE /HEAD BODY H2静夜思/H2 P床前明月光，/P P疑是地上霜。/P P我是郭德刚，/P P低头思故乡。/P /BODY /HTML 本页面中所有的P标签都应用了此样式 所有的段落都采用P样式，保证风格统一 用分号隔开 选择器 如何编写此样式?字体类型为律书、大小24px STYLE type=text/css .red { color:red; font-family:隶书; font-size:24px; } …… /STYLE 样式表的基本语法 如果希望其他的标签也能采用P标签的样式，怎么办？ 其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。 类样式(class) .类名 样式规则 样式表的基本语法 HEAD TITLE样式规则/TITLE STYLE type=text/css .red { color:red; font-family:隶书; } /STYLE /HEAD BODY H2 class=red静夜思/H2 P class=red床前明月光，/P P class=red疑是地上霜。/P P我是郭德刚，/P P class=red低头思故乡。/P /BODY CLASS类选择器 为类选择器定义的样式规则 应用类选择器 class＝”类名“ H2和P标签要应用同一样式 如何实现这样的样式效果？字体类型都为隶书 常用的样式属性 文本属性 文本属性 说 明 font-size 字体大小 font-family 字体类型 font-style 字体样式 color 设置或检索文本的颜色 text-align 文本对齐 使用font-size、font-family、 color实现 宋体，字体大小12px 字体大小16px 要实现如下图所示的文本样式，该如何编写？ 常用的样式属性 STYLE type=text/css P { font-size: 12px; font-family: 宋体; text-align:left; } .bigFont { font-size: 16px; color:red; } /STYLE /HEAD BODY 【新闻】[设搜狐为首页] 9月1日 P class=bigFont·世锦赛刘翔12秒95夺冠成就大满贯/P P·我国实施不安全食品召回制度 遏制非法出口/P ….. 声明P标签样式 声明名称为bigFont类样式,它可被多个标签共享 应用类样式用 class＝”类名“ 小结1 编写如下图所示效果对应的HTML代码 黑体，字体大小20px 字体大小14px，蓝色 常用的样式属性 背景属性 背景属性 说 明 background-color 设置背景颜色 background-image 设置背景图像 background-repeat 设置一个指定的图像如何被重复 可取值repeat-x、 repeat、 no-repeat、repeat-y STYLE type=text/css ……