CSS入门（一）

文/小棉袄

图/网络

DIV+CSS开山篇

div+css开山篇

一、div+css（Cascading Style Sheet(层叠样式表)的缩写）简介

传统页面table布局和显示数据

缺点

1.显示样式和数据是绑定在一起的

2.布局的时候灵活度不高

3.一个页面可能会有大量的元素，代码就会冗余

4.增加带宽

5.搜索引擎不喜欢这样的布局

优点

1.理解比较简单

2.不同的浏览器看到的效果一般是相同的

3.显示数据还是很好的

div+css是什么

div+css是一种目前比较流行的网页布局技术，div来存放需要显示的数据（文字，图表）。Css用来指定怎样显示，从而做到数据和显示相分离的效果。

简单的理解

Div是用来存放内容（文字图片，元素）的容器

Css是用于指定div中的内容如何显示，包括这些内容的位置和外观

入门案例

div+css的优势

网页设计三个历史时期

Table，table+css，div+css

①table网页设计：内容和样式（外观和布局）混合

②table+css网页设计：table布局，css指定外观

③div+css网页设计：div防内容，css指定样式（外观和布局），内容和样式彻底分离

优势

①符合w3c标准，微软等公司均为w3c支持者

②搜索引擎更加友好

③样式的调整更加方便

④css的极大优势表现在简洁的代码

⑤表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

注：div+css并不是要我们抛弃table，因为table在显示数据时，特别方便，因此在使用div+css时，该使用table时就得使用。

笔记相关课程视频链接

https://pan.baidu.com/s/1YKVpCAmahCQ19FzffBeTmw?from=singlemessage

（复制链接打开）

如链接失效可添加管理员微信（121718536）备注PHP自学者获取

关于小棉袄

小棉袄是妈妈取得

PHP小白一枚，一个还有一年毕业的大三狗，每天分享自己的自学笔记，希望有朝一日可以敲出自己的源代码。

欢迎所有对PHP感兴趣的朋友加入PHP自学者阵营。

期待与PHP界大佬做朋友（等待传授经验ing）。

本公众号纯属公益（个人兴趣），没有任何商业合作，欢迎投稿。

长

按

解

锁