《很好用的css教程》由会员分享，可在线阅读，更多相关《很好用的css教程（6页珍藏版）》请在金锄头文库上搜索。
1、 前一阵为了做班级空间学了一点前一阵为了做班级空间学了一点 csscss，好朋友想学一下，所以就把这个，好朋友想学一下，所以就把这个 教程贴上来啦教程贴上来啦 希望能对想学希望能对想学 csscss 的同学们有所帮助的同学们有所帮助 以下这篇教程当然不是我写的啦以下这篇教程当然不是我写的啦 我只是做了一点小小的改动我只是做了一点小小的改动 不过这可以说是不过这可以说是 我见过的对初学者来说最好用最浅显的教程了我见过的对初学者来说最好用最浅显的教程了 其实百度也有官方的教程其实百度也有官方的教程 不过不过 那个太难了那个太难了 对于我们平时修改空间或是简单的制作空间对于我们平时修改空间或是简单的
2、制作空间 这个就完全够用了这个就完全够用了 最后给大家提一个小建议最后给大家提一个小建议 因为因为 csscss 都是英文都是英文 所以英文不是很好的人们最好打所以英文不是很好的人们最好打 开金山词霸用鼠标取词开金山词霸用鼠标取词 这样可以方便理解哦这样可以方便理解哦修改修改 CSSCSS 文件：文件：登录后进入设置模板设置自定义模板，这时就会跳出一个窗口，出现可编 辑的 CSS 代码文件。但是，这并不是你自己当前使用的模板的代码，而是一个 百度默认模板的代码，这个是无法选择的，百度目前只能提供这一种模板供编 辑。如果你想在某个比较喜欢的模板的基础上进行编辑，就需要先把这个模板的 CSS 代码
3、复制出来，然后把“自定义模板”里出现的那个代码完全替换掉，接 下来就可以对想修改的部分进行编辑啦。在编辑 CSS 文件的窗口下方有四个选项：“保存”“保存并应用”“取消” “预览”，一定要搞清楚这几个选项的区别，在每次修改之后最好先点一下 “预览”看看有没有错误，之后再“保存”，最好不要在编辑状态下直接点 “保存并应用”，而是先保存，然后再次预览确定每个页面都没问题之后再选 择“应用此模板”。查看自己或别人查看自己或别人 CSSCSS 代码的方法：代码的方法：打开你要看的那个空间，点右手键，菜单上会有一个选项“查看源文件”，点 这个后会弹出一个记事本文件，在这个文件中查找“CSS”，直到出现这
4、种格式 的文字 “href=“/msnib/css/item/ed14a84473384f82b2b7dcb2.css“”（以 MSNIB 的空间为例），然后 COPY 其中 “/css/item/ed14a84473384f82b2b7dcb2.css”这一段放到地址栏里空间网址 的后边，即 “http:/ 然后敲回车，这时就会弹出来一个记事本文件，这里就是你要看的 CSS 代码文 件。通常用这种方法看到的文字都是不分行的，比较混乱，这时可以把它 COPY 到 WORD 文档里，看起来就会比较有条理啦。注：可以通过这种方法学习一些代码的设置方式，或者挖到一些喜欢的资源，但最好不要全盘复制别人
5、的劳动成果，自己动手设置出独一无二的模板才更有乐趣啊CSSCSS 内容及几个主要部分的设置方式内容及几个主要部分的设置方式空间背景颜色空间背景颜色/ /鼠标设置区域鼠标设置区域如果要设置特殊风格的鼠标，需要在代码文件的第一行加上： a:hover cursor:url(http:/ cursor:url(http:/ )background-color:#FFFFFF第一行括号内的链接是点到链接时的鼠标状态，第二行括号内的链接是正常的 鼠标状态，第二行后边的 background-color 后边的颜色代码是指整个空间的背 景颜色。六位颜色代码可以在这里找到。如果不需要设置特殊鼠标，那么这一部
6、分只保留“body background-color:# 颜色代码”就可以了。空间名称空间名称/ /标题图片设置区域标题图片设置区域#headerheight:300px;background:url() 这是空间标题栏的主体部分，内的文字解释如下： “height”指标题栏的高度，这个要与你放在标题栏的图片高度相同；后边的 括号内是你要做标题的图片的链接，宽度为 1024px 的图片比较合适，图片高度 可以根据自己的喜好决定。#header div.lc #header div.rc 如果想在标题的左右两边放置不同的图片，就在第一行的内加上左边的图片 链接，格式为background:url
7、() no-repeat left。第二行的内加上右 边图片的链接，格式为background:url() no-repeat right。否则内 留空就可以。#header div.tittop:30px;left:20px;line-height:22px;font- size:30px;font-family:隶书 这里要设置的是空间名称的位置（top 后边的数字是文字离空间标题栏上边界 的距离，left 后边的数字是离左边界的距离）；大小（font-size 后边的数字） ；字体（font-family 后边的文字）。#header div.tit a.titlinkcolor:#.;
8、text-decoration:none #header div.tit a.titlink:visitedcolor:#.;text-decoration:none 这两行应该是设置空间名称文字的颜色，但是我搞不清楚 2 行有什么区别，所 以索性都设成一样的好了。如果想要把文字设成设成黑体或下划线，就把 text-decoration:后边的 none 相应地改成 bold 或 underline。#header div.desctop:60px;left:20px;color:#.;font-size:13px 这行是设置空间简介（空间名称下边那行小标题）的位置、大小和字体的，设 置方法同
9、空间名称的设置。#tablinetop:415px;background-color:#. 这个是指 TAB 菜单栏（主页/博客/相册/好友/设置那一行）下边的分隔线的位 置和颜色，top 后边的数字是指分割线离空间标题栏上边界的距离，这个数字 要根据标题栏的高度和菜单的位置（是与图片重叠或位于图片下方）来决定。#tabtop:390px 这个是指 TAB 菜单栏的位置，top 后边的数字是指距空间标题栏上边界的距离。#tab a.on,#tab a.on:link,#tab a.on:visitedmargin-top:2px;line- height:20px;background-col
10、or:#.;color: #;font- size:14px;font-weight:bold; 这一行是指 TAB 菜单被选中后的状态，文字的位置，文字后边背景的颜色，文 字颜色，字号等等。#tab spancolor:#F93A60;font-size:14px 这个是指 TAB 菜单中间的分隔符（就是那条竖线）的颜色和大小。#tab a:linkcolor:#.;text-decoration:none;font-size:14px 这一行是指 TAB 菜单未被选中时的状态，文字颜色，其它定义，字号。#tab2 部分是 TAB 菜单下方的第二 TAB 菜单栏（比如“设置”下方的“基本选
11、项”“模板设置”这一栏）的设置，设置方法同上。.stagebackground-color:#. 这个是空间内容区域（TAB 菜单栏以下直到空间底部）的背景颜色/图片设置， 不想设置也可以把 留空。博客文章标题博客文章标题/ /文字设置区域文字设置区域#m_blog div.titfont-size:14px;font-weight:bold;line- height:50px;text-indent:60px 博客文章标题栏的设置，line-height 后边的数字是用来定义标题栏高度的， text-indent 后边的数字是指标题文字向右缩进的距离，如不需要缩进可设为 0。如果想在每篇文章
12、的标题前加上图片，可以在内的结尾处加上 “background:url(图片链接) no-repeat”，然后按照加入的图片尺寸相应调 整标题栏高度和文字缩进处的数值。QQ 里的那些可爱的动画表情图标都可以拿 来用，另存后上传到百度空间的相册就可以啦。#m_blog div.tit acolor:#.;font-size:14px;font-weight:bold 博客文章标题链接的状态设置。#m_blog div.tit a:visitedcolor:#047304 博客文章标题被选中后的状态设置。#m_blog div.datemargin:5px 0 8px 0;color:#66666
13、6;text-align:right 博客文章日期的设置，margin 指距标题栏的距离，text-align 指日期的位置 （居左居右或居中）。#m_blog tcolor:#666666;line-height:20px;font-size:14px 博客文章内容设置：文字颜色，行距，字号。#m_blog div.more acolor:#047304;font-size:14px “阅读全文”链接状态设置。#m_blog div.more a:visitedcolor:#047304 博客文章标题链接被选中后的的状态设置。#m_blog div.optcolor:#047304;font
14、-size:12px 文章操作区（如编辑、评论等）的设置。#m_blog div.opt acolor:#047304;font-size:12px 文章操作区链接状态设置。#m_blog div.opt a:visitedcolor:#047304 文章操作区链接被选中后的状态。#m_blog div.linemargin-top:10px;line-height:60px;background:url(图片 链接) no-repeat center 文章和文章之间的分隔线设置，margin-top 指分隔线与上一篇文章之间的距离， line-height 指分隔线区域的高度，结尾处可定义分
15、隔线的位置（no-repeat center 指不重复，居中，repeat-x 指横向重复）。音乐播放器的设置音乐播放器的设置如果觉得空间默认的音乐播放器不好看，可以在空间最后加上这段代码来改变 播放器的大小和颜色：#phxFILTER:Alpha(Opacity=60,FinishOpacity=36,Style=0,StartX=20,Start Y=40,FinishX=0,FinishY=0)gray();WIDTH: 225px;HEIGHT:45px 这个是我的 播放器代码）这段代码有点复杂，捡能看懂的部分介绍一下吧，其他的还没摸索出来呢：Opacity=透明度，可以用 0-100 之间的数值，数值越低透明度越高； FinishOpacity=过度透明度，即边缘的透明度（这个我还没搞懂怎么玩）； gray颜色/风格，可以设为默认、gray、xray、invert 等，可以自己尝试； WIDTH 后边的数字表示播放器的宽度，HEIGHT 后边的数字表示播放条的高度。怎样设置分隔线怎样设置
