Re: [問題] <id>的使用時機?

[monomorium (門外漢)]

※ 引述《ljm71 (ljm71)》之銘言：
: 我被<class> 和 <id> 的使用時機弄混了
: 我查資料得知
: <class>可以用於多個元素 而<id>則是只針對特定單一個樣式
: <class>部分比較容易理解

class 與 id 屬於 HTML 的 global attribute
attribute 請勿加 < 及 > ，以免跟標籤混淆

依據 HTML 5 的標準文件
http://ppt.cc/4B5;

id 的定義為

   The id attribute specifies its element's unique identifier (ID).

這意思是說 id 屬性為元素唯一的識別名稱，下方有常見用途說明

   An element's unique identifier can be used for a variety of purposes,
   most notably as a way to link to specific parts of a document using
   fragment identifiers, as a way to target an element when scripting, and
   as a way to style a specific element from CSS.

中文簡言之，有三方面的常見用途

   1. HTML 文件中特定的連結位置，也就是網址中有 # 的部份
   2. JavaScript 寫程式用
   3. CSS 中指定特定元素的樣式規則


http://ppt.cc/;!Z6

class 的定義為

   The attribute, if specified, must have a value that is a set of
   space-separated tokens representing the various classes that the element
   belongs to.

這意思是說 class 可規劃元素的類型，例如語法高亮度的 SyntaxHighlighter

   <pre name="code" class="brush: html;">
   //範例碼
   </pre>

便是在 class 中指定所要標記高亮度的語言種類，另外可以設定一些功能，如

   <pre name="code" class="brush: html;first-line: 10;toolbar: false;">
   //範例碼
   </pre>

這會將 <pre> 顯示的第一行標為 10 ，同時取消工具列的顯示



: 如果我想讓<h1> <h2> <p>..等元素的顏色相同
: 我可以在css中設定一個顏色樣式叫color
: 然後在<h1> <h2> <p>...取相同的<class=color>名稱
: 但<id>的使用時機就不太了解了 請問什麼情況下才使用<id>呢?
: 如果是針對單一個的樣式 那我在css中設定專門的樣式叫only
: 用<class>只套用在單一個元素上會有問題嗎?
: 懇請為我解惑 謝謝~

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.169.140.20
※ 編輯: monomorium      來自: 118.169.140.20       (01/10 22:41)
→ hit1205:唔呃，這邊提 SyntaxHighlighter 會不會把他給混淆啊 XD
混淆什麼？如果這是遲早要面對的，逃避的了嗎？ XD

推 ljm71:放心~我在HTML5標準文件就暈了
→ ljm71:所以說指定ID 對PHP或JS來說是比較有影響的?
嗯，這方面端視網頁設計者怎麼去設計
JavaScript 可以由 class 處理元素
http://pydoing.blogspot.com/2011/08/javascript-getelementsbyclassname.html
也可以由 id 處理元素
http://pydoing.blogspot.com/2011/08/javascript-getelementbyid.html

同樣的， CSS 可以由 class 設定
http://pydoing.blogspot.com/2011/08/css-classselector.html
也可以由 id 設定
http://pydoing.blogspot.com/2011/08/css-idselector.html

關鍵在於如何將 HTML 、 CSS 、 JavaScript 完美搭配
每個部份充分發揮他的功能（設計問題）

如果是初學 HTML 、 CSS ， JavaScript 還不熟
不妨等到 JavaScript 熟練後再來深究這一類問題
倒是練習的例子多了，自然會知道怎麼設計會比較方便就是了
※ 編輯: monomorium      來自: 118.169.142.190      (01/11 21:01)
推 ljm71:了解 感謝