一、 CSS的基本概念 　　CSS（层叠样式表），是控制网页样式并允许将样式与网页内容分离的一种标签性语言。 　　在html网页中，各种标签以及位于标签中间的所有内容，组成了整个页面。 　　例1：CSS标签 　　该句代码的功能是将文字“CSS标签”以段落的格式显示在网页中。如果希望标题变成蓝色、黑体，则要引入标签，如下所示。 　　例2：CSS标签 　　虽然看上去并不十分麻烦，但是当页面的内容是整篇文章时，就十分麻烦。但引入CSS对其中的标签进行设置，就完全不同。 　　例3： p{ font-family:幼圆; color:red; } CSS标签1 CSS标签2 　　其显示效果与例2完全一样。页面中最开始的是 标签，以及其中对标签的定义。 二、 CSS的基本写法 1. 在body内实现 　　将css写在具体标签中是最直接的一种，它对html的标签使用style属性，然后将CSS代码写在其中。 　　例4：css入门 　　将css写在具体标签中是最简单的，但要为每一个标签设置style属性，其成本较高，而且网页容易过胖。因此不推荐使用。 2. 在head内实现 　　在head内实现就是将CSS写在与之间，并用标签进行声明。如例3所示。所有CSS代码被集中在了一起，方便后期维护，页面也大大瘦身。 3. 在文件外的调用 　　CSS单独成立文件。将html页面与CSS样式分离为两个或多个文件，实现了页面与CSS代码的分离，使得前期制作和后期维护都十分方便。 　　例5： 　　首先建立CSS文件1.css 　　p{ 　　 color:#FF00FF; 　　 text-decoration:underline; 　　　} 　　然后在网页中链接1.css 　　 　　 　　页面标题 　　 　　  　　 　　 紫色、粗体的效果1 　　 　　 　　同一个CSS文件可以链接到整个网站的所有页面中，使得网站整体风格统一。 三、 Div的基本概念 　　与 之间相当于一个盒子，可以容纳段落、标题、表格、图片等各种HTML元素。因此，与 中的内容视为一个独立的对象，受CSS的控制。 　　例6：这是一个div的标记。 　　制作了一个宽192像素和高300像素的黑色边框区块，内部有两个元素，分别为标题和内容。同时进行文字效果和边框的相应设置。 四、 Div排版 1. 盒子模型 　　所有页面中的元素都可以看成是一个盒子。只是这个盒子有边框和距离等参数，来调节盒子的位置。 　　一个盒子的实际宽度或高度是由内容+填充+边框+边界组成的。可以利用CSS控制content的大小，还可以分别设定4条边各自的填充、边框、边界。 2. 元素的定位 　　网页中的各种元素都必须有自己合理的位置，从而搭建出整个页面的结构。主要有position(位置)、float（浮动）和z-index（Z轴）三个参数。 * Float(浮动)： 　　Float属性的值很简单，可以设置为left、right或者默认值none。当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。 * Position位置 　　Position从字面意思上看就是指定块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。Position属性一共有4个值，分别为static、absolute、relative、fixed。static为默认值，表示块保持在原来应该在的位置上，即该值没有任何移动的效果。Absolute，它表示绝对位置。当将子块的position属性值设置为absolute时，子块己经不再从属于父块。 　　Relative值，此时子块是相对于其父块来进行定位的，同样配合top right bottom和left这4个属性来使用。 * Z-index(Z轴)：用于调整定位时重叠块的上下位置，Z轴值大的页面位于其值小的上方。 参考文献： [1]温谦.CSS 设计彻底研究[M]. 北京:人民邮电出版社,2008. [2]曾顺.精通CSS+DIV 网页样式与布局[M]. 北京:人民邮电出版社,2007. [3]唐国辉.彻底弄懂CSS盒子模型. 蓝色理想网站,2007. [4]郑宁宁.浅析DIV ＋ CSS 网页设计技术. 山东省农业管理干部学院学报,2008.[6]. 作者简介：孙静，女，在职研究生，初级，主攻网页设计与制作。