閱讀筆記 | 《CSS標準網頁布局開發指南》

《CSS標準網頁布局開發指南》

書籍《CSS標準網頁布局開發指南》

閱讀方法:王者速讀法

閱讀目的:工作需要;專業性的知識,已經閱讀過幾次,長時間沒用也忘記的差不多了,需要重新拾起來,也想做一個系統性的筆記梳理。

第一階段,預覽

要明確目的的解決問題

第一,想獲得什么信息。專業基礎知識,長時間沒用,從知識、到思維都需要梳理梳理。

第二,能獲得什么信息。基礎而全面的CSS知識,簡單的Web標準及XHTML書寫規范知識,配合Dreamwerver編輯工具,豐富的CSS實例及效果展示。

第三,明確重點內容。CSS核心知識,CSS語法及書寫規范、CSS各種布局和容器屬性等;HTML各種屬性記不住不要緊,CSS核心邏輯及布局、容器原理要弄懂。

具體閱讀

1.封面。「配合W3C的Web標準」,「詳細講解常用CSS屬性」,「實例豐富,難點解決,注意瀏覽器兼容性」;陳剛編著。

2.版權頁。2007年6月出版;內容簡介對全書內容做了概括。

3.編輯寄語及前言。對全書內容及特點做一個概括性闡述。

4.目錄。共13章,目錄已經把內容分為四大部分。第一部分第1章到第3章,CSS布局基礎知識;第二部分第4章到第9章,CSS頁面布局技巧;第三部分第10章和第11章,整站的CSS定義技巧;第四部分第12章和第13章,實例制作。

總結

對CSS內容有一定的熟悉,以前已經讀過類似的書,不過不夠系統和深入,需要進行專業知識的梳理。5分鐘要瀏覽完所有的封面、前言、目錄有一定的難度,尤其許多知識還不是很熟悉,太多內容都在目錄上了,領會目錄都感覺領會大半本書了。

第二階段,快速翻閱全書

對圖表的印象

翻閱所有的書頁,標題、圖表、照片等最顯眼的內容基本都看不過來,抽樣閱讀統計性整體印象,全書的圖片有圖序,也有標題,圖片基本上是實例效果圖,絕大部分內容來不及看。

對章節內容的印象

全書400多頁,5分鐘翻頁時間都不夠,基本就跟瀏覽目錄差不多,一不小心容易停下來看小標題,就不能按照閱讀法要求快速地翻頁了。要說對章節內容的印象,還真的不好說,因為真的看不完,翻不過來。

總結:

書本內容比較豐富,盡管對內容有一定的熟悉,翻頁閱讀翻都翻不過來,更別說瀏覽閱讀了,這時候已經不是抓取知識,而是通過視覺效果來使腦海的知識浮現出來。可以預見,20分鐘跳讀是沒法做到的了,必須要更多的時間來抓取重點內容,系統性內容,而不只是幾個單獨的知識點。

第三階段,跳讀

第1篇 CSS布局基礎知識

第1章 Web標準布局的本質

Web標準可以分為結構標準語言(如HTML)、表現標準語言(如CSS)和行為標準(如JavaScript)3個方面。

比如對于網頁布局,傳統布局使用table元素進行布局,而Web標準布局則是結構(內容,頁面是HTML等)和表現(外觀效果,使用CSS來實現)。

重點:Web標準。

第2章 XHTML書寫規范

XHTML是HTML的發展,用來呈現網頁內容文檔結構,也是標記語言,由元素和元素屬性組成,語法結構跟HTML差不多。

XHTML主要元素:body元素,文本元素如div、p、標題,修飾元素如hr和img,鏈接元素a,列表元素如ul,表單元素如form,表格元素如table。

XHTML元素的主要屬性:每個元素都有相關的屬性。

第3章 CSS基礎與書寫規范

一個CSS樣式的語法由3部分構成:選擇符(selectors)、屬性(property)和屬性值(value)。基本語法:selector{property:value}。

常用的選擇符:通配選擇符(「*」)、類型選擇符(元素標簽)、包含選擇符(以空格連接)、ID選擇符(以「#」定義)、類選擇符(以「.」定義)、分組選擇符(以「,」分割)。

主要屬性分類:字體屬性、文本屬性、背景屬性、定位屬性、尺寸屬性、布局屬性、邊界屬性、邊框屬性、補白屬性、列表項目屬性、表格屬性。

偽類基本語法:selector:偽類{property:value}。

CSS選擇符的屬性具有繼承性。

注意CSS命名規范和樣式表推薦書寫順序。

理解CSS的塊元素和內聯元素概念,熟記基本的塊元素和內聯元素,記不住要懂得如何驗證一個元素是塊元素還是內聯元素的方法(根據原理反驗證)。在第5章會講到,CSS的塊元素和內聯元素可以通過display屬性進行轉換。

第2篇 CSS頁面布局技巧

第4章 網頁頭部元素的詳細定義

網頁頭部元素的定義重點需要掌握文檔類型(DOCTYPE)的選擇、meta標簽的定義、CSS調用的方法和優先級問題。

在頁面中插入樣式表的方法有4種:(1)鏈入外部樣式表,基本語法:<link rel="stylesheet" type="text/css" href="樣式表文件的地址">;(2)內部樣式表,基本語法:<style type="text/css"> selector{property:value} selector{property:value} </style>;(3)內嵌樣式,基本語法:<HTML標記 style="property:value;…">;(4)導入外部樣式表,使用@import聲明導入,很少使用。

樣式應用的優先級:內嵌樣式>樣式表樣式,其原理是樣式在應用的時候,離標簽越近的樣式優先級越高,即遵循最近最優先原則。這一點,最好多做幾次試驗驗證。

選擇符優先級:ID選擇符>類選擇符>類型選擇符。

第5章 CSS基本布局屬性

理解頁面的流結構(元素默認排列方式),在此基礎上理解浮動屬性定位和定位屬性定位。

浮動屬性定位通過使用float屬性進行定位。注意:float屬性是沒有繼承性的屬性。

定位屬性定位包括3個方面:定位模式(position屬性)、邊偏移(top、right、bottom、left四個屬性)和層疊定位元素(z-index)。position屬性有static、relative、absolute、fixed幾個值,使用定位屬性定位至少要定位模式和邊偏移一起使用。

難點:使用position定位時,水平居中和垂直居中。

頁面的背景設定通過有關背景的綜合屬性(background屬性)設定,也可以分開背景顏色、背景圖像、背景位置、背景重復等屬性進行設定。

CSS的display屬性可以控制內容的顯示,是一個不可繼承的屬性。接第3章,CSS的塊元素和內聯元素可以通過display屬性進行轉換。

實踐:使用CSS和列表(ul和li)制作橫向和縱向的菜單,進而制作頁面的頭部(header,一般包括菜單menu和banner兩個部分)。

第6章 CSS容器屬性

CSS的容器屬性是指CSS盒模型屬性。CSS盒模型是指在CSS中所有的文檔元素都是一個矩形框,就像一個盒子,由內容(width和height定義)、內邊距padding、邊框border和外邊距margin組成。

拓展:盒模型和塊元素、內聯元素的關系;自適應原理及實現。

實踐:根據盒模型,制作頁面的框架。

第7章 CSS定義文本屬性

掌握文本的縮進和對齊、行高(line-height)與間隔、字體的綜合屬性、文本的修飾屬性(text-decoration)、鏈接樣式的定義、水平和垂直居中等。

第8章 元素的修飾和CSS常見應用

掌握圖片、表單、表格等常用元素的修飾,掌握各種圓角框的制作和下拉菜單的實現。

第9章 瀏覽器及兼容問題

掌握解決瀏覽器兼容問題的原理。

解決瀏覽器兼容性問題一般可以遵循兩個原理:使用CSS hack;使用兼容屬性。

第3篇 整站的CSS定義技巧

第10章 關于整站樣式表的分析

主要需要掌握規劃樣式表的方法、重復使用樣式的技巧,簡化頁面結構。

規劃樣式表要遵循使用方便的原則,可以獨立一個樣式表,也可以使用多個樣式表(規劃方法)。

第11章 關于標準的校驗

掌握標準校驗的方法、常見錯誤以及修正的方法。

標準的校驗分為結構(內容)部分的校驗和表現CSS校驗。

標準的校驗可以通過輸入網址、上傳文件等方法在線校驗,也就是通過工具來進行校驗。

第4篇 實例制作

第12章 一個英文網站的制作和第13章使用Dreamweaver制作中文網站,是兩個大的實例,通過實踐掌握編寫代碼的方式、制作站點的流程、站點結構、樣式規劃、Dreamweaver工具的使用等知識。

總結

本書知識全面,內容豐富,知識點多,重點要掌握CSS基本語法、元素屬性、盒模型、定位、布局應用,掌握文本、鏈接等元素的修飾和菜單等網站組件的制作,然后通過大型實例學習網站站點的制作。

特別的,本書每一章都有對一章知識點的說明,以及學習目標和重點內容的提示,對讀者掌握一章的內容起到很好的指導作用。CSS注釋跟HTML注釋不同,CSS注釋的方法為:/*需要注釋的內容*/。

最后,應用王者閱讀法閱讀本書,我是做不到了,至少第三部分,我花了快兩個小時看完,仍然看得很粗略,不過重點內容應該是抓住了,感覺經過王者閱讀法的訓練,閱讀效率還是很不錯的。

關于王者閱讀法的實踐,還可以閱讀以下文章:


1.閱讀筆記 | 《「微信+」時代:再小的個體也有自己的品牌》

2.閱讀筆記 | 《引爆社群:移動互聯網時代的新4C法則》

3.閱讀筆記 | 《草根自媒體達人運營實戰》

4.閱讀筆記 | 《玩轉微信》

5.閱讀筆記 | 《HTML網頁設計參考手冊》

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,197評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,415評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,104評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,884評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,647評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,130評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,208評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,366評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,887評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,737評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,939評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,478評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,174評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,586評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,827評論 1 283
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,608評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,914評論 2 372

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,775評論 1 92
  • 本文主要是起筆記的作用,內容來自慕課網. 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,656評論 0 30
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,583評論 32 459
  • 一路初陽一路紅,驅車共與出城東。 車窗貫入兩邊風。 不覺盤山尋老路,幸虧迷徑問青童。 從朝至暮樂融融。
    雪窗_武立之閱讀 334評論 4 5
  • 圖文/莫遙 (≧?≦*) ? 陜十三 “這里不是書店,請揣著吃貨的心情進來。”門口就貼著這樣一個標語。比書店更沁人...
    莫遙1114閱讀 409評論 1 2