|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
坦白的说,我写CSS时,有最少1/4的工夫是在纠结选择符该怎样定名。随便的定名,会让你堕入为难。
举个例子,我们必要在一段笔墨里将某些词标红。以是为此建了一个.red{color:red;}。了局产物司理以为,白色太刺目了,改成橘色对照好吧。这下头年夜啦,岂非写成.red{color:orange;}么?要否则就是把HTML里的每一个class="red"改成class="orange"?
在已往几年工夫里,我常常碰到如许的为难。因而作为一些履历之谈,我收拾出以下的几个定名准绳:
准绳一:CSS选择符定名应当表现布局而不是款式。
这句话听起来很奇异。如许不是违背了却构和款式分别的准绳么?恰好相反,实在恰是遵守分别准绳。要晓得,CSS选择符名真实的用途是在HTML代码里润色标签。以是它实在应当被看做布局的一部分。因而选择符的名字不成以跟款式有关。
我开首将的谁人例子,就是违背这一准绳典范。准确的写法,应当是.highlight{color:red;},大概干脆就用em{color:red;font-style:normal;}。
同理,我只管制止用带有left、right、色彩、bold等字眼的名字,总而言之,那些能够被作为CSS属性值的名字,都只管罕用作名字。
偶然候,我们会碰到另外一种情形。有一个很罕见的结构:题目放在区块的左上方,而右上方是一个“检察更多”的链接。以是我们会用如许的代码
<h2>
<span><ahref="#">检察更多</a></span>
出色贴图
</h2>
天然,会有响应的款式:
h2span{float:right;}
可是如许做实在很伤害。假如我们请求给题目后再加一个副题目(好比“凌驾1000万优美图片”之类的恶俗口号),就没法再用span了。用strong或是em,实在感到怪怪的。
准绳二:不要容易将特别款式间接赋给经常使用的HTML标签
下面谁人例子的成绩就在于,容易的将款式使用在span这类经常使用的标签上了。h2span这类选择符,意味着你以为h2里一切的span都要利用右浮动。可是如许的判别明显是很果断的。
另外一个例子是,喜好用ul.top10li这类选择符。如许用并不是不成,但请先确保这个排行榜里只是纯笔墨。倘使有一天产物司理发明,仿佛应当把前三个的信息写得更具体,就意味着你大概必要用到上面这类布局:
<ulclass="top">
<li>
<divclass="product">
<h6>产物称号</h6>
<ul>
<li>型号:XXX</li>
...
</ul>
<div>
</li>
</ul>
这下又傻眼了吧。只能用.top20.productli{}往掩盖失落之前的款式。
我对照偏向的写法,是如ul.top20li.item如许写。(固然,CSS2筹办了更多更精准的儿女选择器,就犯不着这个了。守候IE8吧~~)
准绳三:计划好一系列的“全局保存字”,以免定名抵触
一些经常使用的单词,就不要用作特别款式的名字。好比,我们会常常用到以下的选择符:
.tabli.current
大概
.navli.current
以暗示以后激活的标签或选项。良多款式城市用到“current”这个单词,为了不相互的款式抵触,有一个很复杂的举措,就是工资约定,纯真的.current款式不作任何界说。换句话说,current这个名字只能呈现在准确的儿女选择符中。 相似的另有:
“.active”:和current差未几,有人也喜好用这个
“.first”:常常在如“选项|选项|选项”的布局顶用到
“.last”:在田字格结构中大概会用到
“.hover”:偶然候必要用这个款式分离JS完成一些效果
“.text”、“.button”、“.submit”等:在属性选择器提高前,input标签的款式都靠它们了。
准绳四:英文要准确
哎,这只能怪盘算机是美国人创造的了。偶然候会看到一些奇异的选择符名。我注释一些经常使用单词的寄义:
header,footer:
这两个的意义是指“头部”和“底部”,更切实点讲是“页头”和“页尾”。
heading,footing:
heading的意义是“题目、标题”,<h1>的h就是heading的缩写。
footing的意义是“注脚”。
以是呢,我的意见是,全部页面的顶部和底部用header和footer,而区块的题目和底部用heading和footing。
caption:
这个词的意义也是“题目”,可是它特指“图片的笔墨申明”。以是记得用在图片底部的笔墨。
primary,secondary:
这两个词是“主要”“主要”。它们常常是指同级其余事物,只是主要性分歧。好比提交按钮和作废按钮。
main,sub:
这两个词才是高低级干系。如“主菜单”和“子菜单”。
top,middle,bottom:
这里次要是“中”这个词。“上中下”里的“中”是用middle。拜见text-align属性。
left,center,right:
“左中右”的“中”是center。拜见vertical-align。
别的,另有一些经常使用的词语:
rating:打分
rank:“第几位”
showcase:展现橱窗,能够用作一行五个这类排布。
category:分类
thumbnail:缩略图
snapshot:截图。这个单词的意义是“快照”,以是一样平常指原巨细。
breadcrumbs、pathway:这两个都能够用来指这个器材:“首页>二级页面>内容页”
quicklinks:这个能够用作页面右上角的“登录|匡助|客服”,也能够指页面底部的“关于我们|网站舆图”
tip:提醒。能够用作输出框中间的笔墨,或是弹出的提醒框。
符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 |
|