2.11 类和ID属性


2.11 类和ID属性





 
HTML



<h1>类和ID属性</h1>
<div id="hcalendar1" class="vevent">
<h3 class="summary">日历事件总结</h3>


<p class="description">日历事件描述</p>

<p>从
<span class="dtstart" title="2007-05-01T08:30:00-05:00"
>2007年5月1日 8:30am EST</span> 到
<span class="dtend" title="2007-05-01T09:30:00-05:00"
>9:30am EST</span></p>



<p>位置:<span class="location">会议室</span></p>
<p>预订:<span class="uid">globally-unique-id.host.com</span>
on <span class="dtstamp" title="20070101T231000Z"
>2007年1月1日 6:00pm</span></p>
</div>

<p>查看<a href="http://microformats.org/wiki/hcalendar">microformats.org</a>以获得更多关于microformats的信息。</p>
CSS
*.vevent p         { margin:0 0 5px 0; font-size:0.9em; }
*.vevent h3        { margin:0 0 5px 0; }
*.vevent *.location { font-style:italic; }
*.vevent *.uid      { font-family:monospace; }
*.vevent *.dtstart,
*.vevent *.dtend,
*.vevent *.dtstamp   { color:green; }



#hcalendar1 { margin:5px; border:1px solid black; padding:10px; }


类和ID属性























问题


需要在具有相同类的元素中识别出某些元素。你想为一类元素赋予额外的语义和关联。你想为一类元素以相同的方式赋予样式。你想在文档中唯一识别出某些特别的元素,这样你就能只为它们赋予样式,并通过JavaScript直接读取它们。


解决方案


HTML提供classid属性用于实现以上那些想法。你可以为任何元素赋予classid


ID和类名中不能包含空格,它必须以字母开头,其中可含有字符、数字、下划线(_)、连字符(-)。因为当应用XHTML时,CSS选择符是区分大小写的,所以通常我们都把类和ID的名字全部小写。



class为元素赋了一个用户自定义的语义内涵。class是扩展HTML元素含义的主要方式。具有相同类名的元素是相互关联的,可以被当作一个群组来操作。可以通过CSS选择符为一类元素添加样式。可以使用一种文档处理器(比如XSLT)对一类元素进行操作。


可以为一个元素赋予多个类,只需在元素的class属性中放置多个类名,每个类名用空格分隔。


类必须拥有充满语义的名字,例如copyright(版权)、date(日期)、price(价格)、back-to-top(返回到顶部)、example(例子)、figure(数字)、listing(列表)、illustration(插图)、note(注释)、result(结果)、tip(提示)、warning(警告)等。


ID


ID在文档中应当是唯一的。如果不是,CSSID选择符会选择所有具有相同ID的元素——就像class属性一样。


可以用唯一的ID作为CSS选择符来对某个元素添加样式。可以把它当作一个锚,这样通过其他的链接就能够找到它。可以用JavaScript或文档处理器通过它来读取和操作某个具体的元素。


ID的名字也应当充满语义,例如skip-to-main-content(跳到主内容区)、page(页面)、preheader(头前)、header(页头)、title(标题)、search(搜索)、postheader(头后)、body(主体区)、nav(导航栏)、site-map(站点地图)、links(链接)、main(主内容区)、section1(第一部分)、section2(第二部分)、news(新闻)、about-us(关于我们)、services(服务)、products(产品)等。


模式


HTML


<ELEMENT id="id"  class="class1 class2 etc" ></ELEMENT>


CSS


#id     { STYLES }


*.class { STYLES }


提示


因为<div><span>元素没有语义内涵,所以可以为它们赋予任何预定义内涵的类而不会引起冲突。能够为<div>赋予类,从而创建自定义语义内涵的文档结构。可以为<span>添加类从而为文本赋予新的内涵。虽然MicroFormats(微格)正在朝一个标准的语义命名规则努力(通过把HTML结构和类名映射为通用的标准,例hCardhCalendar),但是目前还没有一种用预定义好的精确内涵为类命名的方法


相关


类型、类以及ID选择符和子类选择符(第3章)。



标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2