第四讲 CSS样式表1.pptVIP

第四讲 CSS样式表1 回顾 表单中提交数据的方法有那两种及其区别？ 创建一个登录界面需要哪些表单元素？ target属性取值可以为哪些及其含义？ 本讲任务 美化“宝贝分类”页面 制作并美化“注册”页面 本讲目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 样式表的基本语法 样式表的基本结构 样式表的基本语法 样式表的基本语法 如果希望其他的标签也能采用P标签的样式，怎么办？ 样式表的基本语法 常用的样式属性 文本属性 常用的样式属性 小结1 编写如下图所示效果对应的HTML代码 常用的样式属性 背景属性 常用的样式属性 方框属性 常用的样式属性 常用的样式属性 常用的样式属性 常用的样式属性 要实现下图细边框的效果，该如何编写样式规则？ 常用的样式属性 常用的样式属性 特殊样式（超连接） a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 常用的样式属性 常用的样式属性 小结2 *Company Logo * LOGO 演示示例1：演示能换皮肤的页面 内容相同 外观不同 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 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标签应该采用相同的样式，所以要为它们定义一个共享样式。 类样式(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标签要应用同一样式 如何实现这样的样式效果？字体类型都为隶书 文本对齐 text-align 设置或检索文本的颜色 color 字体样式 font-style 字体类型 font-family 字体大小 font-size 说 明 文本属性 使用font-size、font-family、 color实现 宋体，字体大小12px 字体大小16px 要实现如下图所示的文本样式，该如何编写？ STYLE type=text/css P { font-size: 12px; font-family: 宋体; text-align:left; } .bigFont { f ont-size: 16px; color:red