CSS

譯者註：一篇很好的文章，很久以前在blog上就推薦過，這兩天斷斷續續花了點時間翻譯了一下，推薦讀讀。英文原文在此。 　　文中所有的 layout 這個單詞都未作翻譯，一來本身這個單詞意思就比較多，翻成啥都覺得彆扭，二來它也是專有的屬性，所以就意會一下吧。水平有限，很多地方都是模模糊糊地意譯，發現錯誤歡迎留言指出。　　引用一段來自Dean Edwards的評價：　　I recommend that every CSS designer and DOM scripter read this.

Web標準是越來越突出了，現在建站都講究個符合標準，通過W3C的XHTML和CSS驗證，那麼怎樣才能做出一個符合標準的網站呢，下面是我在BLOG重構和製作OSdev

今天google了一下css置中布局的問題，結果差不多都是引用了同一篇文章。在ie中要置中，只要在元素中定義text-align:center;的屬性。而在firefox中，需要定義一個wrapper包裹器。然後指定margin-left:auto;margin-right:auto;的屬性來使區塊在firefox中置中。其實，我自己都是用margin:auto;的縮寫margin屬性來設定置中。margin縮寫屬性是上、右、下、左的順時針順序來設定四個方位的頁面邊距的。需要注意的是，如果你據此

自從W3C搞了一個Xhtml1.0的標準之後，很多網站都開始用之將網站重構，像yahoo，163，CSDN等，近來一段時間Xhtml+CSS2的熱潮更是一浪高過一浪，所以偶也開始學起了，慢慢的就愛上他們了，現在談一談最近一段時間來的學習體會。 為什麼要學Xhtml+CSS2 首先，規範的代碼能在各種瀏覽器中順利顯示。

內聯級元素(inline-level element)中試圖插入塊級(block-level element)元素。這樣做是不允許的。唯一的能在內嵌元素中插入區塊層級元素的例外是object標籤。那麼什麼是內聯級元素(inline-level element)和塊級(block-level element)元素呢？。 塊元素(block element)一般是其他元素的容器元素，塊元素一般都從新行開始，它可以容納內嵌元素和其他塊元素,常見塊元素是段落標籤''P"。“form"這個塊元素比較特殊，

網頁的色彩搭配往往是網友們感到頭疼的問題，尤其是那些完全沒有美術基礎的網友。到底用什麼色彩搭配好看呢？ 　　一、紅色的色感溫暖，性格剛烈而外向，是一種對人刺激性很強的色。紅色容易引起人的注意，也容易使人興奮、激動、緊張、衝動、還是一種容易造成人視覺疲勞的色。 　　1、在紅色中加入少量的黃，會使其熱力強盛，趨於躁動、不安。 　　2、在紅色中加入少量的藍，會使其熱性減弱，趨於文雅、柔和。 　　3、在紅色中加入少量的黑，會使其性格變的沉穩，趨於厚重、樸實。

我們知道Dreamweaver在表格製作方面做得非常出色，但是在某些時候還是必須結合css才能達到一些特定效果，下面我們先把有關表格邊框的css文法整理出來，然後另外介紹怎樣用css美化表格的邊框。 　　有關表格邊框的css文法 　　具體內容包括：上邊框寬度、右邊框寬度、下邊框寬度、左邊框寬度、邊框寬度、邊框顏色、邊框樣式、上邊框、下邊框、左邊框、右邊框、邊框、寬度、高度、有關標籤等。 　　 1.上邊框寬度 　　文法: border-top-width: 　　允許值: thin |

Fastcompany是simplebits.com站長的全CSS+Div布局作品.網站導航採用的是CSS圖片翻轉.不用多想肯定是利用a:link和a:hover等不同狀態下利用顯示不同的background-images製作而成.我認為作者的獨到之處在於CSS中的a:hover...#nav a:hover {background-position: 0 -20px;}#nav a:active {background-position: 0

最典型實用的上中下，並且中間分三列的布局，這個例子有2個特點： 1. 中間三列效果，可以任意實現單列背景色。2. 整體最窄770px，最寬1024px，也就是說視窗小於770xp就出底部捲軸，如果大於1024px自動螢幕置中。 效果瀏覽：http://www.rexsong.com/blog/attachments/200512/29_154158_minmax_3col.htm分析：最外層的wrapper把所有內容都嵌套在裡邊，整體相對定位。max

一，CSS的管理 偶個人感覺比較重要，而且網上好像也比較少有說這方面的 一來管理好的話，在調用和定義CSS時，會省掉很多時間和麻煩 以下是偶的一些積累首先是為何要外部匯入或連結CSS因為一個網頁有很多頁面，其中就要用到很多CSS（而且其中有一部分CSS是重複的），如果每頁單獨定義的話，以下是管理的方法，在index下的images檔案夾中，CSS檔案夾與之同級，方便調用和管理開始做網站時，因為偶們大多在PS中都得到了平面圖，這時可以初步的明確相同部分CSS 比如底部，本文假設現在有a ,b

對於那些剛接觸CSS布局的人來說，常對如何使用表格（table）感到迷惑。我在很多地方看到人們把“避免用表格來布局”理解成“完全不使用table標籤”。值得注意的是，表格是可以用的而且非常好用——只要用的正確。是的，你得盡量的去避免用表格來布局。但是對於表格型資料，你就應該使用table。我想談談如何使用表格來組織表現表格型資料。在HTML和XHTML裡，表格不僅僅是行（row）和儲存格（cell），還有很多其他元素，特別是如果你想讓資料更加容易理解。首先來點背景知識，“避免用表格來布局”這句話

看到問此問題的很多，所以花點時間整理下，歡迎大家提意見，做補充修改，謝謝！問題如下: [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]解決方案:一、改變HTML的排列 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]解決方案:二 、display:block [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]解決方案:三、負值 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]解決方案:四、字型大小

修改您的樣式表，找下邊這段（一般都在開頭） a { color:#3399FF; font-weight:Normal; /*字型效果 普通 可以改成bold粗體*/ text-decoration:none; /*底線效果：無底線*/ } a:hover { color:#4499EE; text-decoration:none; /*底線效果：無底線*/ border-bottom: 1px #0099CC dotted /*加一個只有下邊的框 邊框為虛線*/ } 　　

表格效果table [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]表格效果div+css 1 2 3 4 5 6 7 8 9 10

本翻譯並未得到作者或網站授權。一切權利都歸原作者及原網站所有。如果你得到原作者或原發表網站的授權，可以自由使用本翻譯。1.CSS字型屬性簡寫規則一般用CSS設定字型屬性是這樣做的：font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif;但也可以把它們全部寫到一行上去：font: bold italic

隨著網頁標準化觀念深入人心，越來越多的網站採用了CSS架構。CSS架構的網頁不但符合W3C標準，並且還非常美觀。標準化網頁從漂亮的CSS菜單開始。眾所周知，CSS菜單都是一段代碼、一段代碼的編寫出來，產生漂亮菜單，今天給大家介紹一款小的軟體：CSS Tab Designer！ 　 CSS Tab Designer是一款使用CSS來設計導覽功能表的可視化軟體，軟體內建60多種不同風格的樣式，只需修改現成樣式模版，就能快速產生CSS菜單。特別值 得一提的是，軟體產生的XHTML代碼嚴格遵循網頁標準，

有三個版本的 XHTML 1.0，它們分別對應三個版本的 HTML 4.01： • XHTML 1.0 Transitional • XHTML 1.0 Strict • XHTML 1.0 Frameset XHTML 1.0 Transitional 包含 HTML 4.01 Transitional 中的全部標記和屬性。引入 XHTML 1.0 Transitional 標準的目的是，使現有 HTML 設計人員和開發人員無需經曆太多的痛苦就能遷移到

配合約事文章的技巧，用自己的部落格來測試一下。首先插入一張測試圖片：終極技巧之圖片篇：為圖片添加濾鏡效果純文字部落格看上去會顯得很枯燥，適當的配圖能夠讓頁面更美觀，也能更好地表達自己的思想。那麼如何為圖片添加一些Photoshop裡面才有的特殊濾鏡效果呢？一張張修改圖片嗎？太煩瑣了，更何況很多時候我們是引用網路上的圖片地址，並沒有對原圖片的修改許可權。這裡有一個簡單的方法，可以修改圖片在部落格上的顯示效果。一般的部落格編輯頁面都有“插入圖片”功能，此外還有“原始碼編輯”模式，切換到“原始碼編輯”

　　原文連結：CSS Design: Custom Underlines 　　由 A List Apart 雜誌及作者授權翻譯。（Translated with the permission of A List Apart Magazine and the author[s].）　　說明：文章中“[補充]”內容系譯者所補充添加（來自 CSS 2.0

我們知道在樣式表定義一個樣式的時候，可以定義id也可以定義class，例如：ID方法：#test{color:#333333}，在頁面中調用內容