干货：我把前台高级工程师DIV+CSS课件给借来了

div+css网页标准布局

DIV全称 division意为“区块、分割”,DIV标签是一个无意义的容器标签，用于将页面划分出不同的区域。通过DIV将复杂的页面进行细分块，可以将问题细分一个一个处理，所以通过DIV将页面分块是一个关键的工作，也是决定最终效果与质量的前提。

css

CSS (Cascading Style Sheet)，中文翻译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

div承载的是内容，而css承载的是样式

div+css缺点

1.使用相对复杂

相对html中的table布局来说，divcss布局相对要复杂些，需要掌握的知识更多些

2.CSS设计的网站浏览器兼容性问题比较突出

各个浏览器对CSS的支持略有不同，但这些细小的不同也会使网站在各个浏览器中有较大的显示差异，甚至是面目全非

为什么要使用div+css

1.div+css是web标准，顺应潮流

2.弥补html标签的功能缺陷。

3.加快页面加载的速度，降低流量费用。

4.对搜索引擎更加友好，更有利于收录和抓取您的页面。

5.使页面的内容和体现分离，便于维护和管理，节省大量的人力和成本。

使用css控制页面样式的方式

行内样式

嵌入样式

外部样式

导入样式

@import url(外部样式表位置)；

优先级别:

行内样式表>其余的样式表

其余的样式表，优先级一样，按照导入的顺序来确定他们能否起作用。

css选择器

当我们定义一条样式规则时候，这条样式规则会作用于网页当中的某些元素，而我们的规定的这些元素的规则就叫做选择器

.id选择器

.类选择器

.标签选择器

.交叉选择器

.群组选择器

.后代选择器 (包含选择器 )-父级和子级用空格隔开

.通用选择器：*｛｝

css选择器

伪类选择器

同一个html元素在不同状态下的不同样式

a:visited {color: #00FF00} /*已访问的链接 */

a:hover {color: #FF00FF} /*鼠标移动到链接上*/

css的继承性和叠加性

继承性

后代元素会继承前辈元素的少量文字属性和样式

叠加性

同一个元素，被多个样式规则指定。

由于css的继承性和叠加性，就有了css优先级的概念

选择器的优先级

css注释

注释

任何语言都有注释，当然CSS也不例外

CSS的注释为/*注释内容*/

块元素和行内元素

我们已经学习了很多的HTML标签，不同的标签有不同的特性，比如从文档流的角度区分，那么标签元素分为块标签与行标签

块标签即标签元素是一个块，即有宽、高属性，同时块标签会独占一行，比方说H1～H6、P、li等标签都是块标签，当然也包括我们即将学习的DIV标签

行标签正好与块标签意义相反，行标签不具备宽、高特性，mrgin属性的值，只有左右没有上下。也不会占一行，所以我们可以利用行标签对文字进行区块指定不同的CSS样式达到不同的效果，行标签也很多，如em、span标签等

视频链接地址：http://blog.sina.com.cn/s/blog_1671244030102wxpm.html

更多精彩内容请关注 ---- 微信公众号：houdunit

看完不要跑记得出来吐吐槽！╰(￣▽￣)╮