E-TASK--(2) 学习css

12-07-13

从前天开始，开始CSS（层叠样式表）的学习。

学习html到最后的时候，阅读了一个案例和它的html描述，看到了没有CSS直接运行html形成的网页，一个只有行文结构的光秃秃的网页，顿悟了CSS和html的关系——CSS的作用就是对html里的纯内容进行重构，润色。CSS可以理解为从html中提取的样式精华。之所以提取出来，是为了减少html的篇幅，同时也便于管理。就好比C++里面常将函数写在主函数的外面，或者直接写在一个头文件里面封装起来。CSS样式表从html的提出也使得同样的信息能轻松地有多样的表达，如著名网站“禅意花园”，迥然不同的网页风格，竟出自同一个html文件！哇，世界真奇妙~

CSS的样式规则是：

 

选择器

{

属性 : 值 ;

属性 : 值 ;

属性 : 值 ;

……

}

 

选择器

{

属性 : 值 ;

属性 : 值 ;

属性 : 值 ;

……

}

 

……

 

其中属性有120种左右，不同的对象具有其中的一些属性，在vs环境里面，vs会很贴心的为码农进行这些属性的提示，不行的话，还可以直接从右下角的“属性”窗口中找到样式设计窗口，相当傻瓜勒。。。

然后就进入了各种“属性”的漩涡中……

我发现CSS的规则一点都不复杂，很好掌握，就是——太多啦！！文字、背景、块级标签、边框/盒子、列表，各种属性……不一会儿，我就看晕了……

真是很不英雄啊……

 

第二天回学校搬了寝室。

 

今天，再战CSS。之前看CSS看晕了还有一个原因是，只是看，没有动手去做。想要快点熟悉CSS的用法，而每一个用法都去写写看实在是太费时间，所以没有去着手实践，抽象的知识越来越多，堆在脑子里，又没有实际应用来记录和释放这些知识，于是记不住于是蹦了。今天就在高人的指派下实际操作了一下，做了一个exercise~

恩，更了解vs的用法了~对CSS也更熟悉了~

中途出现好多bug。。。纠结。。。

不过还好，最后把想要的效果做了出来！成就感啊！

还学习了伪类，锚伪类，link\hover\active\visited。

最后，了解了CSS常用操作三部曲：

1、设置字体；

2、设置宽度+盒模型；

3、设置链接（就是刚才讲的锚伪类）。

对设计界面时要注意哪些，很有启发性。

 

闲时看那一本《交互界面设计》，真是一本挺有意思的书~

信息设计->以恰当的顺序呈现给用户；准确地呈现给用户；

两种信息组织的模式：沿时间轴；按照用户喜好（导航、搜索、标签等）。

信息结构模式：线形模式、层级模式、网状模式、地图模式（Orz）、导航与搜索。

导航：全局导航（出现在每个页面中，保持一致，以保证用户不会“迷路”），分级导航，路径导航，标签导航；

不止要注意视觉的信息设计，有时可以尝试听觉、触觉等的信息设计。www.listentothetiger.com；www.chinese-soul.com。