CSS

 　　一位網友遇到了一個頭疼的問題。需要對經過若干次修改以後的網站進行重整，需要剔除冗餘的代碼，在CSS樣式重整方面，比較頭疼，不僅需要對現有的樣式進行合并與精簡，還需要為網站增加換膚功能。　　不難看出，這是一個令人感覺很煩躁的工作，面對一行一行代碼頭皮發麻。如果我們養成良好的習慣，或許可以讓工作更容易一些。就此問題與經驗，以下的文字或許有很大的參考價值：　　使用連結或者匯入樣式表的方法對於中階或高階的CSS開發人員來說都是再正常不過的事情，但是我在這裡依然會強調一下這種方法的重要性。

 　　1、使用link標記　　2、使用style元素　　3、使用@import指令　　4、使用style屬性的內聯樣式(inline style)　　這是紅色的字　　在實際應用中，使用style屬性的內聯樣式是不推薦使用的，XHTML1.1已經將其標準為不建議使用，原因很簡單這種方式不比font標記強多少，削弱了CSS集中控制整個文檔外觀的優點。　　前3種方式利用了link標記和style標記，在IE(包括IE6、IE7和IE8 beta1)中有如下限制：　　◆

 　　overflow有問題嗎?沒問題。那為什麼說要慎用呢?因為有時會導致一些問題。。。　　關於overflow:auto的，很多人貪他書寫方便，直接用來清除浮動。但是Firefox使用overflow:auto會產生focus，引用網友fireyy的評論　　我想這是FF瀏覽器的一個“可用性和親和力”(usability/accessibility)的設定，當設定了overflow:auto或者

 　　在HTML中, 如果過你沒有指定一個確定的寬度的話, 區塊層級元素本身就會在垂直方向上延展. 想象一個無序清單. 這個清單會自己擴充來適應它所有的清單元素. 如果使用者在他們的瀏覽器中增加了字型大小, 清單會在垂直方向上延展, 來適應變大的內容. 有時候, 感覺僅僅在垂直方向延展是非常局限的, 如果水平方向也能和垂直方向一樣因為使用者增加字型大小而自延展那就更好了.　　概要　　如果你用過Firefox 3 Beta的話, 你會發現它已經會自動這樣處理了. 在Firefox 3

頭脹脹的，看不下東西做不下事，那就寫朵隨筆吧。 圖片垂直置中，原理應該就是，其實我也不知道。 手上兩種方法，異曲同工，但是都相容ie6的。  複製代碼代碼如下:<div class="imgBox"> <img src="T1mN1tXs0jXXb1upjX.jpg" /> <i></i> </div> .imgBox{ width:100%;height:400px; border:1

表格邊框預設是以實線進行顯示的，怎麼才能把它變成虛線呢？其實很簡單只要簡單加一些樣式屬性便可搞定，希望下面的例子對大家有所協助  複製代碼代碼如下:<style> .table5{text-align:center; border:1px solid #cccccc; border-radius :3px; background-color:#FFFFFF; width:650px;} .table5 td{border-bottom:1px dashed

CSS的選擇符有三種。①上下文選擇符；②ID和Class選擇符;③屬性選擇符，而上下文選擇符的最大好處就是可以方便的實現基於位置為HTML元素添加樣式比如我們想位於article和aside標籤中的p標籤，設定不同的樣式 上下文選擇符也叫後代組合式選擇符，是以空格分隔標籤名的，其格式為： 標籤1 標籤2 ｛聲明｝ 這裡的標籤就是HTML元素，標籤2是我們想要選擇的目標，而且只有在標籤1是標籤2的祖先元素時才能選中標籤2.只要是祖先元素即可，不一定非要是父元素

 　　網站製作使用一些獨特的字型效果可以增加網站的整體效果，事實上，對於文字的陰影製作效果，我們完全可以用CSS來實現!　　Text-shadow　　text-shadow可以讓我們實現完美的文字陰影製作效果。基本寫法：　　1、text-shadow:[顏色 x軸 y軸 模糊半徑],[顏色 x軸 y軸 模糊半徑]...　　2、text-shadow:[x軸 y軸 模糊半徑 顏色],[x軸 y軸 模糊半徑

 　　網站製作如何打造導航藍色效果首先是整體布局聲明。利用萬用字元“*”表示在不特別聲明的情況下，預設所有元素的邊距及填充均為零。　　我們設定UL無序列表nav的背景色為#06c，向左浮動，寬度是100%。這兩段代碼定義以後，我們的菜單就能緊靠著瀏覽器視窗了，並且它的寬度是100%。　　菜單的清單項目li定義為display:inline;內聯(行內)將li限制在一行來顯示及設定清單項目預設標記為無;　　我們接著往下看連結地區的代碼意義，link、visited

 　　一.background-position:left top;　　背景圖片的左上方和容器(container)的左上方對齊，超出的部分隱藏。等同於 background-position:0,0;也等同於background-position:0%,0%;　　二.background-position:right

 　　CSS之overflow屬性有四個值：visible (預設), hidden, scroll, 和auto。同樣有兩個overflow的姐妹屬性overflow-y 和overflow-x，它們很少被採用。讓我們分別看一下這幾個值，並討論一寫共同用法和技巧。　　Auto　　overflow的auto值很像scroll，它唯一解決的是在你不需要的時候也會出現捲軸的問題。　　Hidden　　預設值visible的相反的值就是hidden。它會將所有超出盒子的所有內容都給隱藏掉。

  看1個簡單的CSS： DIV#divBox p span.red{color:red;}，按習慣我們對這個CSS 的理解是，瀏覽器先尋找id為divBox的DIV元素，當找到後，再找其下的所有p元素，然後再尋找所有span元素，當發現有span的class為red的時候，就應用該style。多麼簡單易懂的原理，可是這個理解卻是完完全全相反、錯誤的。 匹配原理： 瀏覽器CSS匹配不是從左至右進行尋找，而是從右至左進行尋找。比如之前說的

 　　連結在被點擊時會出現虛線框，即使鬆開了也仍然存在，在有的時候顯得不美觀。既然不好看，那就不要它。怎樣去掉呢?　　方法一　　IE下可使用其私人的html屬性：hideFoucs，在標籤的結構中加入hidefocus="true"屬性。即： <a href="http://www.xker.com/" hidefocus="true"

 　　拿字型來說，各個瀏覽器預設的字型種類、字型大小和字型行高都不一樣，比如IE8的中文版在Windows XP下顯示網頁時預設字型是宋體，而英文版肯定不會如此。所以我們需要統一設定預設的字型樣式，以便實現一致的顯示效果來保證設計的一致性和提高開發效率。　　樣式優先順序　　通常使用者看到的頁面的樣式會受到三層控制:　　第一層是瀏覽器的預設樣式　　第二層是網頁定義樣式　　第三層是使用者自訂樣式　　和CSS一樣，後面的優先順序

 　　有時候，我們需要對網頁某個地區的文字豎排，豎向排列，橫向的當然大家都見慣了，對於豎排，一時間找不到思路了，呵呵，其實和橫排一樣簡單，下面介紹4種方法來實現CSS文字豎排。　　第一種方法：將需要豎排顯示的字元放在span中，在CSS中設定span的display屬性為block，不過不推薦使用這種方法，因為有些麻煩，代碼如下：　　第二種方法A：同樣使用CSS，在需要豎向顯示的地方，強制定義顯示地區的寬度，這樣字元會自動豎向排列：請看具體代碼：　　第二種方法B：同樣是使用CSS，推薦

 　　CSS存在Bug，但怎麼能讓我們記住這些Bug，以便在以後編寫CSS代碼的時候能很好的應對，這不，有心人就編寫了這麼一個CSS

 　　幾天在用CSS寫三列布局的時候突然想到的這樣一個方法，這個想法自己都覺得有些瘋狂，如果其中有什麼不對的地方請各位不吝指教。　　當需要寫一個三列布局的時候，一般情況下我會選擇使用如下的DIV布局方式：　　使用這樣的嵌套方式無疑可以使代碼出錯的機率減少很多，但同時這樣的布局也略顯複雜，對於後期的維護也略顯不便。我們在布局導航時經常會使用到一個方法，那就是使用〈ul〉列表來進行布局，而導航可以形容為多列式的布局，既然如此，那麼我們也就可以使用〈ul〉來進行頁面的多欄版面配置。 

 　　CSS各種對齊代碼，靠左對齊、靠右對齊、中間對齊、底部對齊、左右對齊等，代碼簡單，在此與大家分享：　　01/*CSS代碼：*/　　02/*靠左對齊*/　　03.left {　　04 text-align: left;　　05 border: 1px dotted black;　　06 width: 50%;　　07}　　08/*靠右對齊*/　　09.right {　　10 text-align: right;　　11 border: 1px dotted black;　　12

 　　如果你想成為一位CSS專家的話，光背出一堆選取器是不夠的，還要能夠提高CSS樣式表的可讀性，開發效率以及維護性。這裡，Jina Bolton 將給我們分享一下她關於如何建立性感的CSS樣式表的十個技巧。　　本文主要內容為：CSS代碼編碼規範，教你如何寫出整潔漂亮性感的css代碼，如何清晰的組織你的樣式表檔案。閑言少敘，直接進入正題　　1.

作為一個Web開發人員，掌握必要的前台技術也是很重要的，特別是在遇到一些實際問題的時候。這裡給大家列舉一個例子： 給一個p標籤增加一個類（class），可是執行後該class中的有些屬性並沒有起作用。通過Firebug查看，發現沒有起作用的屬性被覆蓋了。這個時候突然意識到了CSS選取器的優先順序問題，這裡就CSS選取器的優先順序問題做了一些總結。 51CTO推薦閱讀：巧妙地使用CSS選取器 選取器種類 嚴