第四章 CSS样式表
回顾 表单中提交数据的方法有那两种及其区别？ 创建一个登录界面需要哪些表单元素？ target属性取值可以为哪些及其含义？ s
预习检查 简述样式表的基本结构？ 常用的样式属性有哪些？
本章任务 美化“宝贝分类”页面 制作并美化“注册”页面
本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单
为什么需要CSS样式表 HTML标签的外观样式比较单一 样式表的作用相当于华丽的衣服 颜色只有黑白 字体类型和大小无变化 外观不同 内容相同 演示示例1：演示能换皮肤的页面
为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 内容与样式和谐统一的完整网页 美工做样式 程序员写代码
样式表的基本语法 样式规则 样式表的基本结构 属性 文档样式表开始，类型为CSS样式 样式表的基本结构 样式规则 <STYLE type="text/css"> P {color:red; font-size:30px; font-family:隶书;} …… </STYLE> 声明文档样式表结束 属性 样式规则 P {color:red; font-size:30px; font-family:隶书;} 属性的值 选择器
样式表的基本语法 查看源代码 所有的段落都采用P样式，保证风格统一 <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标签都应用了此样式 选择器 用分号隔开 如何编写此样式?字体类型为律书、大小24px 所有的段落都采用P样式，保证风格统一
样式表的基本语法 其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。 类样式(class) 样式规则 <STYLE type="text/css"> .red { color:red; font-family:"隶书"; font-size:24px; } …… </STYLE> .类名
如何实现这样的样式效果？字体类型都为隶书 <H2>和<P>标签要应用同一样式 样式表的基本语法 查看源代码 <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、 color实现 常用的样式属性 文本属性 文本属性 说 明 font-size 字体大小 font-family 字体类型 font-style 字体样式 color 设置或检索文本的颜色 text-align 文本对齐 要实现如下图所示的文本样式，该如何编写？ 字体大小16px 宋体，字体大小12px 使用font-size、font-family、 color实现
声明名称为bigFont类样式,它可被多个标签共享 常用的样式属性 查看源代码 <STYLE type="text/css"> P { font-size: 12px; font-family: "宋体"; text-align:left; } .bigFont { f ont-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 设置背景图像为images文件夹下的type_back1.jpg <STYLE type="text/css"> …… table { background-image: url(images/type_back1.jpg); background-repeat:no-repeat; } </STYLE> 背景属性 说 明 background-color 设置背景颜色 background-image 设置背景图像 background-repeat 设置一个指定的图像如何被重复 可取值repeat-x、 repeat、 no-repeat、repeat-y 设置背景图像不平铺 演示示例2：使用不同的背景属性
常用的样式属性 方框属性 margin border padding margin-top 上边界 margin-right 右边界 margin-left 左边界 border padding border-width 边框的宽度 padding-left 左填充 padding-bottom 下填充 margin-bottom 下边界
常用的样式属性 方框属性 属 性 CSS名称 说 明 边界属性 margin-top 设置对象的上边距 margin-right 设置对象的右边距 margin-bottom 设置对象的下边距 margin-left 设置对象的左边距 边框属性 border-style 设置边框的样式 border-width 设置边框的宽度 border-color 设置边框的颜色 填充属性 padding-top 设置内容与上边框之间的距离 padding-right 设置内容与右边框之间的距离 padding-bottom 设置内容与下边框之间的距离 padding-left 设置内容与左边框之间的距离
常用的样式属性 要实现下图所示的效果，该如何编写样式规则？ 线宽2px、虚线框样式dashed、颜色为red 行的背景色为yellow 使用background、border-right-width、border-right-color、border-right-style、padding-top和padding-left来实现
常用的样式属性 查看源代码 设置单元格右边框宽度为3像素 <STYLE type="text/css"> .tableBorder { border-right-width: 3px; border-right-color:red; border-right-style:dashed; padding-top:20px; padding-left:10px; } TR { background:yellow; } <TABLE > <TR> <TD class="tableBorder">手机冲值</TD> <TD class="tableBorder">电子彩票</TD> </TR> …… 设置单元格右边框为虚线框 设置单元格里文字与左边框的距离为10像素 表格行的背景色
使用border-width和border-style属性 常用的样式属性 要实现下图细边框的效果，该如何编写样式规则？ 文本框宽度为1px,边框样式为solid 使用border-width和border-style属性
常用的样式属性 查看源代码 <STYLE type="text/css"> .textBorder{ 边框宽度为1像素 border-width:1px; border-style:solid; } </STYLE> …… <FORM name="form1" method="post" action=""> <P>名字： <INPUT name="fname" type="text" class="textBorder" ></P> <P>密码： <INPUT name="pass" type="password" class="textBorder" size="21"></P> </FORM> …… 边框宽度为1像素 文本框为实线边框 看看没有设置样式的文本框的效果
鼠标在超链接上悬停时，超链接文本变为红色 常用的样式属性 查看源代码 如何编写此超链接样式？ 特殊样式（超连接） a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ <STYLE type="text/css"> A { color: blue; text-decoration: none; } A:hover{ color: red; </STYLE> …… <TR> <TD><A href="#">诺基亚</A> | <A href="#">摩托罗拉</A></TD> <TD><A href="#">联想</A> | <A href="#">戴尔</A></TD> </TR>…… 超链接文本的样式 鼠标在超链接上悬停时，超链接文本变为红色
鼠标在超链接上悬停时，超链接文本变为红色 小结2 编写如下图所示效果对应的HTML代码 细边框solid样式 讲解要点： 无下划线的超连接样式 鼠标在超链接上悬停时，超链接文本变为红色 练习代码 练习答案
常用的样式属性 综合例子：制作图片按钮 要实现下图图片按钮的效果，该如何编写样式规则？ 按钮的边界、边框、填充值均为0px 按钮背景图像与按钮宽度、高度大小一样 字体大小14px 使用background-image、 margin、 border、padding、height、width和font-size属性
常用的样式属性 查看源代码 背景图像为images文件夹下的back.jpg .picButton{ background-image: url(images/back.jpg); border:0 px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px; } …… <INPUT name="Rt1" type="reset" class="picButton" value=" 重填 "> <INPUT name="Bt1" type="submit" class="picButton" value=" 提交 " > ……. 按钮的边界、边框、填充均为0像素 设定按钮宽度、高度和图片大小一样 设置按钮上的字体大小为14像素
样式表的三类应用方式 内嵌样式表 行内（嵌入）样式表 外部样式表文件 内嵌样式表使用格式如下： <HEAD> <STYLE type="text/css"> 样式规则 </ STYLE> </HEAD> 如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。
内嵌样式表 查看源代码 样式表 所有的段落都采用 P 样式，保证样式统一 <STYLE type="text/css"> P { font-family:"隶书"; font-size:18px; color:#FF0000; } </STYLE> </HEAD> …… <P>床前明月光，</P> <P>疑是地上霜。</P> <P>我是郭德刚，</P> <P>低头思故乡。</P> 样式表 选择符 样式规则 所有的段落都采用 P 样式，保证样式统一
行内（嵌入）样式表 如果希望某段文字和其他段落文字显示风格不一样， 该如何解决？ 使用行内（嵌入）样式表可以解决
本段<P>标签采用了行内样式 行内（嵌入）样式表 查看源代码 <HTML> <HEAD> <TITLE>设置属性</TITLE> </HEAD> <BODY> <P style = "color:red;font-size:30px;font-family:隶书;"> 这个段落应用了样式 <P> 这个段落按默认样式显示 </BODY> </HTML> 本段<P>标签采用了行内样式 为标签p指定样式
本段<P>标签采用了行内样式 行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用 行内（嵌入）样式表 查看源代码 <BODY style=" background-color:#CCCCCC"> <P><IMG src="libai.jpg" width="140" height="170" align="left"></P> <H2>静夜思</H2> <H3>作者：李白</H3> <P style="color:#FF0000; font-size:18px; font-family:隶书; border-bottom-style:dashed "> 床前明月光，<BR> 疑是地上霜。<BR> 我是郭德刚，<BR> 低头思故乡。</P> 本段<P>标签采用了行内样式 行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用
外部样式表文件 如果希望一个网站中多个页面的样式保持一致， 如何解决？ 使用外部样式表文件样式表可以解决
外部样式表文件 根据样式文件与网页的关联方式又分为： 样式文件.css 网页2 网页3 网页1 …… 链接（LINK ）外部样式表 导入（@import）外部样式表 样式文件.css 网页2 网页3 网页1 ……
链接（LINK ）外部样式表 使用LINK（链接）标签 : <HEAD> <LINK href="newsyle.css" rel="stylesheet" type="text/css"> </HEAD> 引入的样式文件 第一步：创建样式表文件newstyle.css 样式文件： newstyle.css Link_Outcss1.html Link_Outcss2.html 第二步：把样式文件和网页绑定 第三步：浏览查看各网页 演示示例3：使用外部样式表1 使用外部样式表2
导入（@import）外部样式表 使用@import导入 ，语法： <HEAD> <STYLE TYPE="text/css"> @ import newstyle.css; </STYLE> </HEAD> 引入样式表文件 演示示例4：使用外部样式表1 使用外部样式表2
总结 方框属性有哪些常用属性？并分别说明其含义？ 超链接样式有哪几种？ 内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？