CSS学习经历第一集[弃C投B,从CSS学起]
2007-09-06 16:56 土星的狗狗 阅读(1212) 评论(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(**),在框架上他们有些非常优秀的定位做用,用好了,会做出许多非同寻常的效果。
今天就先研究到这里,待等下集分解!