CSS 之入门概念篇
本篇是本人写在校内网上的，本来以为大家会积极学习，结果发现不是那个样子的，那里没有我想象的那种氛围，于是放到这里来。
相信会有更好的效果。
1 理解"CSS"
首先,先来解释下CSS的意思.大家在网页空白的地方,点右键--查看原代码,然后系统会用记事本打开一堆代码.这堆代码就是所查看的页面的内容.而装饰这堆内容的就是CSS代码.所以网页就是 "结构+样式".举个例子,一套房子,几室几厅,厕所在哪,卧室在哪,就是所谓的"结构".而装修成什么样子,电视摆哪,窗帘用什么样子的,就是"样式".而在实际使用中,CSS管理字体的颜色 大小 对齐方式;边框的粗细 颜色 虚实;背静的位置 是否重复 链接的颜色 等等.
2 "CSS"在哪
以"校内网"为例,在源文件里类似于"
<link href="http://static.xiaonei.com/css/base.css?ver=29378.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://static.xiaonei.com/css/navigationpro.css?ver=29378.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://static.xiaonei.com/css/super-actions.css?ver=29378.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://static.xiaonei.com/css/dialogpro.css?ver=29378.css" rel="stylesheet" type="text/css">
"的就是CSS.瞧，他们的文件名后缀都是.css。 浏览器在加载结构之间是先加载样式的.为什么会有3 4个CSS文件呢? 因为这样是方便管理的,有的CSS是管字体颜色 大小 的,有的是管理层级关系的.
3 我们在哪里修改
PJBLOG自带了3个模板，存放在skin文件夹下，而我们要改的CSS文件就在里面。
4 开始动手改咯
一般习惯是在本地搭建一个环境，用来调试的。也就是说，我们把自己的电脑当作你所购买的空间。具体的方法请去google里找。然后是安装bolg程序。论坛里有相关的帖子。请自己找。然后下一个CSS样式表中文手册。方便查阅各属性的作用。网上哪都有的下。
建议大家可以在WEB EXPRESSION（微软出品的软件.）之所以没推荐使用DREAMWEAVER 原因在后面)这个软件里写,软件有接口的链接功能。举个例子，在页面里有这样的代码 <div class="hellow">************</div> 那么在WEB EXPRESSION里 只要点一下 class就可以直接链接到CSS文件相应的地方。比DW要方便很多。当然，还有更方便的 fireBug。我也强烈推荐。
好，正式开始。
首先，打开firefox ie6 ie7 （测试各种浏览器下的表现）。然后对照PJBLOG结构图。（论坛里有的下）。
先右键查看首页代码，然后拷贝到WE(上文提到的软件)里，切换到"代码模式".仔细查看,有很多类似"<div class="nav_pub"></div>"的代码."<DIV>"就叫做一个"层".而后面的" class="****" 是这个层和CSS连接的接口写法.而"*****"就是这个层的名字. 花括号里的就是我们要改的属性，都是最基本的英文.看看就懂了。（当然，如果你有接触过FIREBUG，那就用它吧）
好了,我们就要在名字上下手了.点击这个名字,软件就会自动打开相应的CSS文件.并找到相应样式的位置.样式如下".nav_pub { margin:1px 2px 0px; padding:10px; font-size:12px;}... .."
有几个东西,需要说明下.
"float:left; float:right"是左右浮动的意思，也就是说，让两个层左右排，而不是上下排。
"px" 是像素的意思.一个"px"就是屏幕上一个点的大小.
"margin"是外补丁的意思,就是所在层和其他层的间距.
"padding"是内补丁的意思.就是层内的元素（比如字） 和层的内部距离.
往往我们会看到 padding:10px 5px 3px 2px; 这样的,后面有4个距离属性的,他们分别是指层内元素与层的 上 右 下 左 边的内部距离,也就是顺时针的顺序.margin也是如此.
有些元素是这样的"a:link {*****}" a 开头的是表示,这个CSS是修饰链接的.
有些元素是这样的" .nav_pub, .nav_alink, .subside{ ***}" 这个的意思是".nav_pub "".nav_alink "".subside" 这3个层共同使用后面大括号里的样式.
有时我们会发现,改了某些属性以后,页面并[b]没有发生变化[/b].那么原因有如下几个:
1 敲错字母了
2 { } 没有闭合,不小心删掉了半边. 3 包含层的优先权大于所改动的层. 这是可以在所改动的属性,比如 "border:1px solid red"(边框: 1象素 实线 红色) 后面加一个"! important".即"border:1px solid red ! important" 一般即可解决.
每改动一些属性,你便可以保存CSS文件,然后刷新主页查看效果.
今天先写到这。
如果有技术问题，请先询问前面提到的手册，然后再询问是google 和 baidu 再然后是论坛求助 。当然也可以跟贴。但我不保证每一条都回。
同时欢迎访问我的博客。 [url]http://blog.hsiang.net.cn[/url]。
[b]本人也长期接受skin设计和制作的工作。有意者可发邮件到 [email]firefly.dead[ait]gmail.com[/email] (吧 [ait]改成@ ) 或者 QQ 一七零五四二三四。[/b]
[[i] 本帖最后由 hsiangchieh 于 2008-4-19 00:11 编辑 [/i]]
