第6讲_CSS样式表.ppt

本讲目标 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 样式表能实现内容与样式的分离，方便团队开发 样式表的基本语法 样式表的基本结构 如果希望其他的标签也能采用P标签的样式，怎么办？ 导入式和链接式的区别： 1：语法上的区别 ????? 2：使用链接式方式时，会在装载页面主题部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的。而使用导入式时，会在整个页面装载完成后在装载CSS文件，对于有的浏览器来说，在一些情况下。如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后在出现设置样式后的效果。 3：链接式便于维护；导入式不便于维护。 常用的样式属性 文本属性 编写如下图所示效果对应的HTML代码 背景属性 要实现下图细边框的效果，该如何编写样式规则？ 特殊样式（超连接） a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 黑体，字体大小20px 字体大小14px，蓝色 设置一个指定的图像如何被重复 可取值repeat-x、 repeat、 no-repeat、repeat-y background-repeat 设置背景图像 background-image 设置背景颜色 background-color 说 明 背景属性 STYLE type=text/css …… table { background-image: url(images/type_back1.jpg); background-repeat:no-repeat; } /STYLE …… 设置背景图像为images文件夹下的type_back1.jpg 设置背景图像不平铺 文本框宽度为1px,边框样式为solid 使用border-width和border-style属性 STYLE type=text/css .textBorder{ 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像素 看看没有设置样式的文本框的效果 STYLE type=text/css A { color: blue; text-decoration: none; } A:hover{ color: red; } /STYLE …… TR TDA href=#诺基亚/A | A href=#摩托罗拉/A/TD TDA href=#联想/A | A href=#戴尔/A/TD /TR…… 超链接文本的样式 鼠标在超链接上悬停时，超链接文本变为红色 如何编写此超链接样式？ 编写如下图所示效果对应的HTML代码 细边框solid样式 无下划线的超连接样式 鼠标在超链接上悬停时，超链接文本变为红色 千里之行 始于足下 * * 讲解要点： Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 了了了了了了来了来了 Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. HTML与XHTML (X)HTML与CSS 构造CSS规则 基本CSS选择器 掌握在HTML中使用CSS的方法 通过前面的学习，我们已经理解了HTML的核心原理。 实际上使用HTML非常简单，其核心思想就是需要设置什么样式，就使用相应的HTML标记或者属性。 在前讲中，初步地分析了由于历史原因和HTML自身的局限性，所带来的一些问题。 为了解决这些问题，HTML逐步地发展到了XHTML，而XH