标记语言——精简标签
发布时间：2020-03-16 10:42:10 所属栏目：编程 来源：站长网
导读：点击这里返回剧本之家 HTML教程 栏目． 上文：标志说话再谈清单 原文出处Chapter 9 精简标签 先前我们不绝提到布局化内容可以或许把布局与计划细节分类并精简标签,该怎么做呢?我们可以行使切合尺度的XHTML与CSS取代表格,图片建造我们所必要的版面. 行使尺度技能
|
点击这里返回剧本之家 HTML教程 栏目．
上文：标志说话——再谈清单 原文出处 Chapter 9 精简标签 先前我们不绝提到布局化内容可以或许把布局与计划细节分类并精简标签,该怎么做呢?我们可以行使切合尺度的XHTML与CSS取代表格,图片建造我们所必要的版面. 行使尺度技能建造网站(出格黑白常依靠CSS的网站)的时辰,我们经常会养成一个不太好的风俗,就是加上多余的标签和class属性,技能完全不必要它们. 通过在CSS中行使集成选择器(descendant selectors),我们就能消除多余的<div>,<span>与分类属性.精简标签代表页面将能读取得更快,同时更轻易维护,在这一章中,我们会接头几个完成这项使命的简朴做法. 以尺度技能建造网站时,怎样精简标签? 精简标签是个值得接头的重要话题,建造网站时,用正当的XHTML誊写,用CSS设定展示结果能获得的庞大甜头之一,就是精简标签.简短的代码代表着下载速率加速,对付行使56k拨号上网的用户来说,这绝对是要害,简短的代码也代表处事器空间需求,带宽耗损镌汰,这能让老板,体系打点者开心. 题目在于,纯真简直定页面切合W3C尺度类型并不代表内容所行使的代码会收缩,你虽然能为切合尺度的标志内容加上各类不必要的标签,没错,他简直切合尺度,但也许为了让计划CSS的时辰利便一点,加了不少多余的代码. 别怕!这边有些能力,让你能计划出简捷,有切合尺度的标志内容,但也同时保存足够的CSS样式节制手段.接着让我们进修几个精简标签的简朴能力. 担任选择器 在这里我们要看看两种在小我私人网站标志侧边栏(包罗信息,链接和其他对象)的做法.把全部好对象塞进一个id是"sidebar"的<div>里,以便稍后把它放到赏识器视窗中的某一处(第二部门将会接头CSS机关 / 排版成果). 要领A:兴奋的分类 <div id="sidebar"> <h3 class="sideheading">About This Site</h3> <p>This is my site.</p> <h3 class="sideheading">My Links</h3> <ul class="sidelinks"> <li class="link"><a href=http://www.jb51.net/web/"archives.html">Archives</a></li> <li class="link"><a href=http://www.jb51.net/web/"about.html">About Me</a></li> </ul> </div> 我在很多网站上看过相同要领A的标志内容,在计划者刚发明CSS的威力的时辰,很轻易打动过甚,为每个想要拟定非凡样式的标签指定class. 早年面这个例子来说,或者我们以为<h3>指定class=sideheading是为了辅佐它们指定与页面之内其他问题差异的样式;为<ul>和<li>指定class也是为了同样的来由. 分类CSS 指定样式时,假设我们想让问题酿成橘色,行使serif字体,底部加上浅灰色边线,而"sidelinks"无序清单则要把小圆点标记去掉,清单项目改为粗体. 要领A必要的CSS内容看起来会像这样: .sideheading { font-family: Georgia, serif; color: #c63; border-bottom: 1px solid #ccc; } .sidelinks { list-style-type: none; } .link { font-weight: bold; } 我们能参照标志内拟定的分类名称(class),为这些标签指定非凡样式,你乃至能想象页面的其他部门也照这个方法组织: 导航条,页尾与内容区,每个标签都加上了混乱的分类,以便对它们有完全节制权. 没错,它简直能运作,可是有个简朴的做法可以或许节减这些分类属性(class),同时让你的CSS更轻易阅读,更具组织性,接着看要领B. 要领B:天然的选择 <div id="sidebar"> <h3>About This Site</h3> <p>This is my site.</p> <h3>My Links</h3> <ul> <li><a href=http://www.jb51.net/web/"archives.html">Archives</a></li> <li><a href=http://www.jb51.net/web/"about.html">About Me</a></li> </ul> </div> 要领B短小精壮!可是等等,分类都到那边去了?恩...你很快就会发明我们着实并不是真的必要它们,首要是由于我们把这些标签都塞进一个具有惟一名称(本例是sidebar)的<div>的相关. 这就是施展担任选择器浸染的处所了.我们只必要直接以标署名称指定位于sidebar之内的标签,就能去掉这些多余的分类属性. 以内容前后相关指定CSS 让我们看看与要领A沟通的样式,可是这次我们用担任选择器指定位于sidebar里的标签. #sidebar h3 { font-family: Georgia, serif; color: #c63; border-bottom: 1px solid #ccc; } #sidebar ul { list-style-type: none; } #sidebar li { font-weight: bold; } 通过参考 #sidebar ID,就能为包括在个中的标签指定非凡样式,举例来说,只有位于<div id="sidebar">之内的<h3>标签会设定上述的CSS法则. 这种按照内容前后相关指定样式的做法是收缩标志内容的要害.凡是在为内容计划好语义布局之后,就不必为标签加上分类属性了. 不止用在侧边栏 我们只展示了页面的一个段落(就是侧边栏),不外这个做法可以应用到整个页面布局上,只要将标志内容依照逻辑分成几个段落(或者是#nav,#content,#sidebar,#footer),然后以担任选择器为这个段落内的标签别离拟定非凡样式就可以了. 举例来说,假设在页面内的#content与#sidebar段落内都用了<h3>标签,而且但愿它们都行使serif字体,然而,你但愿个中一个段落的<h3>以紫色表现,另一个则是橘色. 这是不必要修改任何标签,加上分类属性.我们可以通过一个全局样式指定全部<h3>标签共用的法则,然后用担任选择器按照标签的位置设定颜色. h3 { font-family: Georgia, serif; /* All h3s to be serif */ } #content h3 { color: purple; } #sidebar h3 { color: orange; } 指定全部<h3>标签都行使senif字体,而颜色必需按照内容上下文相关选择行使紫色或是橘色,此时我们不必要一再共享法则(这个例子中是font-family),因此能收缩CSS的内容,同时防备多个声明内呈现一再的法则. 我们不只能镌汰class属性必要的特另外标志空间,同时CSS布局也变得更具意义,让我们更轻易阅读它的内容,更轻易依照页面分段举办组织,修改特定的法则也变得很简朴,对复杂,伟大的排版来说出格明明,由于这时你也许会同时拥有上百条CSS法则. 举例来说,在这个例子中,假如把共享法则加到每个声明中,而稍后想把全部<h3>换成sans serif字体的话,就得修改三个处所,没步伐一次搞定. 越少分类越好维护 除了镌汰必要行使的源代码空间之外,用担任选择器取代多余分类还代表了标志内容将来易于扩展. 举例来说,让我们假设你想让sidebar之内的链接酿成赤色,而不是像页面的别的部门那样行使蓝色,因此你成立了一个red类,像这样加到锚点标签中: <div id="sidebar"> <h3>About This Site</h3> <p>This is my site.</p> <h3>My Links</h3> <ul> <li><a href=http://www.jb51.net/web/"archives.html" class="red">Archives</a></li> <li><a href=http://www.jb51.net/web/"about.html" class="red">About Me</a></li> </ul> </div> 而把这些链接酿成赤色(假设预设的链接颜色不是赤色)则必要相同这样的CSS: a:link.red { color: red; } 这些举措没什么题目,也完全可以正常运作,可是假如将来你改变心意,想把这些链接换成绿色的话怎么办?可能更现实一点,你的老板无意说了"本年赤色已颠末期了,把这些侧边栏链接换成绿色"!没题目,你只要修改CSS里的red类就搞定了,可是标志内容里的class属性照旧red,明明这不完全切合语义,就跟行使其他颜色看成分类名称一样. 这不是个行使表现结果看成分类名称的甜头所,可是完全不指定分类的话,我们能省去很多处理赏罚分类的精神(以及代码),同时让内容语义更公道,我们倒不如以担任选择器选择这些侧边栏的链接,依照必要指定样式. 标志内容和要领B完全沟通,而设定侧边栏的链接所需的CSS将是这样: #sidebar li a:link { color: red; } 根基上,这代表"只有在<div id="sidebar">之内的<li>标签里的行使了href属性的锚点标签应还表现成赤色". 此刻,我们维持了简短机动的标志内容,而将来更新只必要用到CSS,不管想让链接酿成赤色,绿色,粗体,斜体都没题目. 接着,来看看另一个精简标签的做法:消除不须要的<div>标签,直接取用现有的块级标签. 1 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读