CSS学习经历第一集［弃C投B，从CSS学起］
2007-09-06 16:56 土星的狗狗 阅读(1209) 评论(14) 编辑 收藏 举报
北京的朋友对我说，你做好准备去迎接比C/S模式复杂6,7倍的B/S了吗？我“嗯”！
其实我这个“嗯”底气非常不足，当时不知道说什么好，但这个倍数还是对我很吸引了，我喜欢迎接挑战。
VIVIAN把原型已经画好了，但给我的第一感觉就是。。。太乱，跟她的房间一样。合作的少了，看她的代码很累，里面的命名让我有种很不理解的感觉，注释不怎么规范，大体意思我现在是知道了，但。。。做为不懂B/S的我来说。。。还是很累。
所以我决定了一件事儿，转投B/S的怀抱。
这就是我弃C转B的原因了，不卖关子了，通过一周的XHTML和CSS学习，我决定正式开始写这个系统，把我已经学到的和未来会碰到的知识点，难点都写出来与大家分享，希望大家可以支持我。
我在写这个CSS的过程当中，时刻都想着如何让页面信息完全脱离样式，但看过一篇文章，说是为了可以面向低配置的用户而设计，而不是去掉CSS STYLE之后网页无法正常浏览，头疼啊！
下面，我们来详细说一下这个例子里涉及到的一些元素的含义，以完成这个第一集做为初学的我的整个学习过程：
我一直把注释放在学习一门语言的“一哥”地位：/*在这里写注释内容*/
接下来咱们来看这一部分：
其中还有很多东西，我也只是用了，还不是很理解其中的含义，就像margin，padding,margin-left(**),在框架上他们有些非常优秀的定位做用，用好了，会做出许多非同寻常的效果。
今天就先研究到这里，待等下集分解！
其实我这个“嗯”底气非常不足，当时不知道说什么好，但这个倍数还是对我很吸引了，我喜欢迎接挑战。
VIVIAN把原型已经画好了，但给我的第一感觉就是。。。太乱，跟她的房间一样。合作的少了，看她的代码很累，里面的命名让我有种很不理解的感觉，注释不怎么规范，大体意思我现在是知道了，但。。。做为不懂B/S的我来说。。。还是很累。
所以我决定了一件事儿，转投B/S的怀抱。
这就是我弃C转B的原因了，不卖关子了，通过一周的XHTML和CSS学习，我决定正式开始写这个系统，把我已经学到的和未来会碰到的知识点，难点都写出来与大家分享，希望大家可以支持我。
第一集：入门
这是我花了两个晚上搞的一个小例子，大体样式就是这样，其实这个CSS就可以看出这个页面的框架结构，这样就可以做到“Multiple Styles Will Cascade Into One”。 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 }
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的过程当中，时刻都想着如何让页面信息完全脱离样式，但看过一篇文章，说是为了可以面向低配置的用户而设计，而不是去掉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影响。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;
}
其中还有很多东西，我也只是用了，还不是很理解其中的含义，就像margin，padding,margin-left(**),在框架上他们有些非常优秀的定位做用，用好了，会做出许多非同寻常的效果。
今天就先研究到这里，待等下集分解！
