CSS学习经历第一集［弃C投B，从CSS学起］

北京的朋友对我说，你做好准备去迎接比C/S模式复杂6,7倍的B/S了吗？我“嗯”！

其实我这个“嗯”底气非常不足，当时不知道说什么好，但这个倍数还是对我很吸引了，我喜欢迎接挑战。

VIVIAN把原型已经画好了，但给我的第一感觉就是。。。太乱，跟她的房间一样。合作的少了，看她的代码很累，里面的命名让我有种很不理解的感觉，注释不怎么规范，大体意思我现在是知道了，但。。。做为不懂B/S的我来说。。。还是很累。

所以我决定了一件事儿，转投B/S的怀抱。

这就是我弃C转B的原因了，不卖关子了，通过一周的XHTML和CSS学习，我决定正式开始写这个系统，把我已经学到的和未来会碰到的知识点，难点都写出来与大家分享，希望大家可以支持我。

第一集：入门

1 html{

2 scrollbar-face-color: #DEE3E7;

3 scrollbar-highlight-color: #FFFFFF;

4 scrollbar-shadow-color: #DEE3E7;

5 scrollbar-3dlight-color: #D1D7DC;

6 scrollbar-arrow-color: #006699;

7 scrollbar-track-color: #EFEFEF;

8 scrollbar-darkshadow-color: #98AAB1;

9 }

10

11 body{/*整体布局，整体效果*/

12 clear: both;

13 margin: 0;

14 padding: 0;

15 color: #06C;

16 font-size:12px;

17 font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica,

18 "宋体", sans-serif;

19 line-height:130%;

20 }

21

22 #form{/*显示内空大框架*/

23 width: 1000px;

24 margin:0 auto;

25 }

26

27 #head{/*框架第一行*/

28 padding: 6px 6px 0 6px;

29 background:#fff;

30 height: 113px;

31 overflow: hidden;

32 }

33

34 #body{/*框架第二行*/

35 clear: both;

36 background-color: #FFFFFF;

37 overflow: hidden;

38 margin: 0;

39 padding: 0;

40 }

41

42 #left{/*左边栏，日志显示*/

43 float:left;

44 width:593px;

45 background: #fff;

46 overflow: hidden;

47 margin: 0,auto;

48 }

49

50 #center{/*中间栏，活动和链接显示*/

51 background: #fff;

52 float:left;

53 WIDTH:187px;

54 overflow: hidden;

55 }

56

57 #right{/*右边栏，分类和内容显示*/

58 background: #fff;

59 float:left;

60 width:217px;

61 overflow: hidden;

62 }

63

64 #footerbg{/*底边栏，背景框样式*/

65 background-color: #fff;

66 overflow: hidden;

67 margin: 0;

68 padding: 6px 0;

69 }

70

71 #footer{/*底边栏，内容样式*/

72 text-align: center;

73 margin:0 6px;

74 border: 1px solid #57C0FF;

75 padding: 8px 0;

76 background: #F6FBFF;

77 }

这是我花了两个晚上搞的一个小例子，大体样式就是这样，其实这个CSS就可以看出这个页面的框架结构，这样就可以做到“Multiple Styles Will Cascade Into One”。

我在写这个CSS的过程当中，时刻都想着如何让页面信息完全脱离样式，但看过一篇文章，说是为了可以面向低配置的用户而设计，而不是去掉CSS STYLE之后网页无法正常浏览，头疼啊！

下面，我们来详细说一下这个例子里涉及到的一些元素的含义，以完成这个第一集做为初学的我的整个学习过程：

我一直把注释放在学习一门语言的“一哥”地位：/*在这里写注释内容*/

接下来咱们来看这一部分：

html{

scrollbar-face-color: #DEE3E7;

scrollbar-highlight-color: #FFFFFF;

scrollbar-shadow-color: #DEE3E7;

scrollbar-3dlight-color: #D1D7DC;

scrollbar-arrow-color: #006699;

scrollbar-track-color: #EFEFEF;

scrollbar-darkshadow-color: #98AAB1;

}

上面的这一段代码被我称为CSS片断（不知道大家怎么命名^_^），其中有三个元素，html通常被叫做选择器，scrollbar-face-color叫做属性，#DEE3E7是属性的值，选择器表示谁讲受这段CSS影响。

其中还有很多东西，我也只是用了，还不是很理解其中的含义，就像margin，padding,margin-left(**),在框架上他们有些非常优秀的定位做用，用好了，会做出许多非同寻常的效果。

今天就先研究到这里，待等下集分解！