學無止境的CSS(xHTML+CSS技巧教程資源大全)

時間 2019-11-13

標籤學無止境 css xhtml+css xhtml 技巧教程資源大全欄目 CSS 简体版

原文原文鏈接

本文裏面收集一些有關CSS的技巧、教程、工具和觀點等，其中一些你也許早就運用的爐火純青，也可能有的你聽都沒據說過。無論是新手仍是高手，你們都繼續學習吧。php

一，Web 標準

要玩遊戲，就得先了解規則。要學CSS，就應該先了解一下Web標準。儘管看上去不是必須的(我在學CSS以前，根本不知道也不想知道Web標準是個啥玩意兒)。應該說，你是否學Web標準，跟你是否能學會CSS沒有什麼關係，但跟你能寫出什麼樣的CSS，以及XHTML或其它代碼，跟你能作出什麼質量的網頁有很大的關係。css

其實我本身對Web標準也不甚瞭解，儘管我看過很多關於Web標準的文章和書。(我老是這樣，對學術性的概念名詞永遠都似懂非懂的)，因此每次談到Web標準，我頭裏就會有一堆問號:html

Web標準真的有利於SEO嗎？ Web標準的動機難道就是SEO? 出於SEO動機的Web標準是否會失去一些Web標準真正的本質?
如何纔算符合Web標準? 僅僅是經過W3C的代碼驗證，你就以爲本身符合Web標準了?
Web標準是爲了提高用戶體驗，而一個對用戶友好的網站其代碼應該寫得很是簡潔實用，而一個使用簡潔實用代碼的網站是有利於SEO的。這個邏輯彷佛合情合理，但在實際運用中卻又總有這樣那樣的衝突…
…

咱們應該把Web標準當作一份」道德約束」仍是」法律強制」呢?

我我的比較樂意當作前者，努力靠攏就行了，但不必爲了標準而標準，本身爲難本身。前端

你已經花了50%的時間完成了一個項目的90%，若是餘下的10%又須要你花50%的時間去弄，是否值得? 尤爲是這種狀況發生在: 你的90%已可讓用戶在各個瀏覽器下正可常瀏覽，而那10%僅僅是爲了經過W3C代碼驗證。這時候你或許該考慮下，你千辛萬苦的經過W3C驗證是爲了符合Web標準仍是爲了知足本身小小的虛榮心?
特喜歡跟別人爭論」DIV+CSS」的說法是錯誤的，應該是」XHTML+CSS」，你有沒有作過相似這樣的事兒? 還打內心爲本身科學家般嚴謹的態度而感到自豪。但事實上，叫」DIV+CSS」的人，沒有哪一個傻到整個頁面的元素都使用DIV。這就像當你說」吃飯」時，你也不光是吃白花花的大米。

呃，原本只是想隨便寫點文章引語，閒扯太多了，仍是看看下面這些有關Web標準的東西吧，有助於你瞭解這個東西。java

一些有Web標準的文章

驗證HTML，CSS及RSS源的14個免費工具

這篇譯文裏介紹了14個工具能夠方便的驗證你的CSS以及HTML和RSS源。你別看我上面說了一堆看似反驗證的話，其實我也挺在意這個東西的，我也每次都玩驗證，只是當碰到很難解決無關痛癢的東西時，我不會爲難本身。我只是想告訴你，別對本身太苛求了，別讓本身太累。android

二， CSS佈局和定位

我不是什麼Web前端觀察家，我我的發現的兩個可能並不正確的網頁佈局趨勢是: 兩欄和水平條。css3

說兩欄是趨勢彷佛有點唬爛，兩欄自己就是最基本最經常使用的佈局，但之因此成爲更加流行的網頁設計趨勢得益於Web 2.0的流行，你不多會看到一個Web 2.0網站把本身作成門戶般的雜誌型佈局，你們都力求簡潔。固然，在國內，仍是有很大一部份我的站長和企業喜歡把本身的網站擠得密密麻麻，Magazine的很是厲害。這恐怕也不能說誰前衛誰落後，好的Magazine佈局確實能讓人產生一個感受或錯覺: 這個網站很專業，作的很大，很優。我我的是但願簡潔兩欄真的能成爲趨勢，每次進入門戶型佈局的非門戶級網站時，就感受本身掉進了一堆連接的海洋裏。web

水平條成爲趨勢則源於寬屏瀏覽器的普及，它能讓你的網頁無論在各類寬屏分辨率下顯得協調美觀。好比帕蘭映像的網頁主體是960像素固定寬度，個人電腦分辨率是1440*990像素，若是沒有水平條，總感受網頁太空，儘管留白也是一種設計技巧，但並非這樣的留白。儘管還有另外一種解決方案是自適應寬度，但我我的以爲，對於大多數網站來講，自適應寬度並非一個好方法，它解決了寬度的問題，卻又讓網頁產生了很大其它破壞視覺的問題。面試

仍是讓咱們看一些關於CSS佈局的技巧吧。瀏覽器

15款網格佈局生成器

網格佈局的頁面能給人簡潔明快、井井有條的感受。以前帕蘭映像裏面也介紹過一些網格佈局相關的文章: 探索極簡派設計/Minimalist Design，32個網格佈局的網頁設計欣賞和960網格系統等。若是你也想製做一個網格佈局，能夠看看這些在線生成器。

9個永不過期的CSS 3欄佈局技巧

我喜歡3欄佈局的網頁設計，儘管時下正火的Web2.0彷佛不多采用3欄佈局。但不要緊，咱們是非非非主流。可是3欄佈局相對來講就比較複雜，有些難以控制，Noupe發表一篇文章，收集了9個號稱永不過期的三欄佈局設計技巧(9 Timeless 3 Column Layout Techniques)。

五種方法讓CSS實現垂直居中

使用 CSS 實現垂直居中並不容易。有些方法在一些瀏覽器中無效。本文裏介紹了使對象垂直集中的5種不一樣方法，以及它們各自的優缺點。

CSS佈局口訣

網絡上有朋友把CSS BUG編成了順口溜了！是否有效很差說，但至少是蠻有趣的。

使用CSS建立三列固定佈局結構

講解如何經過設計一個HTML/CSS的基本結構，來創造一個簡單且經常使用的三列式固定頁面佈局。

使用CSS完美實現垂直居中的方法

使用XHTML+CSS來實現元素的垂直居中一直是前端開發中的一個比較複雜且棘手的問題，做爲網頁設計師或前端開發工程師，這個垂直居中問題也是必須掌握的技巧之一，一些互聯網公司面試題中也會出現這類題目。本文分享一個由aka Yuh?發明完美經過CSS實現垂直居中的方法。

漸進加強式佈局探討（上）、（下）

經典得一塌糊塗的表格佈局，在漸進加強面前落花流水——表格佈局要求書寫HTML代碼時，首先考慮佈局，而不是內容。不囉嗦，直接槍斃。

CSS佈局大全

這份列表收集一些比較優秀的CSS佈局，這些佈局都免費供我的和商業使用。固然，你使用以前仍是得看版權說明，也許會發生許可協議變動。 Layout Gala- 這個網站收集了40多個專業的CSS佈局，每一個佈局都經過了CSS和HTML驗證，且不須要Hack，兼容各大主流瀏覽器。

43個PSD轉xHTML+CSS網頁佈局及導航教程

推薦43個實例xHTML+CSS(DIV+CSS)網頁及導航佈局教程，在國外也能夠叫作PSD2XHTML。若是你是覺得網頁設計師，可能會對將本身的效果圖實現成語義化的xHTML頁面感到頭痛，還有一些CSS初學者對於xHTML+CSS處於懵懂狀態，但願你們經過這43 個」DIV+CSS」實例教程學習到語義化xHTML+CSS佈局的精髓，即便你已經成爲高手，我也相信其中有你值得學習的地方。

CSS Position

這篇文章詳細介紹了CSS定位屬性Position的各個值的用法，和一些實例說明，以及相關的絕對定位佈局和清除浮動列等CSS技巧。

詳解css定位與定位應用

定位一直是WEB標準應用中的難點，若是理不清楚定位那麼可能應實現的效果實現不了，實現了的效果可能會走樣。若是理清了定位的原理，那定位會讓網頁實現的更加完美。

跨瀏覽器的CSS固定定位{position:fixed}

使用Position:fixed屬性能夠實現固定元素於窗口某位置，好比帕蘭映像的頭部工具欄和底部工具欄就是使用這種效果, 但IE6並不支持這個屬性，帕蘭映像裏使用的方法是利用IE的條件註釋讓IE6下非固定，顯示不一樣樣式。若是你想實現高度統一，能夠看看這篇文章教你如何實現。

32個網格佈局的網頁設計欣賞

這些設計裏面，有緊湊型的網格佈局設計，一樣也有使用大量空白間距的網格佈局。

三，CSS Sprites(CSS圖片合併技術)

最初知道CSS Sprites的時候，你們都還不知道該如何恰當的翻譯這個技術名詞，有人稱其爲CSS妖精，CSS小鬼等，聽上去是蠻可愛蠻特別的，但會讓人納悶這倒底是個什麼東西。最近發現你們開始把這項CSS技術稱爲圖片合併，感謝仍是蠻貼切的。

CSS Sprites目前已經成爲很是流行的CSS技術應用，你隨便到一個常常逛的著名網站看看，會發現你們都在使用這項技術，好比淘寶、谷歌、豆瓣、土豆等等等等。簡單的說，CSS Sprites主要就是提升網頁載入速度和防止圖片加載延遲，這對於大流量的網站來講是很是重要的。

學習CSS Sprites是件很簡單的事情，比較麻煩的是合併圖片和寫CSS時的定位，更麻煩的後期的維護管理。但無論怎樣，作爲一項有效實用的CSS技術來講，若是你是一個Web前端開發者，你頗有必要掌握這項小技術。

CSS Sprites的一些技巧 | 前端觀察

本文的目的並非講CSS Sprite如何讓一個網站更快，而是說一些使用CSS Sprite的時候的一些最佳實踐。

CSS 前景圖片合併技術 | 芒果

不僅背景圖片能夠合併，前景圖片一樣能夠合併，本文介紹了Google網頁裏是如何對兩個元素進行定位和溢出截斷，來實現前景的圖片合併。

P.S 其實才學習CSS Sprites的時候，就想着前景圖片也必定是能夠合併的，可本身卻又一會兒想不出來什麼方法。看過這篇文章後，才發現是如此的簡單，不由爲本身的智商挫敗了好幾秒

CSS Sprites(CSS圖像拼合技術)教程、工具集合

很是很是全面的一篇文章，詳細介紹了什麼是CSS Sprites, 哪些著名網站使用了CSS Sprites，使用更好的使用CSS Sprites等等。

CSS Sprites + 圓角

我知道如今有成千上萬個關於用CSS處理圓角的教程，但無論怎麼說，我仍然想把這篇文章展現給您。也但願您會發現這篇文章會很是有用。須要重點指出的是，這篇教程完全地應用高級CSS技術，可是，我會盡力使初學者看起來簡單。CSS3 在這裏尚未獲得徹底的應用，因此，知道如今，我會保持W3C驗證的有效。

CSS Sprites, 圖片切割與優化技術

這篇文章不是告訴你什麼是CSS Spries，也不是告訴你如何使用CSS Sprites，而是 —— 爲何要使用CSS Sprites?

四，CSS優化

我我的對CSS優化的見解是: 在語義化的前提下，對代碼進行精簡。若是是大型網站，則又考慮CSS的結構化和模塊化。因此CSS的優化就包含了命名規範、CSS Reset、語義化、結構化和模塊化等等。

至於CSS與SEO一說，倒還真不敢苟同。不過，無論它們是否有關聯，你都應該儘可能去學着寫出一份擁有良好語義並儘可能簡潔高效的CSS樣式表。

8款在線CSS優化工具/組織和壓縮CSS

CSS的優化一般包括兩方面: 格式化CSS和精簡CSS。精簡CSS的辦法是把具備相同屬性的元素合併在一塊兒，但這會下降代碼的可讀性，使代碼的後期維護很麻煩，稍不注意就出錯。格式化CSS通常就是多行模式或單行模式的選擇。本文裏面介紹了8款工具能讓你方便的優化和格式化CSS的在線工具。

CSS代碼精簡工具和技巧

管一般一個CSS文件佔用不了什麼帶寬, 但之於網頁設計, 在不影響整個網頁構架與功能的狀況下, 網頁文件越小越好. 由於更小的網頁文件有利於縮短頁面的載入時間. 更重要的是, 相同的頁面排版和結構, 能用最簡潔的代碼來實現, 也應該是每一個網頁設計師對本身的一種要求.

17款加速效率的CSS工具

做爲一個網站設計/開發人員，你必須不斷尋找方法來減小設計/開發過程當中所花費的時間。這對於提升你的工做效率並最大化你的利潤是很是重要的。下面介紹的按功能分類的CSS工具能夠有效地節省你設計網站的時間。

10個CSS簡寫技巧讓你永遠受用

CSS簡寫就是指將多行的CSS屬性聲明化成一行，又稱爲CSS代碼優化。CSS簡寫的最大好處就是可以顯著減小CSS文件的大小，其實還有不少其他益處。臃腫而雜亂的CSS樣式表會使你遇到問題是難以調試。尤爲是當一個團隊在進行設計的時候，你的臃腫的CSS代碼會使你的團隊其餘成員的工做效率下降。

注重SEO搜索優化的div+css命名規則 | 知更鳥

CSS的命名規則入手會有意想不到的收穫，最基礎的就是最有效的。下面從前端設計的角度整理的DIV+CSS的命名規則，就很好地考慮到了搜索引擎的喜愛，在頁面設計的過程當中，儘可能作你懂，搜索引擎也懂，何樂而不爲呢。

W eb UI 設計(網頁設計)命名規範

Web UI設計命名規範，也就是網站用戶界面設計(俗稱網頁設計)命名規範。這套規範並不是單純的CSS、html或JavaScript命名規範，它涉及了不少使用PhotoShop這類設計工具進行網頁設計過程當中的命名規範。

目前比較全的CSS重設(reset)方法總結

收集了15套CSS重設實例，您能夠在前端開發工做中進行參考和使用，有些是很簡化的CSS Reset，有些則是很是複雜很是全面的CSS Reset，至於使用哪套，全看您的愛好或須要。

CSS代碼命名慣例語義化的方法

CSS代碼的命名慣例一直是你們熱門討論的話題。本文經過分析一個流行三欄佈局中的必要元素，來爲你們講解關於使用語義化方法替代結構化方法來命名CSS類的建議和指導。

模塊化 CSS – 更有效地管理CSS | 幸福收藏夾

關於如何模塊化CSS來實現更有效管理CSS的一些看法。

編寫具備良好結構的CSS文件

這是一篇關於如何編寫具備良好結構的CSS文件的帖子。我已經講過CSS文件的代碼可讀性，但在討論以後，一些更具體的要求被提出（主要是關於一些讀者在管理具備大量佈局元素CSS文件時的困難之處），因此我決定在這些案例中說明我本身的開發流程。

CSS中屬性的書寫順序

我我的是以爲討論CSS屬性的書寫順序有點沒意義，或者說即便有意義，必定要弄一套書寫順序去框住本身，實在又是一件本身爲難本身的事兒。只要保證每個屬性和值都有用，當衝突時，該前的在前，該後的在後，也就行了。

五，CSS、IE和Hacks

想想，咱們花上一大把的時間去研究CSS Hack，研究IE爲什麼如此的叛逆，作項目時可能就由於某個兼容問題給卡死個半天，這些時間若是用來學一門其它技術，可能早已修煉成該技術的專家了，而且是有用的。而精通Hacks並非件值得驕傲的事情，而是全部開發者的無奈和悲哀。

不要緊，我是這麼安慰本身的:當年沒有CSS的時候，多少站長花了比如今10倍甚至百倍的辛苦來建站和維護，當有CSS後，他們默默的選擇過渡，而不是難過的去自殺。那個不是說了嘛，每每都是事情改變人，人改變不了事情，咱們能作的，只能是適應每一個過程。

10個實用但IE不支持的CSS屬性

本文裏面，介紹了10個很實但IE卻不支持的CSS屬性，列出這些屬性並非爲了數落IE(數落也沒用), 而是你瞭解了哪些CSS屬性是IE不支持的，就更有針對性的去編寫CSS和Hack。

修正IE6的bug的10個技巧

咱們知道，IE6可能過不了多久就會消失了，可是咱們還能繼續支持這個瀏覽器而且避免hack和有約束的CSS嗎？這裏是10個使用有效的HTML和CSS代碼來修正IE6主要問題的方法。

IE6 BUG大全

一個系列文章，包含了不少IE6 BUG的詳細介紹，好比IE6中奇數寬度的BUG，PNG Alpha透明，像素BUG的實例，IE6文字溢出BUG等等。

目前很是全面的CSS兼容問題資料聚集

CSS兼容問題一直困擾着CSSer，面對各瀏覽器，每每感受一籌莫展，愁雲滿面。CSS Hack是在標準CSS沒辦法兼容各瀏覽器顯示效果時纔會用上的補救方法，在各瀏覽器廠商解析CSS沒有達成一致前，咱們只能用這樣的方法來完成這樣的任務。本文裏面收集了很是詳細的CSS兼容問題。

IE6方程式

Web 開發人員的使命就是面對不一樣的瀏覽器。自 Web 標準運動的誕生起，有個宿命從 Netscape Navigator 4 開始就被延續着，就是那些過期的瀏覽器拒絕死亡。它們頑強的存在，阻礙了現代標準的發展。而今天，這個宿命降落到了 Internet Explorer 6 身上。

六，你可能不知道的一些CSS技巧

就像本文開頭所說的，CSS像魔方同樣，有數不清的玩法，即便你是高手，永遠都有你不瞭解的地方。有一些CSS技巧並不經常使用，一些CSS技巧徹底是實驗性質的，還有一些徹底甚至是代碼寫錯誤打誤撞搞出來的結果，好比本站以前介紹的CSS實現的標籤雲遠視效果。

CSS content, counter-increment 和 counter-reset詳解

你極可能沒有聽過上面這些CSS術語？事實上，我在這以前也不瞭解，但你可能看到過conten:after和content:before這樣的 CSS代碼，利用這樣一些CSS屬性能夠實現內容的渲染。儘管這些屬性存在瀏覽器兼容性和W3C驗證的問題，但瞭解一下仍是蠻有趣的。

使用CSS選擇器建立個性化連接樣式

zip文檔連接前面顯示顯示一個zip文檔圖標，PDF則顯示PDF圖標，以此類推，聽上去很酷吧。更酷的是，你只須要使用CSS而不是JS就能實現這項功能。這篇教程告訴你如何經過CSS的屬性選擇器來製做個性化連接樣式。

CSS Sticky Footer: 完美的CSS絕對底部

當作一個頁面時，若是頁面內容不多，不足於填充一屏的窗口區域，按普通的佈局，就會出現下面圖片中的樣子(也就是底部內容並無位於窗口的底部，而留下了大量空白。對於追未完美的設計師來講，這是不美觀的。網上有一些解決方案，但會出現當改變窗口高度時，底部和正文重疊的BUG。儘管沒有多少人會有事沒事兒的去改變窗口高度，但設計嘛，追求的就是盡善盡美。

沒有div沒有float沒有clear沒有hack的超強CSS佈局

一個超強的CSS 佈局，沒有div，沒有float, 沒有clear, 沒有hack，沒有和你開玩笑，確實是一個CSS 佈局。出自TJKDesign 之手，你能夠查看DEMO 演示或閱讀該佈局設計師的文章說明。

一個關於透明度繼承的問題

在前端開發的時候，常常用到板塊背景的透明度，但當父層透明時，其中嵌套的子層也會繼承其透明性。而這並非咱們想要的，好比，咱們只是想要某個塊狀元素背景透明，而背景層裏面的文本子層則非透明。

使用CSS爲圖片添加更多趣味的5種方法

爲你平淡乏味的圖片添加更多趣味情調的簡單技巧。使用Photoshop爲每一個圖片添加某種樣式雖然可行，但會是至關乏味且困難的長久工做。本文要介紹的CSS技巧將幫助你從痛苦中解脫出來！

101個CSS技術高級應用教程(上) (下)

一些比較高階的CSS技術應用介紹，全學完這些教程，你的CSS水平將提升不少，廢話

53種網頁設計師必備的高級CSS技巧

都說了必備了，你不看看實在對不住本身千萬的Web開發同胞了…

七, CSS 3

CSS2的出現讓web頓時豐富起來，特別是web2.0時代CSS成爲每一個web頁面都必不可少的元素。可是隨着web技術的發展，CSS2已經不能知足web開發的需求，例如屬性選擇、AJAX出現後與JS的交互等，所以對下一代的CSS需求愈來愈明顯。目前CSS3還處於草稿階段，可是其某些特徵已經讓人興奮不已。

目前主流瀏覽器Firefox、IE7/八、Webkit等都已經部分地支持CSS3。所以提早了解CSS3是十分必要的。下面提供的20個學習資源中，多數是單篇的文章和訪談記錄等，可見這方面的資源仍是比較少的，做爲一個真正的CSS開發者，走在別人的前面提早了解、運用、研究CSS3也是十分必要的。