在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