网站后台开发：iv+css.docVIP

div+css是网站后台开发和网页设计的重要部分，本章迪派就为大家讲解什么是div+css 以及div+css的作用和应用案例.首先来了解什么是div+css。 div+css 是什么?（division、Cascading Style Sheets） div+css 是一种目前比较流行的网页布局技术 div 来存放需要显示的数据 文字，图表.. , css 就是用来指定怎样显示，从而做到数据和显示相互的效果 在div+css用来布局之前，行业里都使用TABLE布局和实现数据。但是TABLE的缺点很多。 1、显示样式和数据是绑定在一起的 2、布局的灵活度不高 3、一个页面可能会有大量的 元素 4、增加带宽 5、不同的浏览器看到的效果有时不一样 6、搜索引擎不友好 了解了TABLE的缺点，接下来看看div+css的原理： 原理图如下 ： 有时候，我们也可能把css直接嵌入到html文件中，这种方式称为内联css 我们也可以简单的这样理解div+css: div 是用于存放内容 文字,图片,元素 的容器。 css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观 观点：用table显示数据比较方便 网页设计快速入门案例 体验案例 demo.html css网站后台开发小案例 !--引入我们的css-- link rel stylesheet type text/css href style/my.css / div class style1 img src images/sohu.jpg/ my.css .style1 /*宽度 */ width: 400px; height: 300px; /*电脑培训*/ background-color:silver; border:1px solid red; margin-left:400px; margin-top:250px; padding-top:20px; padding-left:40px; div+css是用来做网页设计的，在div+css流行应用之前一共经历了三个时期： ① table 网页设计 内容和样式 外观和布局 混合 ② table+css 网页设计 table布局，CSS指定外观 ③ div+css 网页设计 div放内容，CSS指定样式 外观和布局 ，内容和样式彻底分离 css使用必要性 1、可以很好的统一网站的显示风格. 2、可以使用滤镜 css使用的基本语法 选择器 属性1: 属性值; 属性2: 属性值; …. css案例： html文件: !--css 部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件-- link rel stylesheet type text/css href style/my.css/ !--span元素通常用于存放小块内容-- span class s1 栏目一 span class s2 栏目二 span class s3 栏目三 span class s4 栏目四 span class s5 栏目五 css文件 ： /*.s1用术语 类选择器*/ /*font-style属性值有：normal 默认值,正常字体 、italic 斜体 、oblique 倾斜的字体 */ /*text-decoration属性值有：none 默认值,无装饰 、underline、blink 闪烁 、overline 上划线 、line-through 贯穿线 */ /*font-weight属性值有：normal 默认值,相当于400 、bold 粗体,相当于700 、bolder 比normal粗 、lighter 比normal细 、100、900等*/ .s1 color: blue; font-size: 30px; font-style:italic; text-decoration:underline; .s2 color:yellow; font-size:12px; .s3 color:blue; font-style:italic; .s4 color:green; font-weight:bold; .s5 color:#9C3131; 案例： !--如何把css直接嵌入到html文件 内联css -- !--用伪类实现效果 link链接和hover覆盖 -- style type text/css a:link img filter:gray; a:hover img filter:; a href # img src images/sina2.jpg/ a href # img src images/sina.jpg/ a