Archive for March, 2005

一个CSS应用的站点

The CSS Playground
很多�错的CSS应用,布局,��以�一些�常规的demo等等,呵呵。未必都实用,但至少体现了CSS强大的功能。
记下�,还没翻完,慢慢翻。
å?¦å¤–还有æ?¥è‡ªdavid的推è??

我收�的几个�错的国外css站
http://www.quirksmode.org/
http://meyerweb.com/eric/css/
http://positioniseverything.net/
第一个我比较佩�,对web的�个方�都很精湛,自己总结的东西很全�。��两个是今天找css资料的时候找到的,还没仔细看。

Leave a Comment

CSSTDG读书笔记八

Chapter 6. Text Properties

text-decoration是一个集�属性,覆盖时所有内容被�时覆盖,例如有如下样�定义
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
则.stricken�有一个line-through的效果,而没有underline和overline的效果,这个规律和font等集�属性类似。
text-decoration�继承

white-space的�值nowrap,pre

还有就是pre-wrap 和 pre-line ,这两个似乎没有�览器支�,�惜。
和pre��的是,pre-wrap会自动�行。pre-line会将连续空格看作一个空格。

Leave a Comment

一个在北美学设计学生的笔记

via:[深·白色]

学设计第一个�认识到的就是设计�是艺术。我就是一开始没有分清这个概念,在第一次上设计课时�苦大了。设计是沟通,是传达,而艺术是表现,是创作。这并�是说设计里没有表现的�份,更�是说艺术是�在乎沟通的。但是两者放在这两项上的�视是有较大差别的。设计是�能凭感觉�的,�考虑��因素,�寻找最隹的表达方法,�把自己的感觉翻译�大众能够�解的有效视觉语言。

决定一个设计作�的质�的往往是它的细节,例如字体的选择,图形的构造,颜色的差异等等。这些细微的差别 (nuance) 在体现作�整体上起�相当大的作用。无论一个设计的想法有多好,如果制作粗糙,便会失去魅力。�外,如果我们�求自己注�这些细节和它们的影�,很�能会从中�现一些新的�感和方�。

从一开始学设计时,è€?师就ä¸?断地强调å?˜åŒ– (variation) çš„é‡?è¦?。å?šä¸€é¡¹ä½œä¸šæ—¶ï¼Œæˆ‘们从æ?¥ä¸?会去专门寻找它所谓的正确答案,而是试ç?€æŠŠè‡ªå·±çš„å?„ç§?想法整ç?†å‡ºæ?¥ï¼Œå°½é‡?用ä¸?å?Œçš„æ–¹å¼?æ?¥è¡¨è¾¾ï¼Œä»Žä¸­å†?探索,ä¸?断地让一个想法把自己带到å?¦ä¸€ä¸ªæƒ³æ³•。这样å?¯ä»¥æ‰©å¤§æˆ‘们的想åƒ?力,看到ä¸?å?Œçš„å?¯èƒ½æ€§ã€‚虽然最å?Žçš„æˆ?果很é‡?è¦?,但是过程更é‡?è¦?。这个探索的过程是无法用任何东西å?–代的。 今天è€?师æ??到 variation (å?˜åŒ–) å’Œ alternative (替æ?¢) 的区别,我觉得挺é‡?è¦?的。å?˜åŒ–是寻找å?Œä¸€ç§?表达方å¼?çš„å?„ç§?表现方法,而替æ?¢åˆ™æ˜¯å¯»æ‰¾å?¦ä¸€ç§?表达方å¼?。比如说å?§ï¼ŒéŸ³ä¹?符å?·ï¼Œäº”线谱,ä¹?器都是音ä¹?çš„ä¸?å?Œå?˜åŒ–表达方å¼?,而替æ?¢çš„表达方å¼?å?¯èƒ½åŒ…括æ??示音ä¹?气氛的颜色,知å??音ä¹?家等。有时如果一个想法好åƒ?总是å?šä¸?好的è¯?,也许该寻找一个替æ?¢çš„æƒ³æ³•,而如果找到了å?ˆé€‚的想法的è¯?,便应该看看它都å?¯ä»¥æœ‰ä»€ä¹ˆå?˜åŒ–的表现方å¼?,以得出最隹的解答设计。å?˜åŒ–和替æ?¢çš„界é™?往往并ä¸?是很清楚,但是如果有个大概概念的è¯?,还是会有些帮助的。

我觉得学设计与å?šè®¾è®¡æœ€å¤§çš„好处就是会接触到许多ä¸?å?Œçš„领域。åƒ?我们的作业题目曾ç»?包括污染,城市å?˜åŒ–,爵士ä¹?宣传,未æ?¥å»ºç­‘的趋势,水的问题等等。通常都是让我们自己在题目里选择一个角度,然å?Žå?šå‡ºæœ‰è¯´æœ?力的视觉作å“?。è¦?想表达好自己的观点,必须先æ?œé›†å¾ˆå¤šçš„相关资料,对题目有一定程度的ç?†è§£ã€‚完æˆ?å“?å?¯ä»¥æ˜¯æŠ½è±¡çš„表现,但是想法必须是有形,有根æ?®çš„。很多人认为设计就是在电脑上å?šå‡ºæ¼‚亮的东西,其实完全ä¸?是这样的。我们学设计的一大部分时间都是在到处寻找资料,研究以å?Šæ¶ˆåŒ–它们,然å?Žå†?试ç?€ä»Žä¸­æ‰¾åˆ°è‡ªå·±çš„ä½?置,与自己想表达的概念。没有完全ç?†è§£æŸ?个问题时,是ä¸?å?¯èƒ½æœ‰æ•ˆåœ°è¡¨è¾¾å®ƒçš„。如果连自己都ä¸?知é?“自己想说什么,ä¸?管完æˆ?å“?有多好看,也是白纸一张,因为它没有清楚的内容。通过最近这几个学期,我的研究能力æ??高了,也é‡?新认识了设计的å?«ä¹‰ã€‚

你知é?“设计师最好的朋å?‹æ˜¯è°?å?—?是照相机和å¤?å?°æœºã€‚它们是å?šè®¾è®¡å¿…ä¸?å?¯å°‘的工具与玩具。图库的图åƒ?毕竟有é™?。最怕的就是由于图库里没有完全å?ˆé€‚的图åƒ?,所以å?ªå¥½å¦¥å??一张一般的,这样本æ?¥å¾ˆå¥½çš„æƒ³æ³•也无法å?‘挥到最隹。å?ªè¦?有机会,最好都用自己æ‹?摄的图åƒ?。常出去æ‹?照也是一大娱ä¹?呢。那å¤?å?°æœºå‘¢ï¼Ÿå¤ªå¤šäººä½Žä¼°å®ƒçš„价值了。死死æ?¿æ?¿åœ°å¤?å?°æ–‡ä»¶å?ªæ˜¯å¤?å?°æœºçš„æœ€åŸºæœ¬åŠŸèƒ½ã€‚æˆ‘ä»¬å?¯ä»¥å¤?å?°å¹³é?¢çš„东西,立体的东西,拼凑的东西。å?¯ä»¥æ”¾å¤§ï¼Œç¼©å°?。å?¯ä»¥é‡?å? å??å¤?地在å?Œä¸€å¼ çº¸ä¸Šå?°ã€‚å?¯ä»¥è¾¹å¤?å?°è¾¹æŒªåŠ¨é‡Œé?¢çš„物件,会得出很多独特的æ„?想ä¸?到的效果喔。å¤?å?°æœºé‡Œå‡ºæ?¥çš„东西通常都有一ç§?它特殊的质é‡?,利用好了,å?¯ä»¥ä½¿è®¾è®¡ä½œå“?增添光彩。电脑当然也是我们的朋å?‹äº†ã€‚但是你ç¨?ä¸?ç•™æ„?,它å?¯èƒ½å°±ä¼šå?˜æˆ?å??朋å?‹ã€‚我们太ä¾?赖电脑了。有时候连想都ä¸?想就会按键å?šä¸ªæ•ˆæžœï¼Œå› ä¸ºå®žåœ¨æ˜¯å¤ªæ–¹ä¾¿äº†ã€‚但是这些自动化的功能ç»?常会让我们错过一些探索的机会,也常得出被科技所驱使缺ä¹?特性的完æˆ?å“?。电脑ä¸?应该是答案,它与照相机,å¤?å?°æœºå?Œæ ·çš„å?ªæ˜¯ä¸€ä¸ªå·¥å…·ã€‚它能够帮助我们çœ?掉很多麻烦,å?šå‡ºåˆ«çš„地方å?šä¸?出æ?¥çš„æ•ˆæžœï¼Œä½†æ˜¯ç”µè„‘å?šå‡ºæ?¥çš„东西未必就都是好的。拉下 photoshop 里的工具选å?•å‰?,一定è¦?想一想,这是我唯一的选择å?—?

那天在电视里看到一个å?¶åƒ?歌手在å?°ä¸Šå”±æ­Œï¼Œä¸€ä¼šå„¿æœ?下é?¢æ‹›æ‰‹ï¼Œä¸€ä¼šå„¿è·‘æ?¥è·‘去,歌è¯?空间的地方还忙ç?€è·Ÿå¤§å®¶æ‰“招呼,一点也没有认真唱歌。çª?然觉得他和实力歌手的区别就跟一个自以为是设计师的人与专业设计师一样。å‰?者å?ªæ³¨æ„?ç?€è¡¨çŽ°è‡ªå·±ï¼Œè€Œå?Žè€…å?´æ˜¯åœ¨ä¸“心表达æŸ?些事物。有时候,把一个普通的东西,例如地é“?时间表,或者æ?‚志文章分页,设计的太漂亮,太çª?出,太与众ä¸?å?Œå??而会失去它的基本功能。那些多馀的花花æ?Žæ?Žçš„东西影å“?人们去读真正的内容,就跟我从æ?¥éƒ½è®°ä¸?ä½?å?¶åƒ?歌曲一样。

有一次一个�师对我说的�让我一下�对设计明白了很多。他告诉我我当时�的东西是图�驱使 (image driven),而�是�想驱使 (idea driven) 的。那时我很喜欢在 photoshop 里隋便拼凑一些图�,自己觉得看起�很酷,以为加上个标题就�了一个作�。但是�师看了说这些�是一些拼凑的图�,你并没有给它们输入任何�义,所以对别人也�会有�义。�想超越这个层次,作�必须让�想优先,图�应该�从与支�你的想法,而��是独立的装饰�。

这是一个有æ„?æ€?的比喻:文字排列设计 (typography) 应该åƒ?玻璃。它应该正确地å??映文字的个性与特å¾?,但是å?Œæ—¶åº”该é€?明得å?¯ä»¥è®©äººçœ‹ç©¿ã€‚如果字体或文字的形状本身所说的,比文字中所è¦?表达的还多还强烈的è¯?,这ç§?设计选择就等於自己把自己é”?èµ·æ?¥äº†ã€‚

关于招贴。基本上,招贴(海报)有两ç§?类型,1) 资料æ??ä¾› (informative),2) 说æœ?引导 (persuasive)。资料æ??ä¾›å¼?招贴å??助观众获得必è¦?的知识。最好用独特的方å¼?,比如利用图åƒ?或比喻æ?¥è®©æ‹›è´´é‡Œçš„资料易懂易记。说æœ?引导则是挑战观众去在æŸ?个事物上有å??å?‘æŸ?个方å?‘的观念,也å?¯åˆ©ç”¨èµ„æ–™æ??ä¾›æ?¥è¾¾åˆ°è¿™ä¸ªç›®çš„。招贴是个独特的东西,它给你é?žå¸¸å¤§çš„é?¢ç§¯ä¸Žç©ºé—´æ?¥å?‘挥,但是很多人往往ä¸?去利用这一优势,还按照设计书皮的æ€?è·¯æ?¥è®¾è®¡æ‹›è´´ï¼Œè¿™æ ·çš„完æˆ?å“?最å?Žçœ‹ä¸ŠåŽ»å?ªä¼šåƒ?一张放大了的书皮,失去了招贴应有的活力。一般æ?¥è®²ï¼Œæ‹›è´´æœ‰ä¸‰ä¸ªå?¯è¯»å…¥çš„层次。远è·?离时,它应该有一定的特å¾?把你å?¸å¼•过æ?¥ï¼Œä¸­è·?离时,你应该能够了解这张招贴是关于什么的,é?žå¸¸è¿‘è·?离时,则应该å?¯ä»¥è¯»åˆ°å…¶ä»–的细节。招贴有它自己独特的使命,把æ?¡å¥½çš„è¯?,å?‘挥是无é™?的。

那天翻出最åˆ?学设计时的作å“?è?‰ç¨¿ï¼Œè§‰å¾—那时候真的是什么都ä¸?懂。现在回想起æ?¥ï¼Œè¿™ä¸€å¹´æ?¥å­¦åˆ°çš„æœ€é‡?è¦?的有两点。一. æ¯?个设计构æ€?都有适å?ˆå®ƒè‡ªå·±çš„语言。风格ä¸?应该å?ªæ˜¯ä¸€ç§?æ­»æ?¿çš„美观的外表,而应该利用æ?¥è¡¨çްæ€?想。有的人å??爱数字化的效果,所以什么东西都å?šæˆ?é‚£ç§?æ ·å­?,这ç§?习惯性的东西使本æ?¥çš„特点麻木,丧失代表性与æ„?义,æˆ?为纯装饰的玩æ„?儿。我以å‰?一直以为好的设计都有一个特定的所谓的样å­?,比如很酷,很细的线æ?¡ï¼Œæ¨¡ç³Šçš„æ–‡å­—等,其实如果这些东西没有任何实际用途的è¯?,滥用它们å?ªä¸?过会使你的作å“?é™?质。二. æ¯?个人都有ä¸?å?Œçš„æ“…长,这æ‰?使设计作å“?丰富多彩。é?¢å¯¹ä¸€ä¸ªè®¾è®¡é—®é¢˜æ—¶ï¼Œè¦?考虑寻找自己最能å?‘挥的解决方法。而且è¦?å?šå°±è¦?å?šåˆ°æœ€å¥½ï¼Œä¸?能马虎。有时候,有的想法最适å?ˆç”¨å½±åƒ?å?ˆæˆ?æ?¥è¡¨çŽ°ï¼Œä½†æ˜¯å¦‚æžœè‡ªå·±æ²¡æœ‰ä¿¡å¿ƒä¸Žèƒ½åŠ›å?šå¾—åƒ?,å?šå¾—有说æœ?力的è¯?,ä¸?如å?¦æ‰¾è‡ªå·±å?¯ä»¥è¡¨çŽ°çš„æƒ³æ³•ã€‚ä½œä¸ºå­¦ç”Ÿï¼Œæˆ‘ä»¬ç»?常以为把自己想è¦?å?šçš„告诉è€?师就å?¯ä»¥äº†ï¼Œåˆ?学设计的学生ç»?常会拿ç?€ä¸€å¼ æ½¦è?‰çš„æ‰‹ç¨¿è¯´åˆ°ï¼Œ”虽然你们看ä¸?太出æ?¥ï¼Œä½†æ˜¯æˆ‘想的是这儿有一个跑步的人,å?Žé?¢æœ‰æ—‹é£Žï¼Œè¿˜æœ‰ç‰¹åˆ«é…·çš„色彩效果…” è€?师å?ªå¥½è¯´ï¼Œ”你说的很好,为什么ä¸?å?šå‡ºæ?¥ï¼Ÿ” ç„¶å?Žä»–æ‰?å?‘现原æ?¥ä»–没有能力å?šå‡ºä»–想åƒ?的东西。设计并ä¸?å?ªæ˜¯ä¸€ä¸ªæƒ³æ³•的问题,也是一个制作的问题。有效的结å?ˆä¸¤è€…,æ‰?能得出好作å“?。

这两天都忙ç?€å?°å‡ºæœ€å?Žçš„完æˆ?å“?,å†?贴到å?¯ä»¥å±•示的æ?¿å­?上。我真是æœ?了我自己了,都å?šè¿‡ä¸?知多少次了,还是会把æ?¿å­?è£?歪,把表é?¢å¼„è„?,更笨的是,还å?ˆæŠŠæ‰‹æŒ‡å¤´å‰ŠæŽ‰ä¸€ç‚¹… 我们ç?­é‡Œæœ‰å°‘数的一两个人æ¯?当å?šè¿™äº›æœ€å?Žçš„完工时,都会到专业的å?°åˆ·åº—让那里的人全包,å?°å•Šï¼Œå¸–æ?¿å•Šï¼Œè£?剪啊,æ?®è¯´å?šä¸¤å¼ å¤§æµ·æŠ¥ä¸€å…±è¦?花约 $60。在我们学校里å?°æ‰? $10,当然还得自己买æ?¿å­?什么的。她们觉得挺值得的,å?šå‡ºæ?¥éƒ½ä¸“业æž?了,亮亮的。å?¯æ˜¯æˆ‘总觉得在学习作业最å?ŽåŠ è¿™ä¹ˆé?“程åº?,有点… å??正明年的展览模型课è¦?å°?心ä¸?è¦?和她们一组。

去年å¤?天在北京买了一本é?žå¸¸å¥½çš„书,“构æ€?与创造ï¼?写作技巧论â€?,潘大å?Žè‘—。本æ?¥æ˜¯æƒ³ç”¨æ?¥æ??高自己的中文水平,但是越读å?‘现书里的许多内容其实对我学习设计也有ä¸?少帮助。通过ä¸?å?Œçš„æ–¹å¼?,设计与写作都是在表达,在沟通。好的设计å?¯ä»¥è®²ä¸€ä¸ªæ•…事,好的写作å?¯ä»¥è®©äººçœ‹åˆ°ä¸€å¹…ç”»ä¸?出æ?¥çš„画。 这本书讲到很多é?žå¸¸æœ‰æ„?æ€?并且é?žå¸¸å…³é”®çš„æ¦‚念,例如看è§?与å?‘现的ä¸?å?Œï¼ŒèŽ·å¾—ç?µæ„Ÿçš„基础是信æ?¯ï¼ŒçŸ¥è¯†ï¼Œä¸Žç»?验的积累,比喻与象å¾?,烘托和对比,如何观察与表现生活的大角度和多角度,ç–?密与虚实的关系ï¼?主题和节å¥?的需è¦?等等。虽然是一本关于写作的书,但是我觉得任何å?šè·Ÿåˆ›ä½œæœ‰å…³çš„人读æ?¥éƒ½ä¼šå?—益。这让我å?ˆæ„?识到,这个世界上互通的东西实在太多了,几乎什么都å?¯ä»¥å’Œä»€ä¹ˆè?”系起æ?¥ï¼ŒçœŸæ˜¯è¶Šæƒ³è¶Šæœ‰æ„?æ€?ï¼?回想起æ?¥ï¼Œç›´åˆ°å‡ å¹´å‰?,我是完全ä¸?喜欢学习的。作业就是任务,å?šå®Œå?šå¥½å°±æ‰”在脑å?Žäº†ï¼ŒçŸ¥è¯†å…¨éƒ¨éƒ½æ˜¯ä¸ºäº†åº”付考试,考完å?Žä»€ä¹ˆéƒ½è®°ä¸?èµ·æ?¥äº†ã€‚ä¸?确定什么时候开始,我对学习的看法好åƒ?完全改å?˜äº†ã€‚我现在觉得学习就åƒ?在å?𿏏æˆ?,在解一个很大很大的迷。解ä¸?解开ä¸?是关键,关键是,å?ªè¦?我学习,往å‰?走,我之å‰?积攒的点点滴滴零零碎碎就会æ¸?æ¸?地自己拼凑起æ?¥ï¼Œè€Œæˆ‘看ç?€å®ƒä»¬å°±ä¼šè§‰å¾—é?žå¸¸æœ‰æ„?æ€?。而且学习å†?也ä¸?代表上课å?¬è®²ï¼Œå·²ç»?和生活混为一体了。这个å?˜åŒ–和我在日本的å?Šå¹´ç”Ÿæ´»ä½“验有关,和大学里的教育方å¼?有关,和很多事情有关,而且和我学习设计é?žå¸¸æœ‰å…³ã€‚说ä¸?太上æ?¥ï¼Œä½†æ˜¯è¿™çŸ­çŸ­çš„几个学期的设计课一定是影å“?了我很多,我开始学ç?€åŽ»æ€?考,去寻找,去ç?†è§£ï¼ŒåŽ»æ¬£èµ?,去评价,去表达。

�设计时,他人往往�能看到完��,但是作�一般都�是一天就能完�的,这中间有许多��的过程,大部分都是在完��上看�到的。这些过程相当的��,因为就连想法也是���熟的。

最近真忙啊。这学期我一共拿了三节课,一节是网络设计,一节是形象设计,还有一节是一个特殊的与清å?Žå¤§å­¦è®¾è®¡ç³»äº¤æµ?文化的设计活动,主题是水æ„?识。形象设计的课程对我们æ?¥è¯´æ˜¯ä¸€ä¸ªå‰?所未有的å°?试和挑战。过去这节课的内容是研究å?„ç±»ä¼?业形象,然å?Žæ‘¹æ‹Ÿä¸€å¥—视觉系统。但是今年出现了一个有æ„?æ€?的状况,正好我们大学里的综å?ˆå­¦é™¢éœ€è¦?一个新的形象,而è€?师想,那æ?¥å?šè®¾è®¡çš„å†?好ä¸?过的人选就是我们这些设计系的本科学生啦ï¼?å?Œå­¦ä»¬éƒ½ä¸ºæ¬¡æ„Ÿåˆ°å¾ˆå…´å¥‹ï¼Œå› ä¸ºè¿™ä¸?但相当于一项真实的设计工作,而且如果æˆ?功的è¯?,我们一起努力的æˆ?果将会出现在学校的信笺上,网站上,宣传å?•上,纪念å“?上…. 真正设计形象标å¾?å‰?,我们è¦?å?šå¾ˆå¤šè°ƒæŸ¥å’Œç ”究,æ?œé›†å?„类相关资料,å†?仔细分æž?它们。ä¸?但è¦?准确ç?†è§£è¿™ä¸ªæ–°å½¢è±¡çš„需è¦?,还è¦?确定它所代表与能够代表的特å¾?。我们å?šçš„第一件事就是请æ?¥ç»¼å?ˆå­¦é™¢çš„系主任,访问他对这个新形象的期待与è¦?求。我们当时问的主è¦?问题包括,这个综å?ˆå­¦é™¢æ˜¯ä»€ä¹ˆï¼Ÿä¸Žå…¶ä»–学院或其他学校的综å?ˆå­¦é™¢æœ‰ä»€ä¹ˆä¸?å?Œï¼Ÿå¦‚果它是一个人,是个什么样的人?它的观众都是è°??等等。在这里斩时脱离一下设计,讲一下当时系主任对我们学院的教育方针的形容,因为我觉得很有æ„?æ€?,也很有价值。他说我们学院是学习学院,ä¸?是教学学院。所谓的教学学院就是è€?师主è¦?负责传授已有知识,而在学习学院里,学生æ?¥å­¦ä¹ å¦‚何学习,是一ç§?积æž?探索的环境。在这ç§?学习学院里,很多课程的基础是研究和试验,没有固定的课程内容,因为新的ç?†è®ºå’ŒçŸ¥è¯†ä¸?断地在被å?‘现。æ?®ä»–说,学问也分两ç§?,一ç§?是基本学问,还一ç§?是应用学问。我们学校大部分的分学院都是应用学问的学院,是相对更有目标的学习,比如医学院是为了医治疾病,建筑学院是为了完善建筑结构等。而综å?ˆå­¦é™¢åŒ…涵很多以基本学问为主的å­?学院,例如天文学院,美术学院,音ä¹?学院。知é?“地ç?ƒå¦‚何在宇宙里è¿?转斩时并ä¸?会对我们有什么直接的影å“?,å?šå‡ºå?„ç§?独特的艺术å“?也ä¸?会改å?˜ä¸–界和人们的生活习惯。但是这ç§?对基本知识的渴望æ?¥è‡ªäºŽæˆ‘们人类的好奇心本性,而我们的综å?ˆå­¦é™¢é?žå¸¸é¼“励这ç§?天生的好奇心,以å?Šå¯¹å­¦ä¹ å’Œè¡¨è¾¾çš„热爱。系主任最å?Žè¯´çš„一å?¥è¯?让我å?°è±¡å¾ˆæ·±ï¼Œä»–说:如果你们毕业时å?‘觉自己懂得更少了,对知识的渴望更强了,那我们的努力就没有白费了。

�有一阵�没写笔记了,最近真是�忙�懒。上个礼拜四我们�级组织到下�那个州的一个大型�刷基地 (GAC) �观学习,去了两天。以���过�师说,这回自己真正目�到了整个�刷过程。虽然还有些地方�是很懂,但是去一趟还是长了�少�识。除了设计,还有这么多这么��的制作过程,想想挺有��的。我们还�观了那边的中国庭院和一个设计工作室 (ziba design)。从我们给学校设计标志的过程到这些专业的地方�观,觉得我们越�越接近现实世界了。虽然这有好处,我还是有些�习惯。�过一年左�的学生生活就该找工作了,唉。

You are freed by your limitations – å› å?—é™?而被释放。这å?¥è¯?是第一次上设计课当è€?师å?‘觉一项作业题出得太广,造æˆ?大部分学生ä¸?知如何是好时说的。å?Žæ?¥ç»?常ä¸?时地å?¬åˆ°ï¼Œè¶Šå?‘觉得有é?“ç?†ï¼Œå¹¶ä¸”在设计实践中深å?—体会。如果给自己一个较具体的范围,总能在其中越挖越深,得到æ„?想ä¸?到的收获。ä¸?ç„¶çš„è¯?,最终会å?‘现自己å?ªæ˜¯åœ¨æ‰“圈圈,所有的问题都å?ªæµ…碰表层而已,毫无æ„?义。就拿我们现在的作业æ?¥è¯´æŠŠï¼Œä¸»é¢˜æ˜¯æ°´ã€‚如果ä¸?深入研究水的一些具体问题而å?ªå‡­è¡¨é?¢è®¤è¯†æ?¥å…¥æ‰‹çš„è¯?,所得到的也å?ªä¸?过就是“缺水â€?,“水很美â€?,“水被污染â€?之类等简å?•化了的题æ??。ç»?过几个月的资料æ?œé›†ï¼Œæˆ‘们大家都在水的主题里找到了自己感兴趣的领域。有的人对水与人的精神关系å?šäº†ä¸?少研究,å?‘现水是最容易出现在梦里的元素之一,从中得到å?¯å?‘。有的人对水分é…?çš„ä¸?平衡感兴趣。有的人对水的政治化感兴趣。有的人研究水和大气的关系。有的人研究水所造æˆ?的视觉奇åƒ?。有的人æ?œé›†äº†è®¸å¤šæœ‰è¶£çš„æ°´æ•°æ?®ï¼Œæ¯”如ç§?一个西红柿需è¦?多少水,造纸å?ˆéœ€è¦?多少。我对水的使用比较关注,å?‘现我们的一大部分净水都因为欠缺的系统所æµ?失和浪费了。有了主题,有了实æ?®ï¼Œå½“然也就有了内容。目标明确,å?‘挥起æ?¥ä¹Ÿå°±è‡ªå¦‚多了,ä¸?会被太多选择而绊脚。å?¦å¤–,具体的出å?‘点并ä¸?等於狭窄的概念,å??而往往更容易表现大主题。现在ç?­é‡Œå·²ç»?出现很多有æ„?æ€?的作å“?了,它们都是凭空想ä¸?出æ?¥çš„。

一个�天过去,�开学了。这个暑�在北京过得很充实。有学校的活动,自己找的工作实践,去了���样的展览,接触了许多人和事物,自己也想了很多,有些想法更�定了,有些想法改�了。很庆幸很多�历没有等到毕业��去�试,我过去�会空想或者�想,把太多事情�想化,现在认识到了很多现实的问题,头脑还比较乱。现在剩下约一年的学生生活,这段时间我会好好想一想的。 刚回到学校时还有些�习惯,但是一开始上课,马上就��了过去的那�气氛。真的,学习是个很有力�的东西。就跟上次那个系主任说的一样,我越学越觉得学的�够而且想学的越�越多,想知�的越�越多。能够享�学习是一件很累但是也很有��的事情。

我们设计系除了主è¦?的几ä½?è€?师以外,还因特殊需求邀请特邀è€?师æ?¥è®²è¯¾ (guest lecturer) ,一般æ?¥è¯´ä¸€å?Šä¸€å?Šã€‚特邀è€?师往往都拥有很æˆ?功的设计工作室,这样他们ä¸?但å?¯ä»¥åœ¨æŸ?些领域里æ??供最专业的知识,我们觉得最å?¯è´µçš„æ˜¯è¿˜å?¯ä»¥ä»Žä»–们那里å?¬åˆ°å¾ˆå¤šå…³äºŽå¤–é?¢ä¸–界的看法。这个学期教书ç±?设计的就是一ä½?å??多年å‰?毕业于我们学校的特邀è€?师。他很有æ„?æ€?,迫ä¸?å?Šå¾…地想把他体验的一切告诉我们。本æ?¥ä»Šå¹´å¤?天通过设计实践我对设计曾ç»?一度é?žå¸¸å¤±æœ›ï¼Œä½†æ˜¯ä»–对设计的æ€?度与热情一下å­?就感染了我。嗯。什么都ä¸?能太ç»?对。

回顾过去的笔记,觉得自己对设计和艺术的认识都太简�了。我现在对艺术虽然还没有太多的�言�,对设计肯定是比过去�解的更多了,但是还说�太清。设计是�能一言概括的。�过多年的演�和�展,今天的设计有很多层次和�类。但是我喜欢最简�的把它区别于设计和真正的设计。设计这个�最近实在是被滥用的太多了,好�什么都�以��设计似的,尤其是电脑的�展(也是滥用)让人们把滤镜过的图�,时髦的色彩,还有花样的版�作为设计的标准,这是个很讨厌的现象。设计是为了一定的沟通和传达目的而�的,使用的所有元素应该都有实际的根�和充分的�由,设计的存在�是为了告诉你,“你看,我是一个设计,酷��好看�?�而是有它需�完�的任务,如果它是一张海报,它�明确地告诉你它的内容,如果它是一个形象,它�真实地传达它的特点。一般的专业�刷�,包装等都算的上设计,但也仅仅�留在设计,尤其是商业设计的层次上。因为它们虽然基本上都是以传达信�为主,但是为了增色,或多或少都会使用一些花招,而花招则是真正的设计最忌讳的东西。真正的设计应该把传达的�份推到最高,用巧妙易懂并且�象深刻的方法表现出�。

说到设计,一般人往往都会马上谈起创�。好��设计除了追求创�就�没有什么了似的。创�确实很��,因为它能在传达中起相当大的作用。但是我觉得很多人都忽略了一个更��的因素,诚�。为了创�而创�的东西是空虚的,维��久的。有了诚�,创��会有力。

怎样æ‰?能跳出框框,打破陈规呢 (think out of the box)?è€?师举了一个例å­?。在一个房间内,有一张桌å­?,桌å­?上有一个æ?¯å­?,æ?¯å­?里有看上去åƒ?水的毒è?¯ã€‚几分钟å?Žï¼Œä¼šæœ‰ä¸€ä¸ªäººè¿›åˆ°è¿™ä¸ªæˆ¿é—´é‡Œï¼Œä»–会去å–?é‚£æ?¯å­?里的水。这个人ä¸?懂英文,也ä¸?认识国际标志。一ä½?设计者被给予一根铅笔和一张纸,è¦?他在短短的时间内想办法阻止那人å–?水,æ?¡ä»¶æ˜¯ä¸?许碰æ?¯å­?或者那个人。如果你是这ä½?设计者你会怎么å?šï¼Ÿåœ¨çº¸ä¸Šç”»ä¸€ä¸ªå–?æ°´çš„å°?人,å†?在上é?¢ç”»ä¸€ä¸ªå¤§ X å?—?还是画一个骷髅,å†?画一个箭头指å?‘æ?¯å­??其实办法ä¸?å?ªè¿™äº›ï¼Œå¦‚果你把铅笔掰断,丢到æ?¯å­?里,那个人ä¸?是自然地就ä¸?会去å–?了å?—?或者,你å?¯ä»¥ç­‰é‚£äººè¿›æ?¥å?Žå¾€æ?¯å­?里å??痰,甚至往里é?¢å°¿å°¿ï¼?没有人说ä¸?行啊,都在æ?¡ä»¶ä¹‹å†…,而且效果ä¿?è¯?好ï¼?这个脑筋急转弯是有点那个什么,但是怎么样?有帮助å?—?

昨天瑞士设计师 Jean-Benoit Levy æ?¥æˆ‘们学校å?šäº†ä¸€ä¸ªå…³äºŽæµ·æŠ¥çš„æ¼”讲,挺有æ„?æ€?的。欧洲人还是有欧洲人的特点,é?žå¸¸å¯ŒäºŽè¡¨è¾¾ï¼Œæˆ‘很希望能å?¸æ”¶ä¸€äº›ä»–的风格。因为我们课堂比较å°?,å?„个è€?师的ç?†å¿µå?ˆæ¯”较接近,结果慢慢的大家的作å“?都有很多相似处,这样å?¯ä¸?太好,还是得把眼界放宽些。回想最早学设计的时候,我一心就是上课,å?šä½œä¸šï¼Œæ€»è§‰å¾—挤ä¸?出时间去翻书,看展览,或者å?¬è®²åº§ä»€ä¹ˆçš„。我觉得很多学生都容易犯这个错,总以为把所有时间都花在å?šä½œä¸šä¸Šçš„è¯?,作å“?肯定就会好。其实真的ä¸?然。去一个活动大概ä¸?会对你有什么明显的影å“?,但是去了å??个,二å??个,五å??个å?Žï¼Œæ¯?次å?¬åˆ°çš„看到的就会ä¸?知ä¸?觉地积累起æ?¥ã€‚ ä¸?过去展览讲座等ä¸?能太盲目。ä¸?è¦?æ­»è¦?求自己æ¯?个活动都一定去,也ä¸?è¦?过份期待这些活动对自己的帮助。因为æ¯?个人ä¸?å?Œï¼Œæ¯?个人被影å“?的方å¼?也ä¸?会一样。至於笔记,我是觉得除é?žå?¬åˆ°ä¸€å?¥ç‰¹åˆ«æ£’ä¸?想忘的è¯?写下æ?¥ï¼Œå…¶ä»–时候最好别记笔记,éš?æ„?放æ?¾çš„å?¬å°±å¥½äº†ã€‚

å·®ä¸?多是上个学期å?§ï¼Œå°±æ˜¯å?šæ°´çš„è®¡åˆ’çš„é‚£é˜µå­?,我开始å?˜å¾—比较会独立æ€?考了。我们这个系很难考,è¦?赌进å?Šå¹´çš„æ—¶é—´ï¼Œç»?历两次选拔。那阵å­?为了入系æ¯?个人都是拼了命的,由于大部分人都ä¸?懂设计,è€?师自然就æˆ?了神仙。入系之å?Žï¼Œæˆ‘们ä¸?自觉的还ä¿?ç•™ç?€å¯¹è€?师的强烈倚赖,è€?师ä¸?å¼€å?£ï¼Œè‡ªå·±ä¹Ÿä¸?知é?“è¦?å?šä»€ä¹ˆã€‚水的计划是个很特殊的活动,因为å‰?所未有,试验性很强,什么都是走ç?€æ?¥ï¼Œä½œä¸šä»€ä¹ˆçš„都是相互商é‡?æ¸?æ¸?å½¢æˆ?的,和平常è¦?求很具体的课程大ä¸?一样。这其中有很多问题,因为除了å?šä½œä¸šï¼Œæˆ‘们还得出作业,大家æ„?è§?很难统一,头疼æž?了,但是也对我们起了ä¸?å°‘å½±å“?。就拿我自己æ?¥è¯´å?§ï¼Œæˆ‘å?‘现我更有主è§?了。我慢慢觉得è€?师也ä¸?一定永远是对的,至少我ä¸?用从æ?¥éƒ½è®¤å?Œä»–。这并ä¸?是说我ä¸?å?¬ä»–的了,我还是很认真地å?¬ä»–所有的评论,然å?Žæœ‰é€‰æ‹©çš„å?¸å?–。我开始认识到我们的出å?‘点有时并ä¸?一样,é‡?视的和æ€?考的也会ä¸?一样。我越æ?¥è¶Šå¸Œæœ›ç”¨è‡ªå·±çš„æ–¹å¼?表达自己所想表达的,我想这也是è€?师希望我们努力å‰?往的方å?‘。还有一件事对我影å“?很大,就是å°?组å?ˆä½œã€‚过去考系的那段时候,压力很大,æ¯?次作业我第一个也是唯一想到的就是,我得å?šä¸€ä¸ªç‰¹åˆ«åˆ©å®³æ¯”别人都棒的作å“?,然å?Žå°±æƒ³å•Šæƒ³å•Šæƒ³ï¼Œæ€»æ˜¯æƒ³ä¸?出æ?¥ï¼Œçœ‹åˆ°å?Œå­¦æœ‰ä¸€ä¸ªå¾ˆç‹¬ç‰¹çš„æž„æ€?å°±æ?¨è‡ªå·±æ€Žä¹ˆæ²¡æƒ³åˆ°ã€‚由于水的计划,我们第一次真正接触了å?ˆä½œã€‚å°?组æˆ?ç«‹å?Žï¼Œæœ€åˆ?需è¦?çš„ä¸?是构æ€?,而是æ¯?个人å?•纯地去寻找对主题有帮助的资料。大家有ä¸?å?Œçš„æ¸ é?“,有ä¸?å?Œçš„兴趣,收集的资料很丰富,对我们研究讨论é?žå¸¸æœ‰å¸®åŠ©ã€‚è¿™è®©æˆ‘çª?然醒悟到,å?šè®¾è®¡æ€Žä¹ˆèƒ½å°±æ˜¯ä¸ºäº†å?šåŽ‹å€’å…¶ä»–äººçš„ä½œå“?呢?é‡?点是å?‚于,贡献,传达啊。我对作业的æ€?度就是在那时一下å­?å?˜äº†ã€‚当时我å?Œæ—¶æ‹¿ç?€å?¦ä¸€å ‚课程,传达策划,主题是未æ?¥å»ºç­‘。我没有马上去找所谓的最隹答案,而是认真地分æž?了资料与自己,希望能真正在这个题目上说些什么,å?Œæ—¶ä¸°å¯Œæˆ‘们所探索的主题范围。奇怪的是,我这么想了以å?Žï¼Œæž„æ€?å??而æ?¥çš„容易多了。

明天我就è¦?æ?¬å‡ºå®¶ä½?了ï¼?其实这个决定也挺çª?然的。虽然在美国大部分人上了大学都会离开家,我从æ?¥å°±æ²¡æƒ³è¿‡è¿™ä¸ªé—®é¢˜ï¼Œå› ä¸ºè¿‡åŽ»å®¶ç¦»å­¦æ ¡å¾ˆè¿‘ï¼Œåœ¨å®¶ä½?å?³æ–¹ä¾¿å?ˆå®žé™…。但是今年å¤?天我们把家æ?¬åˆ°äº†è¿œç¦»åŸŽå¸‚的一个地方,按å?Œå­¦çš„è¯?说就是乡下。这儿é? ç?€å±±ï¼ŒçŽ¯å¢ƒå’Œç©ºæ°”éƒ½é?žå¸¸å¥½ï¼Œä½†æ˜¯ä¸€å¼€å­¦æˆ‘æ‰?å?‘现,这儿太—–远—–了ï¼?æ¯?天开车等车æ?¢è½¦å®žåœ¨ä¸?是办法,我也第一次考虑到了æ?¬å‡ºåŽ»ã€‚æ‰¾æˆ¿å­?还挺好玩的,查校刊,打电è¯?,去å?‚观。学校附近有一大片ä½?宅房å­?,都是按å?•间出租的,我以å‰?从æ?¥æ²¡åŽ»è¿‡ï¼Œä¸€åŽ»çœ‹å’Œç”µå½±é‡Œçš„å¾ˆåƒ?。我找的那间挺ä¸?错的,很便宜,破破的,å?Šåœ°ä¸‹å®¤ï¼Œæ­£å¥½é‡Œé?¢è¿˜å‰©äº†äº›æ—§å®¶å…·ï¼ŒçœŸæ˜¯å†?å?ˆé€‚ä¸?过了。è¦?æ?¬å‡ºåŽ»çš„å?¦ä¸€ä¸ªåŽŸå› æ˜¯æˆ‘å?ˆæ‰¾äº†ä¸ªå®žä¹ å…¼å·¥ä½œï¼Œä¸‹ä¸ªæ˜ŸæœŸå¼€å§‹ã€‚在一个设计工作室,主è¦?是打打æ?‚,整ç?†æ??料,å?šäº›å‡†å¤‡å·¥ä½œï¼Œå?¶è€Œä¹Ÿä¼šæŽ¥è§¦äº›å®žé™…设计。我们å?Œå­¦å¥½åƒ?因为å?¬èµ·æ?¥è·Ÿæ‰“工差ä¸?多都ä¸?爱去,其实我å??而更喜欢这样ä¸?完全å?šè®¾è®¡ï¼Œå› ä¸ºåœ¨å­¦æ ¡å?šçš„å·²ç»?够多了,在那儿我倒原æ„?å?šäº›ä¸?费脑å­?的零七八碎,å?Œæ—¶äº†è§£ä¸€ä¸‹ç¾Žå›½è®¾è®¡å·¥ä½œå®¤çš„环境和è¿?转方å¼?,有机会时早些增加点ç»?验还是好的。工资ä¸?高,但是付房租什么的没问题,所以正好互相抵消了。嗯,马上我就è¦?完完全全地忙起æ?¥äº†ï¼Œè¯•试看å?§ï¼?

有这么一�奇怪的现象,�设计的和�艺术的常常对立,互相看�起。�设计的觉得�艺术的从�都�用大脑,整天隋心所欲地玩弄颜料,�艺术的觉得�设计的从��会有感情,整天对�电脑跟机器人一样。其实这都是对对方了解的太少所造�的。我觉得艺术与设计是互补的,互相�以学到�常多,�钻一项的�会错过很多。�外,艺术与设计虽然有很多根本的��,但是很多情况下它们并没有那么�一样。

其实,ä¸?仅仅是艺术,很多ä¸?å?Œé¢†åŸŸçš„知识都会增加对设计的认识。我很庆幸自己选择上了综å?ˆå¤§å­¦ï¼Œè€Œä¸?是å°?型的艺术学院。到现在为止,我拿过的其他课程包括心ç?†å­¦ï¼Œè¯­è¨€å­¦ï¼Œæ–°é—»åª’体,天文学,电脑程åº?等等。æ¯?节课都é?žå¸¸æœ‰æ„?æ€?,而且都多少与我学设计有间接的è?”系和帮助,åƒ?心ç?†å­¦é‡Œè®²åˆ°çš„æ„?识现象,语言学里人对ä¸?å?Œè¯­è¨€çš„æŽ¥å?—æ–¹å¼?… 现在入了设计系å?Žæ‹¿å…¶ä»–课程的机会就少了,很容易整天被设计包围,我得时常æ??醒自己设计ä¸?是全部。说到这儿,想起上次 VSA 设计公å?¸çš„主席æ?¥æ¼”讲时å?‘我们设计学生们æ??的建议。他说,别一下课就去翻设计书ç±?,爬山去å?§ï¼Œé’“鱼去å?§ï¼Œå?šä½ è‡ªå·±å–œæ¬¢å?šçš„事情去å?§ã€‚确实,设计本æ?¥å°±æ˜¯åº”该与生活紧密è?”ç³»ç?€çš„,如果ä¸?热爱生活,享å?—生活,体会生活的è¯?,设计的作å“?里怎么å?¯èƒ½æœ‰ç”Ÿå‘½å‘¢ï¼Ÿæ‰€ä»¥ï¼Œäº†è§£å…¶ä»–设计固然é‡?è¦?,但是ä¸?是最é‡?è¦?的。多去观察世界,体验生活,丰富自己的è¯?,对设计的认识会自然加深的。

我觉得设计这类的东西有时候还是挺讲天份的,åƒ?我学起æ?¥å°±ç‰¹åˆ«è´¹åŠ²å„¿ï¼Œæœ‰çš„äººå°±è½»æ?¾çš„多。虽然是这样,努力还是有æˆ?果的,因为设计ä¸?仅仅是个产物,它的过程å?Œæ ·é‡?è¦?。以å‰?有人问过我怎样æ‰?能æ??高自己的设计水平。我能想到的也就是多看,多å?¬ï¼Œå¤šå?šï¼Œå¤šæƒ³ã€‚

很矛盾。我觉得我认为的设计和很多人都�一样。虽然我�常试�解释设计,�是我自己其实也�常觉得模糊。设计真麻烦,分好多�,教室里的,工作上的,�想的,实际的,个人的,公益的,商业的,当然好的设计应该�以很好的平衡很多因素,但没那么简�。 今天我们到那个特邀�师的设计工作室 leonhardt-fitch 上课去了。到现在我去过大概三家这样的工作室了,�常�常大,也很有“设计感�,有一些独特的家具,贴���招贴,工作人员都嘻嘻哈哈的,还有�独打电动的休�室,典型的设计学生�往的地方。但是�知�为什么我就是�怎么想去这样的地方工作。觉得冷冷的,�能是与美国的商业界有�直接�系的关系�。我还是比较喜欢教室里的设计。�说今天上课的事,我们开始�设计公�年报了,中间�懂得一大堆�济上的事,我��头大死了。我们现在真的是越�越接近实际,��刚学设计时那么自由了。公�形象与年报设计好�是美国设计界比较更大的部分,也是我们学业里相当�视的部分,我两个都�喜欢。

我å?¦å¤–的设计课是资料设计。资料设计是设计里最实用的,包括时间表,地图,地é“?线路,表格,路标等,å?¬èµ·æ?¥å¥½åƒ?比较枯燥,但是é?žå¸¸é‡?è¦?,而且设计好了的è¯?能起关键性的作用。资料设计是æœ?务于人的,它有一定的任务è¦?完æˆ?。è€?师讲到了一件为盲人设计地图的事情,强调了资料设计所è¦?求的严格æ€?考能力。盲人分两ç§?,先天和å?Žå¤©ã€‚å?Žå¤©çš„盲人因为曾ç»?有过视觉ç»?历,懂得抽象空间的概念,所以为他们设计的地图有凹凸就å?¯ä»¥ä½¿ç”¨ã€‚先天的盲人一生下æ?¥å°±çœ‹ä¸?è§?,他们对世界的ç?†è§£æ˜¯ä¸€ç³»åˆ—事物的顺åº?,比如往å‰?走七步是门,出门往左走三步是六个å?‘下的å?°é˜¶… 抽象空间的概念对他们æ?¥è¯´å¾ˆéš¾ç?†è§£ï¼Œæ‰€ä»¥é’ˆå¯¹ä¸?å?Œçš„需求,为他们设计的地图是å?¯ä»¥è§¦æ‘¸çš„事物的排列。我们这学期的作业是比较两个城市,它们的天气,地ç?†ï¼Œäººå?£ï¼Œå±…ä½?æ?¡ä»¶ï¼Œå…¶ä»–有æ„?æ€?的资料。è¦?æ?œé›†å¾ˆå¤šæ•°æ?®ï¼Œç„¶å?Žè¿‡æ»¤ï¼Œé€‰æ‹©æœ€æœ‰ä»£è¡¨æ€§çš„,用最å?ˆé€‚的形å¼?表现出æ?¥ã€‚我刚开始å?šå¤©æ°”的部分,真å?šèµ·æ?¥è¿˜çœŸæ²¡é‚£ä¹ˆç®€å?•,有很多细节,工作é‡?也很大,我最早å?šçš„几个图表都太粗糙,得é‡?å?šï¼Œå?¯æ˜¯çŽ°åœ¨è¿˜æ²¡æƒ³å¥½å‘¢ã€‚

Leave a Comment

CSSTDG读书笔记七

Chapter 6. Text Properties

关于line-height的�解
在一行中,inline元素会被渲染�一个inlinebox,它的高度就是font-size的大�(如果�考虑其他比如padding的影�)。line-height是行与行基线之间高度,它和inlinebox的高度��,�能比linebox的高度大,也�能比他�。一行中的所有inline元素都是按照基线�对�的。line-height默认是normal,为font-size的1.2�。

linebox的构建方��以�考下图:
lineboxconstructmodel.gif

继承问题:
line-height的��em,ex,以�百分比都是按照自身的font-size�算的。
body {font-size: 10px;}
div {line-height: 1.5em;} /* computes to ‘15px’ */
p {font-size: 18px;}

body {font-size: 10px;}
div {line-height: 1.5;} /* 18px*1.5=27px */
p {font-size: 18px;}

这个例�说明如果给line-height指定��,则�览器将首先计算line-height的�对数值,然�这个结果被�元素继承。
而如果给line-height指定数值而�指定��,则这个数值将作为一个比例值被�元素继承,从而根�它们�自的font-size计算出line-height的�对数值。

vertical-align这个东西真是诡异,看得我头都大了……
其�值如下
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
vertical-align�用于inline元素和replaced元素(比如img和input等)以�表格�元,应用于表格�元时�有这几个值�以被识别:baseline, top, middle 和 bottom
vertical-align�继承。
baseline:让该元素的baseline和父元素的baseline对�。
sub:让该元素的baseline(对于replaced元素则是底部)低于linebox的baseline。
super:让该元素的baseline(对于replaced元素则是底部)高于linebox的baseline。
bottom:让该元素的inlinebox底部和linebox的底部对�。
text-bottom:让该元素的inlinebox底部和默认textbox的底部对�,对于默认textbox比较难以�解,它的大�是从父元素的font-size中计算�的。
top和text-top类似
middle:让该元素box的中线对�父元素的的baseline之上0.5ex的那�线,�过�当心���览器对ex的计算方法��。
如果�百分数,则将该元素的baseline(对于replaced元素则是底部)相对于父元素的baseline上移或者下移其自身line-height的该百分比率。正值上移,负值下移。
如果�一个具体数值(有��),则将该元素从它没有应用align时候的�置上移或下移相应的�离,�样是正值上移,负值下移。
vertical-align会影�所在linebox的高度,这是显而易�的。

关于bottom和top的相关对�方�IE和FF似乎有���的�解,个人认为IE�解地更��也更符�标准一些。�过标准中对于linebox的baseline没有明确的定义,所以细究起�也说�清�对�错。总之垂直对�这个属性还值得好好研究,��大�的inline元素连�一排或者多排,�自应用��的垂直对�方�,究竟应该出现什么样的情况?在���览器中的实际情况�如何?待试验。个人觉得今�实际使用中还是多用�对数值定�比较方便也比较容易控制。

Leave a Comment

CSSTDG读书笔记六

Chapter 5. Fonts

Serif fonts : Times, Georgia, and New Century Schoolbook.
�等宽,边角和笔画结尾处有衬线修饰

Sans-serif fonts : Helvetica, Geneva, Verdana, Arial, and Univers.
�等宽,边角和笔画结尾没有修饰

Monospace fonts : Courier, Courier New, and Andale Mono
等宽字体,�以有修饰也�以没有

Cursive fonts : Zapf Chancery, Author, and Comic Sans.
花体字

Fantasy fonts : Western, Woodblock, and Klingon.
å…¶ä»–ç±»

关于font-family的写法需�注�
普通字体集�用引�扩起,比如serif等

注�
font-variant: small-caps;的用法,原�的�写字�����大写。
而text-transform: uppercase | lowercase | capitalize | none | inherit 则��。
其中capitalize是�个��首字�大写

font这个集�属性的写法:
[[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>] | caption | icon | menu | message-box |small-caption | status-bar | inherit
�三个属性�选,顺���。font-size和font-family��缺。
line-height是text的属性,�过�以写在font中,需�一个斜�(/)接在font-size��,顺����。
font属性的所有�略属性会被当�默认值normal而并�inherit,此处需�特别注�。
��的caption,icon等是让font使用系统的样�,如:
font: caption;表示使用系统的caption control样�,比如button的样�。

@font-face将在CSS2.1中去除。它有一个用处是�以使用远程字体。用法如下,待测试:
@font-face {font-family: “Scarborough Fair”; src: url(http://www.example.com/fonts/ps/scarborough.ps);}

Leave a Comment

看到一个css的圆角矩形背景布局

在css Zen Gadern看到一个��Contempo Finery的样�,作者是Ro London。

这个样�中用了一些�技巧实现了�内容扩展的圆角矩形背景,之�一直对这�背景的实现比较头疼,表格时代的布局是三个tr�定,�过那样有太多的�结构化冗余标签,现在如何有效的实现呢?这里用的方法蛮有��的,记下�留��考。

其中�用到了一个背景图片——一个足够高的圆角gif图片,除了上下边框的圆角,中间部分都是���的(�则也�谈�内容延伸了)。由于gif用索引色,所以图片高度的增加对于文件体积的增加影��大,因为高度的增加�体现在中间��的部分,比如这个样�中就用了一个高度为1200px的图,高度越大适应性越大。

具体å?šæ³•å°±æ˜¯ï¼Œæ¯”å¦‚çŽ°åœ¨æœ‰ä¸€ä¸ªid为containerçš„div元素,其中å?«æœ‰è‹¥å¹²p元素(这ç§?结构也比较常è§?)。container应用这个背景,所有的p元素也应用这个背景,ä¸?å?Œçš„æ˜¯container的背景ä½?置是top,而p元素的背景ä½?置的yå??标是一个负值,这样便于将上部的圆角边框éš?è—?掉,pçš„margin为0,这样å?¯ä»¥ä¿?è¯?å?„个p元素连在一起,å?Œæ˜¯containerçš„padding-top也应该足够大,以å…?背景被p的背景覆盖。container中的最å?Žä¸€ä¸ªå…ƒç´ ï¼ˆå?¯èƒ½æ˜¯p,也å?¯èƒ½ä¸?是p)也应用这个背景图,背景ä½?置是bottom,则显示圆角矩形的下边框。这样这个圆角矩形就å?¯ä»¥â€œæ‹¼â€?出æ?¥äº†ã€‚
总结一下就是上边框用的是父容器的背景,下边框用的是最�一个元素的背景,中间��的部分分�给�个元素。

这�方法需�注�几点,一是gif图片�是�明的,�则需�覆盖父级背景的时候覆盖�掉;二是这个背景图片在文件体积�许的情况下�足够高,��能��高过最高的�个元素(这个例�中是p元素)��。

�考这个示�图
圆角布局示�图

Leave a Comment

CSSTDG读书笔记五

Chapter 4. Values and Units

ex是一个�写x的高度。一般ex用0.5em代替,而IE5/MAC是按照规范实时渲染一个x然�计算它的高度的。
em和px是常用��,以�使用中应多使用em,因为比较�活。

相对url是相对样�表所在url的。
Navigator 4错误地�解相对路径,它把所有相对url�解�相对html文档。

Leave a Comment

CSSTDG读书笔记四

Chapter 3. Structure and the Cascade

specificity表示了一个样�使用时的优先级
CSS2用3�表示一个样�的specificity
CSS2.1用4�
四�规则:
�个ID选择符,加 0,1,0,0
�个class选择符,�个属性选择符,或者�个伪类,加0,0,1,0
�个元素和伪元素,加0,0,0,1
其他选择符包括全局选择符*都没有加�效果,但它们有specificity,0,0,0,0
一些例�:

h1 {color: red;} /* 0,0,0,1 */
body h1 {color: green;} /* 0,0,0,2 (winner)*/

h2.grape {color: purple;} /* 0,0,1,1 (winner) */
h2 {color: silver;} /* 0,0,0,1 */

html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (winner) */

文内的样�specificity为1,0,0,0 始终高于外部定义
特别的,如果一个样�特别��,�使用!important,它优先于所有其他specificity。
如果!important也�生了冲�,则�考specificity的比较结果,如果specificity冲�则按先�顺�。

关于继承Inheritance
body的background样��以�上传递给html元素,这是继承的一个例外。
�大多数盒模型相关属性都�继承,比如margin,padding,background,border等

继承bug
table�继承�些样�?
关于继承bug具体还�是很清楚。

继承没有specificity,所以继承的优先级低于比如甚至全局选择符的优先级

层�Cascade
import进�的样�表优先级低,因为import出现在最��

Leave a Comment

CSSTDG读书笔记三

Chapter 2. Selectors

链接伪类(�应用于超链接): link, visited
动�伪类(�应用于任何元素): focus, hover, active
伪类顺åº?:link-visited-hover-active LVHA – “LoVe-Ha”

注�:first-child伪类的用法:
如,p:first-child 表示所有兄弟元素中,该p元素为第一个的情况,而�是p的所有直接�孙中的第一个元素。

伪类�以混�使用a:link:hover,a:visited:hover等

伪元素
:first-letter 第一个字�
:first-line 显示时的第一航
这两个伪元素�适用于block元素
:before
:after
content: “”;otherstyle

Leave a Comment

CSSTDG读书笔记二

Chapter 2. Selectors

css元素的属性声明用空格分割,但有一个特殊情况就是font元素
font: large/150% sans-serif;
其中斜�/用�分割字体大�和行高。
支�星�选择符
* {font:12px;}

关于混�class选择符,一个元素�以应用多个class,用空格分隔。
效果元素中class属性值的顺åº?无关,<div class=”classa classb”>å’Œ<div class=”classb classa”>
是一样的,它们应用到元素中的顺�和定义时的顺�一致。
�时�以针对使用混�选择符的元素指定特殊定义
.classa{ color:red;}
.classb{ font-weight:bold:}
.classa.classb{background-color:silver;}// class=”classa classb”的元素æ‰?会有这个样å¼?
但是IE的解释有问题,它会给所有class�classb的元素应用这�规则。
所以

<p class=”classb”>blah</p>
<p class=”classa classb”>blah</p>
<p class=”someclass classb”>blah</p>

类似这�元素都会应用background-weight:silver;这�规则。

ID在�一篇文档中唯一,��混�。

属性选择符
elemname[attr] {…}
elemname[attr1][attr2] {…}
elemname[attr="blahblah"] {…}
elemname[attr~="blah"] {…} 包å?«
elemname[attr|="ba"] {…} 先导
IE目��支�属性选择符

> 选择符,表示直接�孙。空格表示�孙。
+ 选择符,表示相邻的下一个兄弟。如p + li {}表示紧跟p的li的样�。�以连加如p+div+ul
IE目��支�这两个选择符

Leave a Comment

Older Posts »