网站后台开发：div+css.doc

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.htmlcss网站后台开发小案例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文件 ：/*.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;案例： a:link img filter:gray; a:hover img filter:; css中常用的四种选择器1、类选择器(class选择器)（自定义class）基本使用.类选择器属性名: 属性值;.2、id选择器（自定义id）基本使用#id选择器属性名: 属性值;.案例:html文件ni hao!css文件/*id选择器的使用*/#id1background-color: pink;font-weight:bold;font-size: 14px;3、html元素选择器(重定义选择器) (重定义标签)某个html元素属性名:属性值;案例:html文件ni hao!ni hao!ni hao! css文件/*html选择器的使用*/bodycolor: orange;p.class1color: red;font-size:20px;p.class2color: green;font-size:20px;a:link font-size: 12px;color: black;text-decoration: none;a:visited font-size: 12px;color: grey;text-decoration: none;a:hover font-size: 12px;color: red;text-decoration: underline;a:active font-size: 12px;color: orange;text-decoration: underline;a.one:link font-size: 18px;color: black;text-decoration: none;a.one:visited font-size: 18px;color: grey;text-decoration: none;a.one:hover font-size: 18px;color: red;text-decoration: underline;a.one:active font-size: 18px;color: orange;text-decoration: underline;4、通配符选择器 css 文件可以使用在各种文件(php,html,jsp,asp)案例:再比如，我们希望所有的超链接(1)默认样式是 黑色 24px,没有下划线(2)当鼠标移动到超链接时，自动出现下划线(3)点击后,超链接变成 红色。这又该怎么实现呢? test.htmla:linkcolor:black;text-decoration:none;font-size:24px;a:hovertext-decoration:underline;font-size:40px;color:green;a:visitedcolor:red;/*对同一html元素分类*/p.cls1color:blue;font-size:30px;p.cls2color:red;font-size:20px;通配符选择器可以用到所有的html元素,但是其优先权最低*属性名:属性值;案例:html文件ni hao!css文件/*通配符选择器的使用*/*/*margin-top: 0px;margin-left: 0px;*/*margin: 0px;padding: 0px;*/*margin值1个参数顺序：用于四个边*/*mar