2014年DIV+CSS.pptVIP

快速实现CSS（编辑器） DW里的CSS编辑器。 了解CSS的基础前提 设置好页面布局 不用DW属性编辑区域 用链接外部CSS的方式 应用时，自行命名选择符，不要过多的继承 使用cssTidy工具清理代码 想要进步，慢慢脱离它 设计字体/段落 color: red/blue/yellow…. #ff7300 font-family: ”字体”;font-size:字号(px,em,ex) font-weight: bold text-decoration: underline/none text-align: center / left / right line-height: 26px / 200% 尝试一下 设计边框等效果 border-width: 1px border-color: #ff7300 border-style: solid / dashed / dotted 缩写border: 1px solid #ff7300 试下：适时适地使用table 背景设计的妙用 background-color:#ff7300 background-image:url(“”); background-repeat: no-repeat / repeat-x / repeat-y 缩写：background 定位：background-position:试一下 盒模型 每个元素都被看作一个矩形框（盒子），由内容、padding（填充）、边框（border）和空白边（margin）组成 内外边距的问题 margin-top/right/bottom/left: 8px padding-top/right/bottom/left : 8px 盒模型（慎用padding,挤电梯的道理） 试试看 display：显示方式属性 display: none / block / in-line 内联元素/块元素 摘录自：/article.asp?id=227 要会使用搜索引擎！ 说下要找到这个答案的关键字是什么？ 标签初始化的一些问题 body{} form{} ul{} dl{} 办法{margin:0px; padding:0px} {list-style:none} …，想办法 定位的慎用和好用 position: absolute / relative 使用top / left / right 和 margin 的区别 相对/绝对的差别 做个例子 float float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 值描述 left文本或图像会移至父元素中的左侧。 right文本或图像会移至父元素中的右侧。 none默认。文本或图像会显示于它在文档中出现的位置。 列表的使用 看下ul/li dl/dt.dd ol/li list-style list-style-image list-style-position list-style-type DIV+CSS布局整体实例演示 * 提问：我们以前学习的P标段落标签显示时是什么颜色？ 回答：毫无疑问，黑色。 告诉学员： 1）如果把网页内容比喻为一个女孩的话，样式就好比这位女孩穿的衣服。 女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。 2）PH1等标签都是默认为黑色白底，如果希望改变这些默认效果，就必须自定义新的样式。 演示：参考TG6-Source文件夹中的”什么是样式“用例。 重点提一下：文本属性、边框属性（后面的幻灯片讲”细边框样式时“会用到）。 讲解要点： 1）强调什么场合用：希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。 2）强调如何用：在HTML标签后面直接加上 ”style“属性即可，除了P以外，其他标签用法也是如此。 演示：参考TG6-Source文件夹中的”行内样式“用例。 提问：我们刚才的行内样式表可以让个别段落与众不同，但是有缺陷： 如果我们希望所有的段落都采用统一的样式呢？ 引导：在每个P标签后都加上相同的样式代码，太麻烦了。怎么办？ 很简单，把统一的样式放在HEAD标签内，让本网页的所有段落P标签共享同一样式。 这就是我们要讲的内嵌样式表。 告诉学员： 1）选择器：表明此样式作用于哪个HTML标签。 2）样式规则之间用分号分割开 3）定好样式后，它将对本网页内所有的同类标签（如P）起作用。 演示：参考TG6-Source文件夹中的”什么是内嵌样式“用例。 提问学员： 1）行内样式表什么场合用？ 2）内嵌样式表什么场合用？有什么好处？ 3）既然内嵌样式