1_CSS基础知识.ppt

CSS基础知识 CSS DIV布局系列课程 课程安排 第一天第1节课CSS基础知识包括CSS基本规则 选择符的类型等介绍第2节课CSS样式属性 一 文本属性第3节课实战练习辅导 2 课程安排 第二天第1节课CSS样式属性 二 列表属性第2节课CSS样式属性 三 背景属性第3节课实战练习辅导第4节课实战练习辅导第5节课CSS DIV布局简单介绍第6节课实例讲解 一 有关菜单制作 3 课程安排 第三天第1节课实例讲解 二 有关网页布局第2节课实例讲解 三 综合示例讲解第3节课实例讲解 四 综合示例讲解第4节课完成综合练习辅导第5节课完成综合练习辅导第6节课完成综合练习辅导 4 本章内容 CSS简介CSS基本规则CSS选择符的类型在网页中运用CSS的方法 5 CSS简介 CSS CascadingStyleSheets 译为层叠样式表 是对HTML的补充 在当今的网页制作中 几乎所有漂亮的网页都用了CSS 有了CSS的控制 网页变得更加赏心悦目 生动活泼 打个比方 CSS好比网页的美容师 用CSS画的机器猫 6 CSS基本规则 CSS的基本规则由选择符 selector 和声明组成 而声明又由属性 property 和值 value 组成 selector property value 参数说明 selector 选择符property value 样式表定义 属性和属性值之间用冒号 隔开 多个定义之间用分号 隔开 最后一条声明可以没有分号 但为了以后修改方便 一般也加上分号 7 选择符的类型 HTML选择符 p color blue 类选择符 blue color blue id选择符 blue color blue 包含选择符 相关网络资料 menub color blue demo1 1群组选择符 h4 p span color blue 8 选择符的类型 伪类选择符 demo1 2a link color green a hover color yellow a active color red a visited color gray 通配选择符 color blue 9 a link color FF0000 unvisitedlink a visited color 00FF00 visitedlink a focus color FFFFFF focusedlink a hover color FF00FF mouseoverlink a active color 0000FF selectedlink 提示 按照次序定义规则很重要的 未点击 link 已访问 visited 焦点 focus 鼠标停留 hover 激活 active 缩写为LVFHA 网页中运用CSS的方法 内联样式在HTML元素内部嵌入式样式表 内部样式表 位于标签内部外部样式表 10 网页中运用CSS的方法 内联样式内联样式 11 网页中运用CSS的方法 嵌入式样式表h1 color green font family 隶书 12 网页中运用CSS的方法 外部样式表 有关 13 网页中运用CSS的方法 link与 import的区别link属于HTML标签 而 import完全是CSS提供的一种方式 link标签还可以做很多其它的事情 import就只能加载CSS了 当一个页面被加载的时候 就是被浏览者浏览的时候 link引用的CSS会同时被加载 而 import引用的CSS会等到页面全部被下载完再被加载 由于 import是CSS2 1提出的所以老的浏览器不支持 import只有在IE5以上的才能识别 而link标签无此问题 14 网页中运用CSS的方法 link与 import的区别当使用javascript控制DOM去改变样式的时候 只能使用link标签 因为 import不是DOM可以控制的 import可以在css中再次引入其他样式表 比如可以创建一个主样式表 在主样式表中再引入其他的样式表 如 15 main css import sub1 css import sub2 css sub1 csssub2 cssp color red myclass color blu