CSS代碼結構div和span的應用方法

本篇內容主要講解“CSS代碼結構div和span的應用方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS代碼結構div和span的應用方法”吧!

你對CSS代碼結構div和span的使用是否熟悉，我們在使用CSS規劃網頁結構時通常會用到div，div是有語意的，它不象h2或ul等那些標簽的語意那么明確而已，div的語意是division，英文的意思是區分、分開、部分。即用它來分割文檔的不當部分。

CSS代碼結構div和span初探

我們在規劃網頁的結構時通常會用到div。我們正常都認為div是一個沒有語意的標簽，它的作用是用來分割文檔的不同區域。但我們也發現，有些人認為div是有語意的。只不過它不象h2或ul等那些標簽的語意那么明確而已，div的語意是division，英文的意思是區分、分開、部分。即用它來分割文檔的不當部分。我們在正常編碼中，會給div分配一個id名稱，這樣也使得文檔具有了結構的意義，例如：id="main"、id="sider"等等。關于id的知識我們在前面的文章《如何為id及class類命名？》http://www.52css.com/article.asp?id=403中已經討論過了，希望大家都能掌握相關知識。

◆我們試圖將文檔的標注標簽盡量的減化。只有在不得已，實在沒有可用的HTML元素進行分割的時候我們再使用div的方式。這是一種簡潔的方式，但有些人也認為這樣使得文檔的結構化出現障礙，主張需要div進行分割。我們看下面的例子：

ExampleSourceCode

這是一：

<dividdivid="nav"> <ul> <li><ahrefahref="http://www.52css.com/">Div+CSS教程</a></li> <li><ahrefahref="http://www.52css.com/">CSS布局實例</a></li> .....  </ul> </div>

這是二：

<ulidulid="nav"> <li><ahrefahref="http://www.52css.com/">Div+CSS教程</a></li> <li><ahrefahref="http://www.52css.com/">CSS布局實例</a></li> .....  </ul>

有人主張用***種方法，結構明晰。添加了外圍的div標簽，釋意這一段代碼是nav區域。
也有人主張第二種方法，去掉不必要的div標簽，簡化代碼，而且能達到同樣的效果。

這是一種爭論，事實上類似于這樣的爭論還有很多。我們不必太較真了。因為他們都有自己的道理。我們只需要理解他們的主張是什么，編碼的思想是什么，就學習到知識了。52CSS.com的MrJin更傾向于第二種。因為他已經滿足需要了。這不一定是正確的。這只是解決問題的方法之一。

除了上面所說的兩種情況之外，還有一種情況與上面的相反，有些人對div的依賴太強烈了，以至于編碼思想是用div構建與傳統table類似的結構。這樣是絕不可取的，這就與Web標準的思想背道而馳了，使代碼煩雜不便于理解，缺少語義，結構不明朗。

◆div是block塊元素，可以規劃文檔的不同功能區域，當然，你可以運用display:inline，使它變成內聯形式。但我們更常用的還是span。這是對內聯無素進行標識的標簽?？聪旅娴拇a。

ExampleSourceCode

<dividdivid="about52css"> <h2>Div+CSS教程www.52css.com</h2> <p>52css.com是一個非常<span>專業的CSS站點</span></p> <p>52css.com的<span>Div+CSS</span>教程欄目有豐富的教程</p> </div>

這段代碼中的“專業的CSS站點”“Div+CSS”都被嵌套在了span元素之內。我們可以對某一些地方應用這些標記以應用不同的樣式。我們可以將上面的兩個span內嵌的內容顯示為不同于普通段落的文字色彩。

◆總結：

總之，我們應該盡量的簡化我們的代碼，扔掉那些不必要的標簽標記，不過你也不要太過了保守，在實際操作中有這樣的精簡思維就可以了?，F實的情況讓我們不得不添加一些標記來讓CSS準確的找到目標。因為CSS的功能還不夠強大，相信未來一定會有更好的方法解決問題。

到此，相信大家對“CSS代碼結構div和span的應用方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！