java页面怎么修改样式_使用CSS设置网页元素样式

在XHTML中CSS的意义

传统的HTML能够并已经创建了大量优秀美观使用的网页，但随着时代的发展和客户要求的逐步提高，传统HTML网页将网页的数据，表现和行为混杂的方式妨碍了自身可维护性和精确性的提高。

在XHTML中，CSS能把网页的数据和表现(主要是格式和样式规则)分隔开来，使人对网页能有更精确细致的控制，同时可维护性也变得更好，更方便。

在本文中，我们将学习CSS的相关知识。

框模型

在CSS处理网页时，它认为网页包含的每一个元素都包含在一个不可见的框中，这个框由内容(Content)，内容外的内边距(padding)，内边距的外边框(border)和外边框的不可见空间-外边距(margin)组成。

块级元素和行内元素

在XHTML中，元素可能是块级(block)的，也可能是行级(inline)的。

块级元素会产生一个新行(段落)，而行级元素是行内的，不会产生新行(段落)。

常见的块级元素有div，p等，常见的行级元素有a，span等。

在默认情况下，元素按照在XHTML中从上到下的次序显示，并且在每个块级元素的框的开头和结尾换行。

注意：块级元素和行级元素不是绝对的，我们可以通过样式设置来改变元素的这个属性。

元素的基本属性

内边距：padding

边框：border

外边距：margin

大小：width，height

对齐：text-align

颜色：color

背景：background

使元素浮动：float

下面将讲述如何对这些元素属性进行设置。

改变元素背景

Background有以下子属性：

background-color：背景颜色，默认值transparent，输入#rrggbb即可。

background-image：背景图像，默认值none

background-repeat：背景图像的重复显示，默认值repeat(纵横重复)，repeat-x(水平重复)，repeat-y(垂直重复)，no-repeat(使图像不并排显示)

background-attachment：默认值scroll，表示随页面滚动，如果是fixed则不随页面滚动。

background-posistion：默认值top left。

这些属性也可以统一设置，如：background:#ccc url(theadbg.gif) repeat-x left center;

例：

TABLE.Listing TH {

FONT-WEIGHT: bold;

background:#ccc url(theadbg.gif) repeat-x left center;

BORDER-BOTTOM: #6b86b3 1px solid

}

设定元素的大小

设置width和height即可，如：

width:180px;

height:50%;

注意这里可以设置绝对大小如180px也可以设置相对大小50%，其中百分数是相对与父元素的比例，父元素即容纳本元素的元素。

此外设置元素大小还可以使用min-width，max-width，max-height，min-height等，但在部分浏览器中不支持这些属性。

例：

#content{

width:640px;

height:500px;

float:right;

background:#f8f8f8;

}

Px和em的区别

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

设置元素的外边距

外边距是一个元素与下一个元素之间的透明空间量，位于元素的边框外边。

设置外边距设置margin的值即可，如margin:1;它将应用与四个边。

如果要为元素的上右下左四个边设置不同的外边距，可以设置margin-top，margin-right，margin-bottom，margin-left四个属性。

例：

fieldset{

margin:1em 0;

padding:1em;

border:1px solid #ccc;

background:#f8f8f8;

}

添加元素的内边距

内边距是边框到内容的中间空间。使用它我们可以把内容和边界拉开一些距离。

设置内边距如右：padding:1px;

如果要为元素的上右下左四个边设置不同的内边距，可以设置padding-top，padding-right，padding-bottom，padding-left四个属性。

例：

li{

padding-left:10px;

}

控制元素浮动

float属性可以使元素浮动在文本或其它元素中，这种技术的最大用途是创建多栏布局(layout)

float可以取两个值：left，浮动到左边，right：浮动到右边

例：

#sidebar{

width:180px;

height:500px;

float:left;

background:#f8f8f8;

padding-top:20px;

padding-bottom:20px;

}

#content{

width:640px;

height:500px;

float:right;

background:#f8f8f8;

}

设置边框

边框位于外边距和内边距中间，在应用中常用来标示特定的区域。它的子属性有：

border-style：可以设定边框的样式，常见的有solid，dotted，dashed等。

border-width：边框的宽度。

border-color：边框颜色

border-top，border-right，border-bottom，border-left可以把边框限制在一条或几条边上。

例：

ul a{

display:block;

padding:2px;

text-align:center;

text-decoration:none;

width:130px;

margin:2px;

color:#8d4f10;

}

ul a:link{

background:#efb57c;

border:2px outset #efb57c;

}

控制元素内容的对齐

text-align属性可以让我们设置元素内容的对齐，它可以取的值有left，center，right等。

例：

body{

margin:0 auto;

text-align:center;

min-width:760px;

background:#e6e6e6;

}

#bodyDiv{

width:822px;

margin:0 auto;

text-align:left;

background:#f8f8f8;

border:1px solid #FFFFFf;

}

控制元素在父元素的垂直对齐

设置vertical-align可以控制元素在父元素的垂直对齐位置，它可以取的值有：

middle：垂直居中

text-top：在父元素中顶对齐

text-bottom：是元素的底线和父元素的底线对齐。

在网页中引入样式表

"記賬系统"单项收支记录浏览页面

type="text/css" />

样式表示例

body{

margin:0 auto;

text-align:center;

min-width:760px;

background:#e6e6e6;

}

#bodyDiv{

width:822px;

margin:0 auto;

text-align:left;

background:#f8f8f8;

border:1px solid #FFFFFf;

}

TABLE.Listing {

MARGIN: 0px 0px 8px;

WIDTH: 92%;

BORDER-BOTTOM: #6b86b3 3px solid

}

#content{

width:640px;

height:500px;

float:right;

background:#f8f8f8;

}

#content h1,#content h2,#content p{

padding-left:20px;

}

#footer{

clear:both;

}

fieldset{

margin:1em 0;

padding:1em;

border:1px solid #ccc;

background:#f8f8f8;

}

如何知道页面元素对应样式表的那部分？

如果页面元素设置了id，则它对应的样式表部分是#id，如#bodyDiv。

如果页面元素设定了class，则它在样式表中寻找”元素类型.class”对应的部分，如TABLE.Listing。

如果没有写明，则元素会找和自己类型对应的样式设置，如fieldset。

注意CSS中没有大小写的区别。

例：

posted on 2008-03-14 12:59 和风细雨 阅读(1165) 评论(0)  编辑  收藏 所属分类: CSS