来讲讲:CSS挑选符定名的几个准绳
强大的字体控制和排版能力。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支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人. Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
页:
[1]