CSS对网页样式的定义

■ 容器的概念：

根据CSS对网页样式的定义，页面上的所有元素都放在一个容器里，这个容器叫BOX。BOX也就包括：

元素本身；

围绕元素的空格；(padding)

围绕元素空格外的边框；(border)

边框外的边距。(margin)

■ 四个边距：

margin用于设定上，右，下，左，边距：

body {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px}

body {margin:10px 20px 30px 40px}/*效果与上面方式相同*/

以上参数值同样可以是其他长度单位(如：pt,em等)或比例。

■ 顶，底，左，右空格填充：

padding用于设置空格填充范围，用法与边距属性相同：

h3 {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-

left:40px};

h3 {margin:10px 20px 30px 40px}

■ 边框：

border可设定的属性很多，包括颜色和宽度，关键是可以指定每个边的宽度和每个边的颜色 。

边框宽度border-width可以是thin,medium,thick或长度值：

h3 {border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px};

h3 {border-width:2px 4px 6px 8px}/*与上面相同*/

p {border-top-width:thin;border-right-width:medium;border-bottom-

width:thick;border-left-width:none};

p {border-width:thin medium thick none}/*与上面相同，左边框将不显示*/

边框颜色border-color定义方法与宽度定义相似，颜色值也可以用RGB值(如#ff00ff)：

h3 {border-color:red blue yellow green}/*上:红；右：蓝；下：黄；左：绿*/

h3 {border-color:red blue }/*上，下:红；右，左：蓝；*/

h3 {border-color:#ff00ff }/*所有边框为#ff00ff色*/

边框线的线条式样border-style，有九个关键字来描述：

none /*不画边框，不论边框厚度是多少*/

dotted /*由点组成的虚线*/

dash /*由短线组成的虚线*/

solid /*实线 */

double /*双实线*/

groove /*3D沟状*/

ridge /*3D脊状*/

inset /*3D内嵌*/

outset /*3D外嵌*/

其使用方法与厚度、颜色相似，不再多讲。

一条边框的颜色，厚度，线条式样可以在一条语句中定义。例：

h1 {border-top:5px solid red}

这么多的参数，这么多的组合，要想得心应手，不下一番功夫去练习是不可能达到的。

■ 背景颜色：

background-color，用它可以指定整个网页的背景颜色，也可以是某一个单词。在传统的HTML中要将背景颜色应用到一段文字上是一件麻烦事，要将文字放在表格中再设置表格的背景。CSS使之变得非常容易。

P.colorback {background-color:#ff0000}

颜色可以是颜色名(如red)、十六进制数(如#ff0000)、RGB值(如RGB(255,0,0))。

■ 背景图片：

background-image，用它可以指定整个网页的背景图片(将它放在BODY标签内)，也可以是某一个单词。

background-repeat 是否循环背景

p {background-repeat:no-repeat;background-image:url(background.gif)}/*不循环*/

p {background-repeat:repeat;background-image:url(background.gif)}/*循环*/

background-attachment 是否固定背景

body {background-attachment:scroll;background-image:url(background.gif)}/*随文字一起滚动*/

body {background-attachment:fixed;background-image:url(background.gif)}/*固定不动*/

P.colorback {background-color:#ff0000}

颜色可以是颜色名(如red)、十六进制数(如#ff0000)、RGB值(如RGB(255,0,0))。

■ 背景定位：

background-position用于设置背景的位置：

p {background-position:top;background-image:url(background.gif)};

background-position其参数可以是截键字、长度数、比例值。

关键字;

top /*背景图像与前景对象的顶部对齐*/

bottom /*背景图像与前景对象的底部对齐*/

left /*背景图像与前景对象的左边对齐*/

right /*背景图像与前景对象的右边对齐*/

center /*与前面四个任一个组合，变成水平或垂直居中*/

长度数；

可以是任何一种以前学过的长度单位(pt,px,ems...)，例如：

p{background-position:100px 50px;

background-image:url(background.gif)}表示从左上角起水平100像素，垂直50像素的位置摆放。

比例值；

例如：p{background-position:85% 50%;

background-image:url(background.gif)}

表示从距离段落的右边85%，垂直距离段落顶端50%的位置摆放。