這本書的試讀章節隻有第一章,我個人感覺并沒有說到很核心的東西。那麼就第一章來說,主要介紹了寫CSS的工具。前面那本書我就說過,我是做PHP的。是以對前台的東西多少都得有點了解。在以往的項目中我也接觸過CSS,當然更是使用了書中所介紹的工具firebug。
那就結合我自己的工作經驗來說說firebug,也許對CSS核心的東西沒有什麼涉及,但是熟練的工具使用,也是開發人員的必備武器。
F12打開firebug,在HTML頁籤左側戰士的是文檔結構,單機剪頭可以展開或者收縮文檔的子結構。當把滑鼠懸停在某個元素名上時,鈣元素會在頁面中突出顯示。最神奇的是,它還可以顯示彩色區域并利用不同色彩展示元素的内邊距和外邊距。在頁籤的右側,可以通過單擊STYLE頁籤檢視應用在目前元素上的CSS。這裡不僅包含你自己寫的央視,還包含浏覽器自身的内建樣式。檔案html.css quirk.css這兩個檔案的内容,就是内建樣式。
我們需要注意的是,style頁籤中列出的規則是按特殊性降序排列的,也就是說,第一個是應用在目前元素上最特殊的規則,第二個是特殊性稍低一點的規則,以此類推。
通過随時單擊滑鼠右鍵并在彈出的菜單中選擇審查元素選項可以直接檢視任何元素,也可以單擊firebug圖示旁邊帶箭頭的方框圖示切換到審查模式。此時,随着滑鼠在頁面上的移動,目前元素會顯示出輪廓,單擊元素可進行檢視。
在fireb中單擊任何聲明左側的空白都可以禁用該聲明,這種禁用聲明的方式對于測試各個屬性之間的互相作用非常有用。
通過檢視元素的盒模型部分,可以精确的檢視元素的尺寸大小,如元素的寬、高、内邊距和外邊距等,這些都是用像素表示的。更酷的是當滑鼠懸停在該面闆中的框上時,頁面上就會出現沿着元素外框的上邊緣和左邊緣放置的像素尺。
firebug在工作中是我必不可少的工具,至于書中提到的Web Developer Toolbar我沒用過,可以按起來試試,不過應該是差不多的功能。