精通CSS

用戶評論 (總計(jì)25條)

•   　　Andy Budd國際頂尖的網(wǎng)頁設(shè)計(jì)師，著名的Web標(biāo)準(zhǔn)倡導(dǎo)者。他是網(wǎng)頁設(shè)計(jì)咨詢公司Clearleft（www.clearleft.com)的創(chuàng)意總監(jiān),曾經(jīng)組織了英國首屆Web2.0會議。他在Web設(shè)計(jì)方面著述甚豐，除本書外，他還曾經(jīng)撰寫了一本Blog設(shè)計(jì)方面的圖書。
  　　
  　　
•   　　讀書的筆記是用Markdown寫的，而這里并不支持Markdown，故只摘錄一些補(bǔ)充內(nèi)容。同樣是前端小白，希望能對讀這篇筆記的你有所幫助 : )
  　　
  　　==========================================================
  　　
  　　* DOCTYPE：瀏覽器根據(jù)DOCTYPE選擇使用的DTD類型，參見[Activating Browser Modes with Doctype](https://hsivonen.fi/doctype/)(沒看)。
  　　* 科學(xué)的clear fix：[How To Clear Floats Without Structural Markup](http://www.positioniseverything.net/easyclearing.html)。這篇文章有點(diǎn)老了，不過還是能挺好的工作的。
  　　
  　　```
  　　.clearfix:after{
  　　 content: ".";
  　　 display: block;
  　　 height: 0;
  　　 clear: both;
  　　 visibility: hidden
  　　}
  　　.clearfix{
  　　 zoom: 1 /* hack for IE/Win */
  　　}
  　　```
  　　* 查clear的時(shí)候，發(fā)現(xiàn)了這么個(gè)網(wǎng)站：[Learn CSS Layout](http://learnlayout.com/)(沒看，Jan 30, 2013 updated，看完了，就是一些基本布局方式，對于初學(xué)者還不錯(cuò)~flex那部分沒深入進(jìn)去，現(xiàn)在還不太懂)
  　　* [Can I use...](http://caniuse.com)可以用來查詢一個(gè)CSS屬性是不是應(yīng)該被使用，被那些瀏覽器所支持。
  　　* 再查clear fix，在stack overflow的[這篇](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best)問答介紹了當(dāng)前比較通用的幾種clearfix，[A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)(2011)里面介紹了另一個(gè)方法，也挺好記的。(UPD: 讀了Bootstrap 3.1.0，bs用的就是這種方法，F(xiàn)eb 5, 2014)
  　　
  　　 ```
  　　 /* For modern browsers */
  　　 .clearfix:before, .clearfix:after {
  　　 content: "";
  　　 display: table;
  　　 }
  　　 .clearfix:after {
  　　 clear: both;
  　　 }
  　　 /* For IE 6/7 (trigger hasLayout) */
  　　 .clearfix {
  　　 zoom: 1;
  　　 }
  　　 ```
  　　* Media queries: [mediaqueri.es](http://mediaqueri.es/)里面可以看到一些使用media query的網(wǎng)站，可以使網(wǎng)頁符合各類屏幕，COOL！具體CSS media queries的使用，可以看[MDN的這篇文章](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries?redirectlocale=en-US&redirectslug=CSS%2FMedia_queries)(還沒看！**重要**，寫Mobile應(yīng)用的話必看啊。)
  　　* Viewport: [An introduction to meta viewport and @viewport](http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/)(又一坑，還沒看)
  　　* CSS frameworks:
  　　 * **bootstrap**(well done)
  　　 * **foundation**(advanced, 有很多關(guān)注)
  　　 * Skeleton
  　　 * lesscss(less.js被用來寫css)
  　　 * GroundworkCSS(also a javascript framework, rotation is amazing!)
  　　 * **gumby**(looks great)
  　　 * Compass(github, 和rails整合比較緊密)
  　　 * susy(a [Compass](http://compass-style.org/) plugin, under development)
  　　 * Kube(personal dev, but looks simple and clean)
  　　 * BlueTrip(has github repo, no documentation <-- 沒細(xì)看，不了解)
  　　 * elastics（last updated: March 30, 2012）
  　　 * blueprint(last updated: May 14, 2011)
  　　 * unsemantic(grid system, has github repo)
  　　
  　　 也可以看這里：[ListOfMinimalistFrameworks](https://github.com/neiesc/ListOfMinimalistFrameworks)，這里列出了一些lightweight的框架。
  　　* 擁有布局(have layout)
  　　 * IE眾多bug的根源
  　　 * IE的顯示引擎使用一個(gè)稱為layout的內(nèi)部概念，用于提高性能（減少開銷）
  　　 * 可以通過javascript的`hasLayout()`來查看一個(gè)元素是否有布局
  　　 * 通過設(shè)置一些CSS屬性，可以使元素?fù)碛胁季?br /> 　　 * 更具體可以查查`The Internet Explorer hasLayout Property`之類的獲取更多信息，或者是[On Having Layout](http://satzansatz.de/cssd/onhavinglayout.html)這篇文章。
  　　
•   　　第二版涉及到CSS3的部分,很值得學(xué)習(xí).對自己的CSS是一個(gè)整合和提高.還有兩點(diǎn)問題:
  　　1.平?？促Y料.nav要優(yōu)于li.nav,對于瀏覽器對選擇器的選擇來說.但作者好多實(shí)例代碼,都會加標(biāo)簽名,為了什么?
  　　
  　　2.平常看資料,@import 導(dǎo)入CSS也不是一個(gè)好方法,但實(shí)例代碼用的是這種方式.
  　　書中還有好多打印錯(cuò)誤,沒有找到問題反饋處,先mark吧
•   　　本書將最有用的CSS技術(shù)匯總在一起，在介紹基本的CSS概念和最佳實(shí)踐之后，討論了核心的CSS技術(shù)，例如圖像、鏈接、列表操縱、表單設(shè)計(jì)、數(shù)據(jù)表格設(shè)計(jì)以及純CSS布局。每一章內(nèi)容由淺入深，直到建立比較復(fù)雜的示例。之后本書用兩章討論招數(shù)、過濾器、bug和bug修復(fù)，最后由Simon Collison和Cameron Moll兩位杰出的CSS設(shè)計(jì)人員，將書中討論的許多技術(shù)組合起來，給出了兩個(gè)實(shí)例研究。本書還集中介紹了現(xiàn)實(shí)的瀏覽器問題，是彌補(bǔ)CSS知識欠缺不可或缺的參考書?！　”緯m合具有(X)HTML和CSS基本知識的任何網(wǎng)頁設(shè)計(jì)人員閱讀。
•   　　只是略讀，細(xì)節(jié)了解的不多，但是能夠掌握全局就行 - 感覺css最主要的就是兩點(diǎn)，一是selector，以及各種style是如何cascade的；二就是布局，box model+position+floating。這本書還有對background, links, list, form, table這些比較重要元素的的詳細(xì)介紹，還帶有兩個(gè)case study，比較實(shí)用。沒有細(xì)讀，大概了解一下，以后用到時(shí)翻閱參考即可。
  　　
  　　學(xué)web編程其實(shí)http://www.w3schools.com/幾乎所有的內(nèi)容都有，的確也能幫助你了解概念，以及之后作為reference翻閱，但說到真正的學(xué)習(xí)，了解如何在實(shí)際中的靈活應(yīng)用，還是無法勝任的。所以看了javascript（http://www.w3schools.com/js/default.asp）， 我需要再讀一下《javascript精粹》，而看了css（http://www.w3schools.com/css/default.asp）， 再讀點(diǎn)《精通CSS》， 的確有那么點(diǎn)“通”的感覺。
  　　
  　　
  　　
•   　　第一版已經(jīng)是經(jīng)典了，距離現(xiàn)在有好幾年，上個(gè)星期去圖書館發(fā)現(xiàn)已經(jīng)進(jìn)了第二版，封面換新了，里面的內(nèi)容也更新了很多。有做修改，有添加了很多css3的內(nèi)容。一些比較老久的方法、思想已經(jīng)去除了?？偟膩碚f，前端開發(fā)必讀書目之一。
•   　　說起內(nèi)容，絕對是沒得說。
  　　說起這本書的翻譯，看得我想自殺，太痛苦了。什么翻譯嘛，有時(shí)候，前后不通，強(qiáng)烈懷疑翻譯的人是通過google翻譯，然后再調(diào)整下語序，稍作修改而來的，也懷疑他是不懂css，還是翻譯完后沒有自己好好地看過一遍。
  　　人民群眾賺錢不容易，不能那這種翻譯來忽悠人民大眾的嘛，推薦看英文，至少你能活下去。
  　　翻譯讓我想罵人，心里罵完后還是往后看，因?yàn)槭琴I的書。
  　　如果是圖書館借的，我就不保證能不能看完了。
•   　　很不錯(cuò)的一本書。只是有本歷史久遠(yuǎn)了，里面有些問題還在談IE5?，F(xiàn)在已經(jīng)出了第二版，有想買的朋友可以買第二版，里面增加了CSS3的東西貌似。
•   　　引入06的年第一版之后的技術(shù),也因時(shí)代驗(yàn)證修正了一些以前的推薦,比如@import會導(dǎo)致下載渲染延遲,link鏈入更好;盡量減少CSS文件個(gè)數(shù)等等;
  　　但看到更多的還是對CSS3等新技術(shù)的展望和討論.
  　　
  　　技術(shù)型的書的確沒什么特別的評論需求不是嗎....自己看完覺得"啊,好值!"就足夠了.
  　　我也很喜歡Andy敘述的方式,讓一本全是代碼的書顯得委婉溫和又不失詳盡.
  　　(但是比起這次的兩個(gè)example,還是覺得第一版的那兩個(gè)更可愛些,哦,那曾經(jīng)小巧可人的頁面喲~
  　　とにかく,上面那是因個(gè)人喜好的玩笑啦)
  　　
  　　順便說一句,對于第一版?zhèn)涫茉嵅〉姆g,顯然這次的中文翻譯很不錯(cuò),不會有什么違和感,雖然還是同一個(gè)譯者沒記錯(cuò)。寬容別人少生閑氣哦也。嗯,書皮終于也用墨綠色的了,這多有利視力不是嗎。
•   　　作為一名css小白，剛買到這本書時(shí)，就有很強(qiáng)的讀書欲望，一口氣讀了一章后發(fā)現(xiàn)，這本書的讀者要求有一定的css基礎(chǔ)，完全不懂css是不行的，如果你沒有css基礎(chǔ)，建議你download一本css手冊，這樣會幫助你學(xué)習(xí)這本書，看很多人在推薦css新手學(xué)習(xí)《別具光芒》，剛看了一下，確實(shí)要詳細(xì)一些。這本書對于css進(jìn)階還是很有幫助的，對布局將的要多一些。
•   　　是朋友推薦的，看評價(jià)也不錯(cuò)，內(nèi)容寫的很實(shí)用，只是我沒有什么基礎(chǔ)，讀起來有點(diǎn)吃力，缺點(diǎn)是沒有圖文并貌，我讀過其他的，比這個(gè)直觀，優(yōu)點(diǎn)就是沒有廢話，都是常見問題解析，專家級的，值得看
•   　　我是一個(gè)計(jì)算機(jī)專業(yè)的學(xué)生，但是一直都接觸的是后臺的編碼，始終沒有了解過HTML/CSS/JavaScript。因此我連表單使用<form>標(biāo)簽也不知道，CSS也只曉得是用來排版布局的。
  　　看了有人推薦這本書作為CSS的入門學(xué)習(xí)（同時(shí)還有另一本作為JavaScript入門學(xué)習(xí)，可惜圖書館里沒有），于是跑去圖書館里借回來看了。
  　　看了一遍，覺得實(shí)在是一本好書，強(qiáng)推計(jì)算機(jī)相關(guān)專業(yè)的同學(xué)作為入門書。（至于其他專業(yè)的同學(xué)，不曉得他們有沒有一種“語言”的快速學(xué)習(xí)感，不敢推薦）
  　　
  　　本書有一下特點(diǎn)：
  　　1、以標(biāo)準(zhǔn)的視覺看待網(wǎng)頁布局
  　　開篇就是介紹DOCTYPE類型與各種瀏覽器，后續(xù)的各種CSS知識也時(shí)刻注意到瀏覽器之別，能夠給出避免各種兼容性的指導(dǎo)。作者對CSS的知識也很深刻，用那些屬性影響什么講述得一清二楚，十分透徹。
  　　
  　　2、CSS技巧簡潔精練
  　　話說看書的時(shí)候我正嘗試著給一個(gè)<table>布局美化。首先放狗搜索了一個(gè)挺漂亮的CSS，淡邊粗標(biāo)題還有字體、偏移等。后來看到第六章有關(guān)表格樣式，才發(fā)現(xiàn)書中提到的8行的CSS，實(shí)現(xiàn)了那個(gè)來自網(wǎng)上的約40行的CSS的大部分效果??！OMG。。。這才是強(qiáng)大的經(jīng)驗(yàn)總結(jié)啊。。。
  　　
  　　3、講述灰常透徹
  　　這本書是從圖書館借的，她的第一次自然不是我占有的。書上就有不少“前人”的筆記。其中一個(gè)，是34頁最后一行對“<div class="clear"></div>"的注解：”終于明白了?。　八靼琢耸裁?，恐怕不需要我多講，我想講的是作者對于如何clear提出了多種辦法（我就喜歡.clear:after這種”高級“的），每一種都說的清清楚楚。
  　　
  　　4、手法頗多
  　　本書還有兩位副作者，分別負(fù)責(zé)最后兩章的實(shí)例。有趣的是，這倆個(gè)作者有著他們愛用的手法，實(shí)現(xiàn)某個(gè)布局/樣式常常使用與前文Andy主要介紹的手法有所不同（實(shí)際上介紹了很多種手法）?！鞍偌覡幯浴惫烙?jì)就是這種多作者的書的特點(diǎn)吧。
  　　
  　　一些不足：
  　　1、內(nèi)容選材
  　　本書講述純粹的CSS，然而實(shí)際的網(wǎng)頁都是CSS和JavaScript結(jié)合的。當(dāng)然心領(lǐng)神會的同學(xué)自然能夠舉一反三，或者能夠從JavaScript入門書中得到指導(dǎo)，因此這也不算是缺點(diǎn)。
  　　2、有關(guān)翻譯。
  　　我個(gè)人覺得翻譯的質(zhì)量還是很高的，普遍有爭議的“hacks”翻譯成“招數(shù)”，我也覺得挺好的（這詞見得多了，一直都想不到其中文。另外一個(gè)"issue"翻譯成“爭端”也挺有趣的）。其他一些翻譯如“流式布局”還是“流體布局”，還是留給專業(yè)人士爭論吧，我是入門的，只管了解只管用。。。
  　　3、時(shí)效性/地域性問題。
  　　CSS的版本在不斷提升，CSS 3 也有許多有趣的特性。本書完全沒有介紹，只能歸咎于書寫得太早了，那是CSS 3還沒端倪呢。。。另外，中國的網(wǎng)頁特別需要考慮字體/行距/行寬等問題，本書也沒提。因?yàn)樽髡呤峭鈬税?。?！?br /> 　　
  　　總結(jié)：入門/提高的必備書籍。
  　　
  　　PS：現(xiàn)在開始喜歡用firebug偷偷看別人網(wǎng)頁的CSS布局了，唉，怎么好呢。。。。
•   　　技術(shù)是跟時(shí)代同行的，所以當(dāng)我看到此書還在講關(guān)于ie5版本的hack技術(shù)時(shí)，感覺沒多大意思。至于其他的技術(shù)講解時(shí)html結(jié)構(gòu)給省略了，如果是個(gè)新手肯定不知道具體說的是什么結(jié)構(gòu)，看的霧里云里的。再就是翻譯的人四級沒過，水平很爛，看得我糾結(jié)的。
•   　　對于一般的界面設(shè)計(jì)設(shè)來說,看完這本書后會豁然開朗,讓你的css技術(shù)更上一個(gè)臺階.
  　　平時(shí)我們碰到的莫名其妙的問題在這本書里度能得到一一解答,特別是 IE BUG 的處理.
•   　　書是08年3月份看的。那時(shí)正在摸索著CSS，看過好幾本書，也在網(wǎng)上看別人寫的樣式，但有些疑問，令我迷惑。自己動(dòng)手寫些效果，卻總有一些偏差！在這些鋪墊之后，看了這本書，有種恍然大悟的感覺。迷惑于我的原本就是自己在理解上的不到位??！
  　　這本書，不光告訴你要怎么做，更是讓你知道了為什么要這樣做。翻譯上是有點(diǎn)遺憾，英文好的就不用買了直接看原版吧，英文一般的可以到網(wǎng)上下個(gè)原版結(jié)合著看。
  　　現(xiàn)在回過頭來看這本書，依舊覺得是值得推薦的。
•   　　 這個(gè)是技術(shù)部的朋友送我的，看過之后發(fā)現(xiàn)，基本上的解決BUG的書，沒有實(shí)例，需要有基本的CSS基礎(chǔ)，并不太適合初學(xué)者。
  　　 總的來說還不錯(cuò)，就是這翻譯實(shí)在是怪怪的，有的時(shí)候一句話要讀上幾遍才能完全理解。
•   　　CSS入門級，可以作為輔助類的參考書，就是說光靠它來入門CSS是絕對不夠的。我的CSS入門好像是靠w3c的中文網(wǎng)站教程入門的，那個(gè)不錯(cuò)，當(dāng)然實(shí)踐才是最好的老師。
  　　書中整體講解得非常細(xì)致，案例研究比較豐富。
  　　這種譯文版最好是對照一本原版在旁邊看，有時(shí)翻譯的意思不理解還可以看看原著的意思。
  　　CSS bug 的修復(fù)問題方面主要側(cè)重于IE5.x/IE6，這個(gè)現(xiàn)在IE8都上來了，輕松了不少，了解就可以，以后實(shí)踐可能用不多。
•   　　第九章 bug 和 bug 修復(fù)可以精讀。
  　　9.1 BUG捕捉
  　　9.2 BUG捕捉基本知識
  　　9.3 擁有布局
  　　
  　　我認(rèn)為：這本書的亮點(diǎn)，在第九章的思想部分。
•   　　這本書非常棒....
  　　大概是我大二的時(shí)候買的
  　　因?yàn)橹拔覍ss了解不是很深刻..
  　　只從有了這本書后,讓我加深了css的認(rèn)識了
•   　　寫的很好.值得反復(fù)研讀.
  　　有些地方不夠細(xì),畢竟書很薄..
  　　至于翻譯的好壞,大家既然都知道是什么意思,批評顯的也不必要了吧.
  　　
•   還是要看看呀，剛借的，看看吧
•   我是css初學(xué)者，適合用這本書么？
•   @肉夾饃 適合的，CSS的知識上手比較快，難度較低，學(xué)習(xí)曲線在后面比較陡
•   HTML的結(jié)構(gòu)很難么？各種標(biāo)簽的屬性用時(shí)去查即可，CSS布局其實(shí)更關(guān)心class，id，div等等。
•   我沒說html結(jié)構(gòu)難，標(biāo)簽大家都懂。我只是說書中省略了html而已。

相關(guān)圖書

• 龔自珍詩詞選
• 精神歷程
• 黃庭堅(jiān)詩詞選
• 亂世飄萍
• 六個(gè)中國城市的十五條街道
• 韓愈柳宗元詩選
• 蟬しぐれ
• 去問人頭吧
• 管理的前沿
• 毒害心靈的101種觀念
• 著魔
• 聖惡女
• 世界童話寶庫（第一輯）
• 文化
• 怎樣臨貼
• 武俠文化
• 外交豁免權(quán)
• 江湖往事
• 男の見方 女の見方
• 出逃的斯大林女兒
• 朗潤瑣言
• 武穆岳飛大傳
• 不可觸民と現(xiàn)代インド
• 陳香梅文集
• 夢二の四季