2012-03-23 69 views
4

我試過在這個上搜索一個主題,但是我沒有找到任何東西,所以我想我會繼續。什麼時候直接在HTML而不是CSS中設置樣式

我的問題是什麼時候它是正確的,只要把你的風格直接放在你的HTML文件中,而不是使用.css文件。

我的意思是,當你有很多事情需要重複或在多個頁面上使用時,使用.css文件非常有用。 但在我的情況,我有一個頁面,我正在設計一些東西,我很確定只會在那個頁面上。這是一個div的寬度,高度和小東西。

要告訴你我的意思是,這裏的代碼:

<div style="margin:0px auto; width:600px;"> 
    <div style="float:left"> 
     <p class="InputFieldsText">Brugernavn</p> 
     <div class="InputFields"><input name="Text1" type="text" class="Medium" placeholder="Din e-mail adresse" /></div> 
     <p class="InputFieldsUnderText"><a href="#">Glemt dit brugernavn?</a></p> 

     <p class="InputFieldsText">Password</p> 
     <div class="InputFields"><input name="Text1" type="password" class="Medium" /></div> 
     <p class="InputFieldsUnderText"><a href="#">Glemt dit password?</a></p> 

     <input onclick="window.location='user_page.html'" class="LargeIndent" name="Submit1" type="button" value="Log ind" /> 
    </div> 
    <div style="float:left; width:172px; text-align:center">    
     <img alt="" height="128" src="images/lock.png" width="128"> 
    </div> 
</div> 

所以,你可以看到,在一些div我直接稱呼它,而不是來了一個名字對於我的課,換上那裏。 我知道這樣做沒有錯,因爲如果我在我的.css文件中使用它並調用一個類,它會出現相同的結果,但有沒有「指南」或其他內容,這是不推薦的。等等。

希望你能理解我的問題。真的沒有那麼大不了的,我只是一直在想:)

問候

+0

你看過google.com的源代碼嗎? – hooleyhoop 2012-03-23 00:41:33

回答

5

答案很簡單,IMO:從來沒有。 :)

您應該始終使用樣式表,因爲它允許您快速方便地更改網站的整個外觀和佈局。如果您直接在HTML中嵌入樣式信息,如果需要更改,您必須更加努力;使用樣式表,只需在單個位置更改CSS文件,並且在使用樣式表的任何地方,更改都將變爲全局。

+1

+1,我想強調的是,根據我的經驗,這個「一頁」往往不僅僅只有一頁。最好從右腳開始,因爲你真的沒有在開始時節省很多時間。 – Craig 2012-03-23 00:42:01

+1

抱歉,編輯和添加內容的兩個人,但你把東西放在那裏,我沒有說,並在我開始得到低價提示的方式措辭他們。由於這兩個編輯都沒有反映出我的原始答案,所以我將這些變化重新放回了我實際編寫的內容。如果你想改進它,請隨時在你自己的答案中這樣做(所以你失去了你自己的代表,而不是我的,這樣做)。謝謝。 – 2012-03-23 02:59:48

1

最好不要將演示文稿與內容混合使用。爲了簡化您的CSS,使用更智能的selectors以及您知道總是隻有一個元素的元素的ID沒有任何問題。你不必爲每一件小事定義類。

在我看來,內聯樣式使標記變得如此混亂,特別是對於導致換行的大樣式聲明。

在某些情況下,HTML頁面(而不是外部文件)中的一小段樣式可能是可以接受的,因爲它減少了發送到服務器的請求數量。通過讀取單獨的樣式表文件並將樣式直接注入頁面,可以使用服務器端處理完成此操作。採用這種方法,頁面大小和HTTP請求數量之間有一個折衷。

0
  1. 不要把您的樣式信息的內聯
  2. 當與分層模板系統工作時,我有時會覺得方便放置樣式定義在該模板中,其最終被部分頁面樣式表。如果這些需要重用,可以將它們遷移到單獨的樣式表。
0

嗯,首先要說的是第一件事。造型需要一些位次的:

  1. 聯樣式
  2. CSS在HEAD
  3. 導入CSS文件

也就是說,如果一個特定的元件在定義的CSS屬性的一些文件,那麼你可以通過使用內聯CSS(<div style='...'></div>)來明確地覆蓋它們。

除此之外,我想這僅僅是一個味道的問題,以及你希望代碼最終如何「混亂」(vs'compartmentalized')。 不要忘了,CSS的主要目的是分開:LOOK從STRUCTURE


總體戰略是:

  • 使用CSS文件,爲更好地組織較大的站點,可以使用重新應用於各種文件(便攜)
  • 使用CSS中HEAD在一些「相當」大,但不是太大的CSS代碼塊,即頁面特定的
  • 使用內嵌CSS爲本地修改,只在(非常小的頁面,或對現有規範,我想改變安裝位置)......

結論:

無論如何,你的主要問題是關於內聯CSS,這是我的2美分:內聯CSS使得代碼很容易讀取(至少對於我的口味而言),所以爲什麼它沒有必要?

1

在頁面的開發過程中,我將所有東西都打包到同一個文件中。

只是懶惰 - 在頭部有樣式表。

然後在生產中將CSS從CSS中分離出來。 實際上,我在開發過程中會分享共同特徵 - 需要剪切和粘貼作業。

0

您應該始終使用外部.css文件,因爲外部樣式表使您能夠通過編輯單個文件來更改網站中所有頁面的外觀和佈局!

如果您將在HTML頁面中使用內聯css而不是外部css,這將花費很多時間來編輯更改,因此應該使用外部css文件以獲得更流暢的過程。