第11章+CSS基础.ppt

网页设计三 CSS基础 CSS驱动的网页 样式 style 的语法结构 样式表 stylesheets 分类 如何对网页应用样式 行内样式表 InlineStyleSheets 内部样式表 InternalStyleSheets 外部样式表 ExternalStyleSheets 行内样式表 内部样式表 外部样式表 LinkingaStyleSheetUsingHTMLLinkingaStyleSheetUsingCSS 验证CSS样式 练习 CreatingYourFirstStyles 创建行内样式创建内部样式创建外部样式素材 chapter02 步骤 如何选择 使用内部样式表进行CSS编辑完成后 放入单独的外部css文件中单独的页面如需要调整 再修改页面的内部样式 样式规则的层叠覆盖 SelectorBasics 对谁添加样式规则 TagSelectors Page WideStyling ClassSelectors PinpointControl IDSelectors SpecificPageElements DescendentSelectors GroupSelectorsTheUniversalSelector Asterisk Pseudo ClassesandPseudo Elements链接状态样式a link未访问的链接a visited访问过的链接a hover鼠标悬停a active鼠标按下的瞬间 MorePseudo Classesand Elements before after first child focus AdvancedSelectors ChildSelectorsAdjacentSiblingsAttributeSelectors body h2h2 pa href 练习 SelectorSampler 了解各种选择器的使用了解常用的属性素材 chapter03 继承Inheritance 什么是CSS的继承机制 对于某个元素应用的CSS样式 能被其嵌套的元素所继承 如同人类从祖先中继承特征 继承有哪些限制 并非所有属性都会被继承影响元素在页面中位置的属性 如margin border 不会被继承浏览器使用用内建的样式显示各种元素 如h1比h2字体大 a为兰色 继承的属性优先级低 为什么对body设置字体大小后 h1字体仍比较大 练习 Inheritance 了解属性如何被继承利用一个类样式 通过继承影响整个页面哪些属性不被继承素材 chapter03 管理多个样式 层叠Cascade 同一个元素的某个属性值由谁决定 如此属性继承自多个祖先元素 发生冲突如有多条规则对此属性作了设置 如何解析 层叠 是一组规则集合 用于决定哪个属性值被应用到某个元素 它决定了浏览器如何处理应用到同一元素的多条样式 如何层叠 继承样式的积累 即元素的属性值可能源于不同的祖先最近的祖先羸直接应用的样式羸一个标签 多个样式 计算特殊性值 如果特殊性值相同 靠近该元素的样式羸控制层叠 如果你应用了某条样式没有作用 则应改变规则的特殊性值 样式的累积 对祖先应用样式 相当于 直接应用的样式羸 因为有更高的特殊性值 Strong color red 一个元素 多个样式 特殊性计算 WhichStyleWins 相同的特殊性值 LastStyleWins 控制层叠 ChangingtheSpecificity如将 intro 改为 sidebar intro SelectiveOverriding如你已设计好整个网站的主样式 global css 但你需要让你的主页中做些调整 如让h1更大些 可以在主页中添加内部样式 可将需要修改的属性放在单独的外部样式文件中 采用link或import方法加入注意 以下两行的次序有关系吗 练习 TheCascadeinAction 了解样式间的相互作用 冲突产生的效果创建混合样式综合层叠和继承避免冲突素材 chapter05 盒子模型 box 每个元素如同放在一个盒子中 理解盒子的属性值表示的意义 margin 外边距 元素间的距离padding 内边距 内容和边框间的距离border 边框 模型 实例 用margin控制元素间空间 属性值的设定 可单独设置 Shorthand CollidingMargins 正常的文档流 注意 对float元素 边距不再塌陷只是上下间的边距会出现塌陷 左右边距不会 元素上下margin值伸出外容器的例子 负Margins值 行内元素块级元素 行内盒子Inlinebox哪些元素是行内元素 img a span strong em 对于行内元素 使用左右margin或padding值 能增加元素间距 但使用上下margin或padding却不能增加元素的高 img除外 如要给一个行内元素设定高度 应如何处理 行内元素的高度 Display属性display none 不显示display inline 按行内元素的显示display block 按块级元素显示 增加边框 样式书写 添加背景颜色 背景的区域 元素的高度和宽度 Width和height单位 Max width IE6不支持 计算元素的宽度如 则 元素的实际高度当元素内容超过设定的height时 IE和Firefox表现不同 使用overflow控制浏览器属性Overfow visible scroll auto hidden IE5的盒子模型hack 浮动float 正常的文档流是从左到右 从上至下Float left 会将元素移动到左边 下边的元素内容环绕它Float的属性值 left right none 浮动时 是相对于父容器的对于浮动的行内元素 也同Block级元素一样 可设置heightparding等浮动时 元素从正常文档流中撤出 该元素不