﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-Sun River-随笔分类-CSS</title><link>http://www.blogjava.net/SunRiver/category/44307.html</link><description>Topics about Java SE, Servlet/JSP, JDBC, MultiThread, UML, Design Pattern, CSS, JavaScript, Maven, JBoss, Tomcat, ...</description><language>zh-cn</language><lastBuildDate>Tue, 16 Mar 2010 02:30:15 GMT</lastBuildDate><pubDate>Tue, 16 Mar 2010 02:30:15 GMT</pubDate><ttl>60</ttl><item><title>Difference between class and id in CSS</title><link>http://www.blogjava.net/SunRiver/archive/2010/03/16/315552.html</link><dc:creator>Sun River</dc:creator><author>Sun River</author><pubDate>Tue, 16 Mar 2010 02:14:00 GMT</pubDate><guid>http://www.blogjava.net/SunRiver/archive/2010/03/16/315552.html</guid><description><![CDATA[&nbsp;
<p><span style="font-family: Verdana; color: blue; font-size: 9pt">---The key thing to know is that IDs identify a specific element and therefore must be unique on the page &#8211; you can only use a specific ID once per document. Many browsers do not enforce this rule but it is a basic rule of <acronym><span style="font-family: Verdana">HTML</span></acronym>/<acronym><span style="font-family: Verdana">XHTML</span></acronym> and should be observed. Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.</span></p>
<p><span style="font-family: Verdana; color: blue; font-size: 9pt">&nbsp;</span><span style="font-family: Arial; color: black; font-size: 9.5pt">Notice that an ID's CSS is an HTML element, followed by a "#", and finally ID's name. The end result looks something like "element#idname". Also, be sure to absorb the fact that when an ID is used in HTML, we must use "id=name" instead of "class=name" to reference it!</span></p>
<div style="border-bottom: #0a4369 1pt dotted; border-left: medium none; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; border-top: medium none; border-right: medium none; padding-top: 0cm">
<h1><span style="font-family: Arial; font-size: 17pt">Why Did They Choose Those Names??</span></h1>
</div>
<p style="text-indent: -18pt; margin-left: 36pt; tab-stops: list 36.0pt" class="MsoNormal"><span style="font-family: Symbol; color: black; font-size: 10pt"><span style="font: 7pt 'Times New Roman'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span dir="ltr"><span style="font-family: Arial; color: black; font-size: 9.5pt">ID = A person's Identification (ID) is <strong>unique</strong> to one person.</span></span></p>
<p style="text-indent: -18pt; margin-left: 36pt; tab-stops: list 36.0pt" class="MsoNormal"><span style="font-family: Symbol; color: black; font-size: 10pt"><span style="font: 7pt 'Times New Roman'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span dir="ltr"><span style="font-family: Arial; color: black; font-size: 9.5pt">Class = There are <strong>many</strong> people in a class.</span></span></p>
<div style="border-bottom: #0a4369 1pt dotted; border-left: medium none; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; border-top: medium none; border-right: medium none; padding-top: 0cm">
<h1><span style="font-family: Arial; font-size: 17pt">ID for Layout and Uniqueness</span></h1>
</div>
<p><span style="font-family: Arial; color: black; font-size: 9.5pt">Standards specify that any given ID name can only be referenced once within a page or document. From our experience, IDs are most commonly used correctly in CSS layouts. This makes sense because there are usually only one menu per page, one banner, and usually only one content pane.</span></p>
<p><span style="font-family: Arial; color: black; font-size: 9.5pt">In Tizag.com <a href="http://www.tizag.com/cssT/liveExampleCss/"><span style="font-size: 8.5pt">CSS Layout Examples</span></a> we have used IDs for the unique items mentioned above. <a href="http://www.tizag.com/cssT/liveExampleCss/style1Css.php"><span style="font-size: 8.5pt">View the CSS Code</span></a> for our first layout example. Below are the unique IDs in our code.</span></p>
<p style="text-indent: -18pt; margin-left: 36pt; tab-stops: list 36.0pt" class="MsoNormal"><span style="font-family: Symbol; color: black; font-size: 10pt"><img alt="*" src="PicExportError" width="10" height="10" /><span style="font: 7pt 'Times New Roman'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span dir="ltr"><span style="font-family: Arial; color: black; font-size: 9.5pt">Menu - div#menuPane</span></span></p>
<p style="text-indent: -18pt; margin-left: 36pt; tab-stops: list 36.0pt" class="MsoNormal"><span style="font-family: Symbol; color: black; font-size: 10pt"><img alt="*" src="PicExportError" width="10" height="10" /><span style="font: 7pt 'Times New Roman'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span dir="ltr"><span style="font-family: Arial; color: black; font-size: 9.5pt">Content - div#content</span></span></p>
<div style="border-bottom: #0a4369 1pt dotted; border-left: medium none; padding-bottom: 0cm; padding-left: 0cm; padding-right: 0cm; border-top: medium none; border-right: medium none; padding-top: 0cm">
<h1><span style="font-family: Arial; font-size: 17pt">Answer: Classes vs IDs</span></h1>
</div>
<p><span style="font-family: Arial; color: black; font-size: 9.5pt">Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.</span></p>
<img src ="http://www.blogjava.net/SunRiver/aggbug/315552.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/SunRiver/" target="_blank">Sun River</a> 2010-03-16 10:14 <a href="http://www.blogjava.net/SunRiver/archive/2010/03/16/315552.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>