Stylesheet)。
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
它的作用可以达到:
(1)在几乎所有的浏览器上都可以使用。
(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
(4)你可以轻松地控制页面的布局
。
(5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
/* --------------首页个人档案------------- */#m_pro { /* 首页个人档案模块 */
margin-left:10pxmargin-bottom:15px
}
#mod_profile .modth { /* 首页个人档案----模块题头 */
display:none
}
#mod_profile .modbox { /* 首页个人档案----模块箱体 */
border:0px solid #006600
}
#m_pro .portrait { /* 首页个人档案----头像区域 */
width:60px!importantheight:60px!important
background:transparentpadding-top:0px
}
#m_pro .portrait img{ /* 首页个人档----案头像 */
width:60px!important
}
#m_pro .userinfo{ /* 首页个人档案----信息区1 */
width:80px!importantheight:50px!importantoverflow:hidden!important
background:transparent!important
}
#m_pro .userinfo nobr{ /* 首页个人档案----信息行 */
color:#99ff33!important
}
#m_pro .userinfo nobr img { /* 首页个人档案----在线状态图标 */
display:none
}
#m_pro .line { /* 首页个人档案----分割线 */
}
#m_pro div.act a,#m_pro div.act a:visited { /* 首页个人档案----信息区文字链 */
color:#FFFFFFtext-decoration:underline
}
#m_pro a.btfan { /* 首页个人档案----加为好友 */
color:#00ff00background:transparenttext-decoration:none!important
border:1px solid #006600filter:Shadow(Color=#000000,strength:3,Direction=135)
}
#m_pro a.btfan img{ /* 首页个人档案----加为好友图标 */
FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=0)
}
/* --------------个人档案页------------- */
#warpper a,#warpper a:visited { /*个人档案页---文字链*/
color:ccccccline-height:20pxfont-size:14px
}
#warpper .photo { /*个人档案页---左区*/
width:180pxheight:400pxmargin-left:10pxpadding-top:295pxpadding-left:0px
background:url(http://baidu.daobalang.googlepages.com/pro-Nokia8800.gif) no-repeat top center
}
#warpper .image img{ /*个人档案页---头像*/
display:none
}
#warpper .f14 { /*个人档案页---用户名*/
display:none
}
#warpper .f14 image { /*个人档案页---在线状态图标*/
display:none
}
#warpper .act{ /*个人档案页---信息区*/
width:180pxtext-align:centermargin-top:0px
}
#warpper .act a:link,#warpper .act a:visited{ /*个人档案页---信息区文字链*/
color:#3399CCfont-weight:600font-size:12pxwidth:100pxtext-decoration:none
}
#warpper .act a:hover{ /*个人档案页---信息区文字链(鼠过)*/
color:#FF0000font-weight:hold
}
#warpper a.btfan{ /*个人档案页---加为好友*/
color:#FF0000!importantborder:0px
}
#warpper .line{ /*个人档案页---信息区分割线*/
display:none
}
#warpper td,#warpper td.tit { /*个人档案页---右区上部信息默认字*/
color:3399CCline-height:20pxfont-size:14px
}
#warpper .pline { /* 个人档案页----分割线 */
width:125pxheight:20pxmargin-left:160px!importantmargin-top:-120pxline-height:20px
background:url(http://daobalang001.googlepages.com/last_online.jpg) no-repeat top left
}
#warpper strong { /*个人档案页---右区下部信息默认字*/
color:3399CCline-height:20pxfont-size:14px
}
#warpper .pitem { /*个人档案页---右区下部信息链接文字*/
margin-top:120px
}
1. CSS是Cascading Style Sheets(层叠样式表)的简称.2. CSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).
3. 在标准网页设计中CSS负责网页内容(XHTML)的表现.
4. CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
5.可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
5.CSS是由W3C的CSS工作组产生和维护的.
如何将样式表加入到网页
可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 !important 声明。
链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:
<head>
<title>文档标题</title>
<link rel=stylesheet href="css文件地址" type="text/css">
</head>
而在XML中,你应该如下例所示在声明区中加入:
<? xml-stylesheet type="text/css" href="css文件地址" ?>
定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下:
<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"font-weight: boldcolor: maroon}
h2 {font: 13pt/15pt "Arial"font-weight: boldcolor: blue}
p {font: 10pt/12pt "Arial"color: black}
-->
</style>
</head>
<body>
请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。
内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。