准确点说应该有4种类型的CSS样式表

1HTML文件行中的样式表

2HTML文件头中的样式表

3连接到HTML文件中的样式表

4输入到HTML文件中的样式表

前两种是内部样式表 后两种是外部样式表

CSS的作用主要是

1实现对HTML代码的补充

2结构(HTML)与格式(CSS)的分离

内部样式表只能实现作用1

而外部样式表能实现作用1,2

具体资料楼主去找找相关资料吧

虽然百度空间吧里已经有很多高手总结出的这方面的教程，但是我觉得很多介绍都挺含糊的，至少我就碰到很多看不懂的地方，还需要自己一点一点去试验摸索，所以我想把我总结出的一些心得也整理一下贡献出来给大家看看，绝对浅显易懂，傻瓜都能学会～～～由于这里的内容都是我在设置自己空间时的经验，所以不是很完整，比如如何设置背景颜色或我就没有介绍到（因为我自己不喜欢背景有颜色或有，所以没有研究这个），以后慢慢研究出更多之后还会陆续更新的，希望大家不要嫌弃。如何修改CSS文件：登录后进入设置－模板设置－自定义模板，这时就会跳出一个窗口，出现可编辑的CSS代码文件。但是，这并不是你自己当前使用的模板的代码，而是一个百度默认模板的代码，这个是无法选择的，百度目前只能提供这一种模板供编辑。如果你想在某个比较喜欢的模板的基础上进行编辑，就需要先把这个模板的CSS代码复制出来，然后把“自定义模板”里出现的那个代码完全替换掉，接下来就可以对想修改的部分进行编辑啦。在编辑CSS文件的窗口下方有四个选项：“保存”“保存并应用”“取消”“预览”，一定要搞清楚这几个选项的区别，在每次修改之后最好先点一下“预览”看看有没有错误，之后再“保存”，最好不要在编辑状态下直接点“保存并应用”，而是先保存，然后再次预览确定每个页面都没问题之后再选择“应用此模板”。查看自己或别人CSS代码的方法： 打开你要看的那个空间，点右手键，菜单上会有一个选项“查看源文件”，点这个后会弹出一个记事本文件，在这个文件中查找“CSS”，直到出现这种格式的文字 “href="/msnib/css/item/ed14a84473384f82b2b7dcb2css">”（以MSNIB的空间为例），然后COPY其中“/css/item/ed14a84473384f82b2b7dcb2css”这一段放到地址栏里空间网址的后边，即“http://hibaiducom/msnib/css/item/ed14a84473384f82b2b7dcb2css”，然后敲回车，这时就会弹出来一个记事本文件，这里就是你要看的CSS代码文件。通常用这种方法看到的文字都是不分行的，比较混乱，这时可以把它COPY到WORD文档里，看起来就会比较有条理啦。注：可以通过这种方法学习一些代码的设置方式，或者挖到一些喜欢的资源，但最好不要全盘复制别人的劳动成果，自己动手设置出独一无二的模板才更有乐趣啊～～～CSS内容及几个主要部分的设置方式空间背景颜色/鼠标设置区域如果要设置特殊风格的鼠标，需要在代码文件的第一行加上：a:hover {cursor:url('http://imgcacheqqcom/qzone/space_item/orig/11/187ani')}body {cursor:url('http://imgcacheqqcom/qzone/space_item/orig/11/1547ani')}{background-color:#FFFFFF}第一行括号内的链接是点到链接时的鼠标状态，第二行括号内的链接是正常的鼠标状态，第二行后边的background-color后边的颜色代码是指整个空间的背景颜色。六位颜色代码可以在这里找到。如果不需要设置特殊鼠标，那么这一部分只保留“body {background-color:#颜色代码}”就可以了。空间名称/标题设置区域#header{height:300px;background:url(……)}这是空间标题栏的主体部分，{}内的文字解释如下：“height”指标题栏的高度，这个要与你放在标题栏的高度相同；后边的括号内是你要做标题的的链接，宽度为1024px的比较合适，高度可以根据自己的喜好决定。#header divlc{} #header divrc{}如果想在标题的左右两边放置不同的，就在第一行的{}内加上左边的链接，格式为{background:url(……) no-repeat left}。第二行的{}内加上右边的链接，格式为{background:url(……) no-repeat right}。否则{}内留空就可以。#header divtit{top:30px;left:20px;line-height:22px;font-size:30px;font-family:隶书}这里要设置的是空间名称的位置（top后边的数字是文字离空间标题栏上边界的距离，left后边的数字是离左边界的距离）；大小（font-size后边的数字）；字体（font-family后边的文字）。#header divtit atitlink{color:#;text-decoration:none}#header divtit atitlink:visited{color:#;text-decoration:none}这两行应该是设置空间名称文字的颜色，但是我搞不清楚2行有什么区别，所以索性都设成一样的好了。如果想要把文字设成设成黑体或下划线，就把text-decoration:后边的none相应地改成bold或underline。#header divdesc{top:60px;left:20px;color:#;font-size:13px}这行是设置空间简介（空间名称下边那行小标题）的位置、大小和字体的，设置方法同空间名称的设置。#tabline{top:415px;background-color:#}这个是指TAB菜单栏（主页/博客/相册/好友/设置那一行）下边的分隔线的位置和颜色，top后边的数字是指分割线离空间标题栏上边界的距离，这个数字要根据标题栏的高度和菜单的位置（是与重叠或位于下方）来决定。#tab{top:390px}这个是指TAB菜单栏的位置，top后边的数字是指距空间标题栏上边界的距离。#tab aon,#tab aon:link,#tab aon:visited{margin-top:2px;line-height:20px;background-color:#;color: #……;font-size:14px;font-weight:bold;}这一行是指TAB菜单被选中后的状态，文字的位置，文字后边背景的颜色，文字颜色，字号等等。#tab span{color:#F93A60;font-size:14px}这个是指TAB菜单中间的分隔符（就是那条竖线）的颜色和大小。#tab a:link{color:#;text-decoration:none;font-size:14px}这一行是指TAB菜单未被选中时的状态，文字颜色，其它定义，字号。#tab2部分是TAB菜单下方的第二TAB菜单栏（比如“设置”下方的“基本选项”“模板设置”这一栏）的设置，设置方法同上。stage{background-color:#}这个是空间内容区域（TAB菜单栏以下直到空间底部）的背景颜色/设置，不想设置也可以把{ }留空。博客文章标题/文字设置区域#m_blog divtit{font-size:14px;font-weight:bold;line-height:50px;text-indent:60px}博客文章标题栏的设置，line-height后边的数字是用来定义标题栏高度的，text-indent后边的数字是指标题文字向右缩进的距离，如不需要缩进可设为0。如果想在每篇文章的标题前加上，可以在{}内的结尾处加上“background:url(链接) no-repeat”，然后按照加入的尺寸相应调整标题栏高度和文字缩进处的数值。QQ里的那些可爱的动画表情图标都可以拿来用，另存后上传到百度空间的相册就可以啦。#m_blog divtit a{color:#;font-size:14px;font-weight:bold}博客文章标题链接的状态设置。#m_blog divtit a:visited{color:#047304}博客文章标题被选中后的状态设置。#m_blog divdate{margin:5px 0 8px 0;color:#666666;text-align:right}博客文章日期的设置，margin指距标题栏的距离，text-align指日期的位置（居左居右或居中）。#m_blog divcnt{color:#666666;line-height:20px;font-size:14px}博客文章内容设置：文字颜色，行距，字号。#m_blog divmore a{color:#047304;font-size:14px}“阅读全文”链接状态设置。#m_blog divmore a:visited{color:#047304}博客文章标题链接被选中后的的状态设置。#m_blog divopt{color:#047304;font-size:12px}文章操作区（如编辑、评论等）的设置。#m_blog divopt a{color:#047304;font-size:12px}文章操作区链接状态设置。#m_blog divopt a:visited{color:#047304}文章操作区链接被选中后的状态。#m_blog divline{margin-top:10px;line-height:60px;background:url(链接) no-repeat center}文章和文章之间的分隔线设置，margin-top指分隔线与上一篇文章之间的距离，line-height指分隔线区域的高度，结尾处可定义分隔线的位置（no-repeat center指不重复，居中，repeat-x指横向重复）。音乐播放器的设置如果觉得空间默认的音乐播放器不好看，可以在空间最后加上这段代码来改变播放器的大小和颜色：#phx{FILTER:Alpha(Opacity=60,FinishOpacity=36,Style=0,StartX=20,StartY=40,FinishX=0,FinishY=0)gray();WIDTH: 225px;HEIGHT:45px} 这个是我的播放器代码）这段代码有点复杂，捡能看懂的部分介绍一下吧，其他的还没摸索出来呢：Opacity=透明度，可以用0-100之间的数值，数值越低透明度越高；FinishOpacity=过度透明度，即边缘的透明度（这个我还没搞懂怎么玩）；gray＝颜色/风格，可以设为默认、gray、xray、invert等，可以自己尝试；WIDTH后边的数字表示播放器的宽度，HEIGHT后边的数字表示播放条的高度。 怎样设置分隔线文章和文章之间的：#m_blog divline{margin-top:10px;line-height:60px;background:url(链接) no-repeat center}文章评论之间的：#in_comment divline{margin-top:10px;line-height:50px;background:url(链接) no-repeat center}好友页面的分隔线：#m_friend divline{margin-top:17px;line-height:17px;background:url(链接) repeat-x}相册页面的分隔线：#m_albumlist divline{margin-top:17px;line-height:17px;background:url(链接) repeat-x}如果想取消分隔线，把“background”往后的部分都删掉就可以啦～～～空间内各个模块边框的设置方法CSS代码的第四个部分（以“mod”打头的部分） ，就是用来设置空间内各个模块状态的。以前一直没搞懂是什么意思，今天终于搞明白啦，分别解释如下：Padding：几乎在每一项的设置里都会提到这个词，它的意思是指定区域中文字或图象与边框的距离。modbox：这一行是用来设置每个模块内容的位置，以及模块的背景颜色，还有就是简单的线条边框，比如none（没有边框）dotted（点线边框）dashed（破折线边框）solid（直线边框）double（双线边框）等。比如我的设置：modbox{padding:10px 10px 0 10px;border-left:1px solid #9FA6AE;border-right:1px solid #9FA6AE} 意思是，模块内上下左右的边距分别为10px 10px 0 10px；左边框为实线，宽度1px，颜色#9FA6AE；右边框为左边框为实线，宽度1px，颜色#9FA6AE。如果想设置模块背景，在括号内加上“background-color:#六位颜色代码”就可以啦～～～～如果要设置复杂一些的边框效果，就需要用到以下的部分了：modtl：模块上边框左角设置modtc：模块上边框中间部分设置modtr：模块上边框右角设置modbl：模块下边框左角设置modbc：模块下边框中间部分设置modbr：模块下边框右角设置这部分的设置是可以使用图案的，比如，我在左上边框用了这个图案，中间部分用，右边用，全都设置好了以后就组合成一个完整的上边框了。具体的设置是这样的：modtl{background:url(

) no-repeat top left} 用相同的方法依次设置下边的就OK啦。如果是自己会设计图案就比较有趣啦，可以做出各种与众不同的边框来，像我这么笨的就只会去网上找现成的 =_=|||空间音乐播放器增加了新功能！！再主页音乐播放器那里点“编辑”就可以看到，以前只能播放一首歌曲，现在可以添加5首歌曲的链接并循环播放啦，而且还可以选择“是否显示视频框”。这个新功能可真不错！！！

这篇文章主要介绍了关于如何使用CSS3制作彩色进度条样式，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

用CSS3的border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient等样式就可以完成一个时尚进度条,这里我们来看几个CSS3制作彩色进度条样式的代码示例分享:

一、制作静态的紫色条纹进度条

html代码：

<body>

<p class="progress-bar purple"> <span style="width:40%;"></span> </p>

</body>css代码：

body {

background-color:#333;

}

progress-bar {

background-color:#222;

border-radius:3px;

width:300px;

height:24px;

padding:5px;

margin:50px;

border-bottom:1px solid #444;

box-shadow:inset 0 0 2px 0 #000;

}

progress-bar span {

display:inline-block;

width:140px;

height:24px;

border-radius:2px;

box-shadow:0 1px 0 rgba(255, 255, 255, 05) inset;

-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 05) inset;

-webkit-box-shadow:rgba(255,255,255,05) 0 1px 0 inset;

}

purple span{

background-color:#F09;

background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 03) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 03) 50%, rgba(255, 255, 255, 03) 75%, transparent 75%);

background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,03)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,03)),color-stop(75%,rgba(255,255,255,03)),color-stop(75%,transparent));

background-size:16px 16px;

}最终效果如下图所示：

二、制作静态的蓝色进度条

html代码：

<p class="progress-bar orange"> <span style="width:60%;"></span> </p>css代码：

orange span{

background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));

background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);

}最终效果如下图所示：

三、制作静态的绿色进度条

html代码：

<p> <span style="width:80%;"></span> </p>css代码：

green span{

background-color:#00ff24;

box-shadow:rgba(255,255,255,07)0 5px 5px inser,rgba(255,255,255,07)0 -5px 5px inset;

-webkit-box-shadow:rgba(255, 255, 255, 07) 0 5px 5px inset, rgba(255, 255, 255, 07) 0 -5px 5px inset;

-moz-box-shadow:rgba(255, 255, 255, 07) 0 5px 5px inset, rgba(255, 255, 255, 07) 0 -5px 5px inset;

}最终效果如下图所示：

四、为紫色条纹添加动态效果

css代码：

purple span:hover{

-webkit-animation:animate-stripes 3s linear infinite;

-moz-animation:3s linear 0s normal none infinite animate-stripes;

}

@-webkit-keyframes animate-stripes {

0% {background-position: 0 0;} 100% {background-position: 60px 0;}

}

@-moz-keyframes animate-stripes {

0% {background-position: 0 0;} 100% {background-position: 60px 0;}

}鼠标放上去之后，动态效果会出现。