《CSS3使用指南》讀書筆記

2022-01-18 12:45:08 字數 1692 閱讀 9665

一、css3的來龍去脈

1.css3的新特性:

1)不依賴的視覺效果

2)盒容器變形

3)獨一無二的字型

4)強大的選擇器

5)過渡與動畫

6)**資訊查詢

7)多列布局

2.css標準發布分5個階段,所有特性的目前所處階段可以在這裡檢視:www.w3.org/style/css/current-work,一般處於第3階段時,我們就可以使用它了

3.css3對你的**到底意義幾何,是由你的專案和使用者所決定的,而不是根據瀏覽器的份額來。應該支援ie6,但不應該花很多精力在上面

4.漸進增強:在你編寫web頁面時,首先讓它們在基礎的瀏覽器和裝置上正常工作,且展現得當,然後再輔以更高階但非必要的css和js等增強功能,來為當前和未來的瀏覽器提供更好的支援(當使用者瀏覽器公升級的時候可以自動發揮功用)

5.本書推薦通過給html標籤加class名的方式,來相容老版本的瀏覽器(p85)

6.試試瀏覽器設計(

ps.摘錄一句話:一旦遇到衝突,終端使用者優先,其次是作者,其次是實現者,其次標準制定者,最後才是理論上的完滿

二、氣泡對話方塊

1.利用邊框做出三角形和氣泡小尾巴

2.利用rgba或hsla做出半透明效果

三、紙質筆記

2.單一容器上可以使用復合背景

3.使用邊框(

4.嵌入字型

四、屬性選擇器

1.屬性選擇區列表(p227)

2.可以根據a標籤的href屬性的字尾來分別設定屬性選擇器,來給鏈結前面新增不同的圖示。還可以根據href的內容來篩選。

3.也可以直接使用類似jquery這種js庫來實現屬性選擇(避免相容性問題)

4.拍立得**效果(p301)

五、使用偽類來提高效率

1.結構偽類(基於dom),用乙個冒號表示(p310)

2.偽元素(非dom),用兩個冒號表示

3.動態高亮顯示頁面的區域:錨點(target)、更改聚焦區塊的背景色

4.last-child選擇指定元素

5.用css實現計數器、數字圖示

6.css動畫實現漸變效果(需要瀏覽器支援)

六、不同的螢幕尺寸,不同的設計 

1.**查詢,可以用來適配各種尺寸的裝置

2.頁面過寬的時候,橫向導航欄,可以變成縱向的

4.裝置寬度與顯示寬度的區別:打個比方,iphone 5s的顯示寬度是980px,當它旋轉時,顯示寬度始終不變;而它的裝置寬度是320x568,當它橫屏時,device-width就是568。

5.可以通過這句,將顯示寬度設成裝置寬度,這樣移動顯示起來會更清楚

七、布局秀

1.彈性布局模型:需要乙個額外的包裹容器(div)

2.新元素—盒子模型:display: box;

3.控制子元素自動縮放:box-flex: 1;

4.控制排序:box-direction: reverse、box-ordinal-group:1

5.控制盒子的布局位置:box-align:stretch[center]

6.控制盒子的布局位置2(水平布局的元素水平居中):box-pack:center

7.彈性布局由於目前還未成熟,不適合整個頁面使用,但是一些特性,可以根據「漸進增強」的理念,在區域性應用。比如導航條居中(參見第6條)、底部區域粘附效果,之類的比較好用。(但是如果是為特定環境建立應用的話,還是可以玩出很多簡單又強大的效果的)

CSS3屬性box sizing使用指南

box sizing用於改變cswww.cppcns.coms盒子模型,從而改變元素寬高的計算方式。box sizing取值如下 複製 如下 box sizing content box padding box border box 預設值是 content box 對應css2.1規範中標準的盒子...

《CSS權威指南》讀書筆記

第二章 選擇器 第三章 結構和層疊 第四章 值和單位 第五章 字型 第六章 文字屬性 第七章 基本視覺格式化 第八章 內邊距邊框和外邊距 第九章 顏色和背景 第十章 浮動和定位 第十一章 表布局 第十二章 列表與生成內容 第十三章 使用者介面樣式 第十四章 非螢幕 import url sheet....

css權威指南 讀書筆記

網上看見推薦的書總是喜歡買回家,但是大多數時候都不會立即就看,都是在書櫥裡蒙上了一層灰塵。從畢業到現在,由於公司業務原因,寫js多餘css,所以就想系統地看看css,並且做一些練習,於是就開始看 css權威指南 看到了第六章,初步感覺,對於工作一年的我來說,很簡單,當然也有一些我不熟悉的知識點,於是...