前端高级工程师之div+css 网页标准化布局.pdf

后盾网 人人做后盾 DIV+CSS 后盾网 2011-2016 div DIV 全称 division 意为 “区块、分割”, DIV标签是一个无意 义的容器标签 ，用于将页面划分出不同的区域。 通过DIV将复杂的页面进行细分块 ，可以将问题细分一个一个 解决 ，所以通过DIV将页面分块是一个关键的工作 ，也是决定 最终效果与质量的前提。 css CSS (Cascading Style Sheet) ，中文翻译为层叠样式表 ，是 用于控制网页样式并允许将样式信息与网页内容分离的一种 标记性语言。 div承载的是内容 ，而css承载的是样式 div+css网页标准布局 后盾网 人人做后盾 1.使用相对复杂 相对html中的table布局来说 ，divcss布局相对要复杂些 ，需 要掌握的知识更多些 2.CSS设计的网站浏览器兼容性问题比较突出 各个浏览器对CSS的支持略有不同 ，但这些细小的不同也会 使网站在各个浏览器中有较大的显示差异 ，甚至是面 目全非 div+css缺点 后盾网 人人做后盾 div +css是web标准 ，顺应潮流 弥补html标签的功能缺陷。 加快页面加载的速度 ，降低流量费用。 对搜索引擎更加友好 ，更有利于收录和抓取您的页面。 使页面的内容和表现分离 ，便于维护和管理 ，节省大量的 人力和成本。 为什么要使用div+css 后盾网 人人做后盾 行内样式 div style=属性1 值1;属性2 值2;/div 嵌入样式 style type=text/css 选择器{属性1 值1;属性2 值2;} /style 外部样式 link rel=stylesheet type=text/css href=url 导入样式 @import url(外部样式表位置) ； 优先级别 行内样式表 其他的样式表 其他的样式表 ，优先级一样 ，按照导入的顺序来确定他们是否起作用。 使用css控制页面样式的方式 后盾网 人人做后盾 当我们定义一条样式规则时候 ，这条样式规则会作用于网页当中 的某些元素 ，而我们的规定的这些元素的规则就叫做选择器 • id选择器 • 类选择器 • 标签选择器 • 交叉选择器 • 群组选择器 • 后代选择器 (包含选择器 )-父级和子级用空格隔开 • 通用选择器 ： * ｛｝ css选择器 后盾网 人人做后盾 伪类选择器 同一个html元素在不同状态下的不同样式 a visited {color #00FF00} /* 已访问的链接 */ a hover {color #FF00FF} /* 鼠标移动到链接上*/ css选择器 后盾网 人人做后盾 继承性 后代元素会继承前辈元素的一些文字属性和样式 叠加性 同一个元素 ，被多个样式规则指定。 因为css的继承性和叠加性 ，就有了css优先级的概念 css的继承性和叠加性 后盾网 人人做后盾 所谓的优先级 ，指的就是哪条样式规则会最终作用于指定 的元素 行内样式 高