精通CSS

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

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

相關(guān)圖書(shū)

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