Web前端培训第二天.pptx

Web前端技术介绍 MIC产研部 邢世康2012 7 17 CSSDOM 第二天 CSS 1 CSSCSS全称CascadingStyleSheets 即层叠样式表 为了解决内容与表现分离的问题 外部样式表可以极大的提高工作效率 样式多种方式浏览器缺省设置 外部样式表 内部样式表 位于标签内部 内联样式 在HTML元素内部 Selector property value CSS介绍 选择器可以分组 例 h1 h2 h3 color red 子元素从父元素继承属性 并不是总这样 值为若干单词时 则给值加引号 p font family sansserif h1 color red font size 14px 选择器 声明 声明 属性 属性 值 值 CSS语法 元素选择器选择器分组 html color red h1 color red input color red html color red h1 color red input color red html h1 input color red CSS选择器 类选择器 important color red 结合元素选择器p important color red 多类选择器 important warning color red 重要事项 在ie7之前的版本中 不同平台的ie都不能正确地处理多类选择器 ID选择器属性选择器 important color red 将包含标题 title 的所有元素变成红色 title color red attr val color red 部分属性值 attr val color red 开头 attr val color red 结尾 attr val color red 包含 attr val color red val或val 开头 后代选择器子元素选择器相邻兄弟选择器 Thisisaimportantheadingh1em color red h1 strong color red h1 strong color red 实例 html bodytable ul margin top 20px CSS伪类 selector pseudo class property value CSS伪元素举例 h1 before content url logo gif selector pseudo class property value IE5 X和ie6怪异模型width height不是内容的宽 高 而是内容 内边距和边框的宽度的总和 margin padding属性值顺时针margin 10px20px10px10px CSS盒子模型 一切皆为框div h1或p元素被称为 块级元素 span strong等元素被称为 行内元素 CSS定位机制普通流 浮动和绝对定位 CSS定位和浮动 CSSposition属性static 元素框正常生成 块级元素生成一个矩形框 作为文档流一部分 行内元素创建一个或多个行框 置于其父元素 relative 元素框偏移某个距离 元素仍保持其未定位前的形状 原本所占空间保留 absolute 元素框从文档流完全删除 元素定位后生成一个块级框 不论原来在正常流为何种类型的框 fixed 类似absolute 不过其包含体为视窗本身 CSS浮动 DIV CSS与TABLE 内容与表现分离Table更占HTML文件大小页面更灵活方便修改设计对搜索引擎更友好 页面布局 div居中列举几种典型页面布局实现 DOM 2 DOM介绍 节点树 节点访问 getElementByIdgetElementsByTagNameparentNodechildNodespreviousSiblingnextSiblingfirstChildlastChildcreateElement 节点修改 appendChildremoveChildinsertBeforegetAttributeremoveAttributesetAttribute 总结 1 CSS选择器2 div css 常见布局3 DOM基础操作 熟悉css选择器 样式属性和常用布局熟悉使用JAVASCRIPT操作页面元素 练习