前端高级工程师之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的继承性和叠加性 后盾网 人人做后盾 所谓的优先级，指的就是哪条样式规则会最终作用于指定 的元素 行内样式 高 后代选择器 优 id选择器 先 级 类选择器 标签选择器 通用选择器 浏览器对标记预定义的样式 低 继承的样式 选择器的优先级 后盾网 人人做后盾 注释 任何语言都有注释，当然CSS也不例外 CSS的注释为/*注释内容*/ css注释