css基础zzz1.ppt

五:常用的样式属性 文本属性 五:常用的样式属性 背景属性 五:常用的样式属性 边框属性 五:常用的样式属性 2、CSS网页布局与定位 DIV+CSS布局是现在比较流行的一种布局技术. DIV是HTML的标签，也就是Dreamweaver?里面的图层，我们可以把DIV标签看成是网页中的一块区域，在这个区域中可以添加各种内容。然后通过结合样式表来控制不同命名的DIV标签在网页中的显示位置，从而实现网页布局的效果。 认识DIV CSS网页布局的核心是布局定位，首先搭建一个可视的排版框架，这个框架有自己在页面中显示的位置、浮动方式。然后再向框架中填充排版的细节。这就是css布局定位的基本作用。而div标签存在的目的就是为了浮动与定位。 Div是一个容器，应用div/div标签，将内容放置其中。Div标签只是一个标识，作用是把内容标识成一个块区域，而这个块区域到底是什么样子，它概不负责，剩下的就由css来处理。 Div代码根据内容与表现的分离，只能拥有下面两种格式： Xhtml中的所有对象，几乎都默认为两种对象类型： 因此，div在页面中并非用于类似于文本那样的行间排版，而是用于大面积、大区域的块状排版。Div本身与样式没有任何关系。 在CSS布局中，所要做的工作可以归纳为两件事：一是使用div将内容标记出来，二是为这个div编写我们所需要的css样式。 Div的属性 Width div中内容的宽度 Height div中内容的高度 Border div的边框，共四条边框 border是个总属性，代表四条边具备相同的宽度、样式、颜色，如：border:2px solid #000; 如果四条边不一样，border又可以分为四个二级属性：border-top, border-right, border-bottom, border-left 比如：border-top: thin solid #000; 如果省略了颜色，默认为黑色。省略了粗细，默认适中大小，但是必须至少包含样式（solid）这个值 每个二级属性下又可以分三个三级属性。 比如：border-top border-top-width border-top-style border-top-color 前提是必须设置了border的style样式后才能设置color和width样式。 如果按照width、style、color来分，border又可以分为如下三个二级属性： border border-style border-width border-color 也是只有先设置style后，才能设置width和color属性。 Border的width属性值：thin（细）、medium（中）、 thick（粗）、固定值，比如2px Border的style常用属性值：solid(实线)、dashed(点划线)、dotted(点线)、none(无)，有些其他属性值浏览器不支持。 Border的color属性值：十六进制颜色值如：#FF0,或者red、yellow、black、blue……等规定的颜色代词，但是最好不用，还是用#FFF这种标准的十六进制值。 空白属性white-space 　　 制表符、空格和换行泛称空白，HTML页面显示时，通常根据浏览器窗口的大小自动折行，多余的空白符忽略成一个空格。 PRE标记可以控制文本在浏览器中的显示，但该标记的限制性很大，只对一些非比例字体才有效，并且每次用到这个命令框起所有文本也相当麻烦，空白属性提供了这种方便。 　　 空白属性有三个值： 　　 ·普通（normal）――该属性值保持浏览器自动换行的特性。 　　 ·保持原样（pre）――这个值与使用 PRE标记一样，告诉浏览器按照文本输入原样显示，并不自动折行。 　　 ·不折行（nowrap）――这个值把文本中的回车、换行和多个空格都显示成一个空格，换行只由 BR标记来控制。 列表属性 　　 1)列表－样式－类型list-style-type 　　 该属性用以改变HTML中列表项的外形显示。它有下列值：disc（圆盘）、circle（圆圈）、square（正方）、decimal（小数点）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）。 　　 2)列表－样式－图像list-style-image 　　 这个属性