CSS实例教程:建立性感的CSS款式表

2021-01-20 16:41 jianzhan

原文名字:Creating Sexy Stylesheets
原文详细地址:http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets
做为1个CSS层面的权威专家,所做的不只是记牢挑选符(Selectors)那末简易,提高款式表的功效和可维护保养性,和设计方案蓝图和管理方法工作中步骤全是工作中的1一部分.在本篇文章内容中,Jina Bolton得出了10个CSS技能提醒,这些內容是由对12位顶级的设计方案者的调研提炼而来.
接下来,我将关键放在建立性感的款式表方式的探讨之上.1旦CSS被用来建立具备风采的网站,CSS的撰写客观事实上就早已变成了造型艺术.应用何种方式建立,构架和管理方法CSS变成了1件美好的事儿.
那末如何建立这些性感的款式表?款式表应当具备那些特点呢?
几个月前,我荣幸参加了在俄勒冈州波兰特岛所召开的Web Visions 2007的主题大会.在提前准备我的演讲汇报时,我调研了12位工作中在网页页面设计方案层面的设计方案人员和开发设计人员.根据调研的結果,再融合我自身的工作中工作经验,我撰写了下面的1个目录用来在建立款式表的情况下给予自身以适度的提示. 01. 维持CSS摆脱标识
应用连接或导入款式表的方式针对中阶或高级的CSS开发设计人员来讲全是再一切正常但是的事儿,可是我在这里仍然会强调1下这类方式的关键性.我见过的很多站点,在创站之初,CSS文档很干净整洁,机构的也井然有序,可是伴随着時间的推移,这些文本文档因为嵌入的乃至内联(inline)的款式出現而变得杂乱无章无章,1层面将会是因为给予的升级限期很短,另外一层面也许便是纯碎的因为懒散.
你正忙于1个有着不计其数条的方式內容另外出現的网站的大面积升级,给你的限期很短,因此你就挑选了应用嵌入或内联款式这样1些”迅速修复”的方式.1些年以往了,习惯性仍然…,直至有1天你被告之这个站点必须再次设计方案,可是全部的內容依然不会改变,这个情况下而你仅有1个礼拜去进行.想像1下,这将是1个如何的状况.
实际上这是很广泛的状况,升级款式表是1个再简易但是的每日任务,在你几年的”迅速修复”以后,这些款式遍及了全部站点,坚信你压根没法记牢她们在那里.因此如今你应对的仅有2个挑选a)在1个礼拜以内找出1个方式去清除规整这些款式b)找1份新的工作中吧.
干万不必将你的工作中变得越来越艰难.应用连接和导入款式表是你的不2之选.标准的建立并维持款式表的干净整洁,你会活得更非常容易1些.
提醒:当心应用连接或导入的方式会在标识上加上冗余的款式.每次你建立新的款式表,你都会升级要不便是加上新的款式,过量的外联款式不只会使补钉的修补变得艰难,也会使款式表更难于维护保养.因而能够了解为何大中型站点会为不一样的区块一部分而去分离出来款式表.当心不必玩太过了,物极必反.
这里很值得提及1下的是过量的款式表可能使HTTP的恳求数提升.这些都会潜伏的危害特性.因而,Internet Explorer将连接的款式表数限定在了32个. 02. 英语的语法并不是猜字迷.
你应当搞清楚为何我会说到这个.英语的语法学是你最好是的盆友,挑选适合的,成心义的元素去叙述你的內容,保证你所挑选的是颇具语意的类(class)和ID特点值.做正确的事儿会使你的日常生活变得非常容易许多,假如你是某个精英团队的1分子结构,对精英团队别的组员来讲也是这般.看1下下面的这条标准:
.l13k { color: #369; }
假如你是刚接手这个工作中,你在CSS文档中看到了上面的內容,你能不可以说清晰这个类是甚么意思?绝大多数状况下你都会说不.这个类的名字将会是个缩写,可是恐怕沒有方法去搞清楚他究竟是甚么的缩写,眼下是1摸黑.或是这类状况,将会是你把它放到这里,你如今很清晰它是甚么意思,可是你能确保3年以后你还记得它是甚么意思么?
如今大家看1下下面的标准:
.left-blue { color: #369; }
你将会马上了解这个类挑选符是为左边边栏的显示信息蓝色区块而建立的,这时候它就正确的表述了1定的语意.正如我在上面提到的,1旦要你在在1周内要再次设计方案,可是在重构全过程中,这个区块必须精准定位到右侧,色调变成鲜红色,类的特点值就沒有任何实际意义,因此你如今必须更改你全部的特点值,要不就甚么都不更改,但是这样将会或致使重重的疑惑.
因而处理上面难题的最好是方式便是在类特点值的取名中防止应用色调(包含色调名字和106进制值)或宽度,高宽比的规格值.另外你也尽可能的防止去应用任何说明主要表现方式的值,比如box.反之,将主要表现和內容分离出来的实际意义也就不复存在了.
最终,大家看1下最适合的取名标准:
.product-description { color: #369; }
你应当能了解,这个标准是运用于商品叙述.不管你的设计方案更改了是多少次都不容易更改.清晰明了的觉得非常好.
上1页12 3 4 5 下1页 阅读文章全文