[研究生入学考试]第11章+CSS基础.ppt

网页设计三 (CSS基础) CSS驱动的网页 样式(style)的语法结构 样式表（style sheets）分类 如何对网页应用样式？ 行内样式表 (Inline Style Sheets) 内部样式表 (Internal Style Sheets) 外部样式表 (External Style Sheets) 行内样式表 内部样式表 外部样式表 Linking a Style Sheet Using HTML Linking a Style Sheet Using CSS 验证CSS样式 练习: Creating Your First Styles 创建行内样式 创建内部样式 创建外部样式 素材：chapter02/ 步骤： 如何选择 使用内部样式表进行CSS编辑 完成后，放入单独的外部css文件中 单独的页面如需要调整，再修改页面的内部样式（样式规则的层叠覆盖） Selector Basics: 对谁添加样式规则？ Tag Selectors: Wide Styling Class Selectors: Pinpoint Control ID Selectors: Specific Page Elements Descendent Selectors Group Selectors The Universal Selector (Asterisk) Pseudo-Classes and Pseudo-Elements 链接状态样式 a:link 未访问的链接 a:visited 访问过的链接 a:hover 鼠标悬停 a:active 鼠标按下的瞬间 More Pseudo-Classes and -Elements :before :after :first-child :focus Advanced Selectors Child Selectors Adjacent Siblings Attribute Selectors 练习: Selector Sampler 了解各种选择器的使用 了解常用的属性 素材：chapter03/ 继承Inheritance 什么是CSS的继承机制？ 对于某个元素应用的CSS样式，能被其嵌套的元素所继承。（如同人类从祖先中继承特征） 继承有哪些限制？ 并非所有属性都会被继承 影响元素在页面中位置的属性（如margin, border）不会被继承 浏览器使用用内建的样式显示各种元素（如h1比h2字体大，a为兰色） 继承的属性优先级低（为什么对body设置字体大小后，h1字体仍比较大？） 练习: Inheritance 了解属性如何被继承 利用一个类样式，通过继承影响整个页面 哪些属性不被继承 素材：chapter03/ 管理多个样式：层叠Cascade 同一个元素的某个属性值由谁决定？ 如此属性继承自多个祖先元素，发生冲突 如有多条规则对此属性作了设置，如何解析？ 层叠：是一组规则集合，用于决定哪个属性值被应用到某个元素，它决定了浏览器如何处理应用到同一元素的多条样式 如何层叠？ 继承样式的积累：即元素的属性值可能源于不同的祖先 最近的祖先羸 直接应用的样式羸 一个标签，多个样式（计算特殊性值） 如果特殊性值相同，靠近该元素的样式羸 控制层叠：如果你应用了某条样式没有作用，则应改变规则的特殊性值。 特殊性计算: Which Style Wins 相同的特殊性值：Last Style Wins 控制层叠 Changing the Specificity 如将 .intro ｛…｝ 改为 #sidebar .intro ｛…｝ Selective Overriding 如你已设计好整个网站的主样式（global.css） 但你需要让你的主页中做些调整，如让h1更大些，可以在主页中添加内部样式： 可将需要修改的属性放在单独的外部样式文件中，采用link或import方法加入 注意：以下两行的次序有关系吗？ 练习:The Cascade in Action 了解样式间的相互作用，冲突产生的效果 创建混合样式 综合层叠和继承 避免冲突 素材：chapter05/ 盒子模型（box） 每个元素如同放在一个盒子中，理解盒子的属性值表示的意义。 margin （ 外边距 ）：元素间的距离 padding （内边距）：内容和边框间的距离 border （边框 ） 模型 实例 用margin控制元素间空间 属性值的设定（可单独设置） Short hand Colliding Margins （正常的文档流） 注意：对float元素，边距不再塌陷 只是