二.css視頻教程4天視頻

1、主講教師：.神龍教主學院 htt 發(fā)布播客1.1顧1、框架a)框架集：b)框架：c)=框架的名稱超要在指定的框架中打開，d)框架是 HTML5 新標準中淘汰的2、內(nèi)嵌框架a)在 HTML5 的標準中用來代替框架的b)c)超要在內(nèi)嵌框架中打開，3、關于基本概念a)位圖：由像素點組成的圖，放大失真，顏色比較豐富，操作位圖的PS，F(xiàn)Wb) 矢量圖：由線條和面組成的圖形，放大不失真，體積小，顏色數(shù)沒有位圖豐富。操作矢量圖的ai，F(xiàn)W腳下留心：矢量圖不能直接放到網(wǎng)頁上，必須通過圖像處理持的格式（jpg、gif、png）(ps、fw)轉(zhuǎn)換成網(wǎng)頁支c)分辨率：長度中像素點的多少，（長度指的是英寸）。分辨率是

2、衡量位圖質(zhì)量好壞的指標，分辨率越大，質(zhì)量越好，但是體積也最佳的分辨率是 72 像素/英寸越大。網(wǎng)頁4、網(wǎng)頁常見的圖象格式回a)Jpg：是有損壓縮，顏色數(shù)達到一千六百多萬種，是目前使用量很大的一種格式，jpg 不支持透明，不支持動畫b)Gif：顏色數(shù)很少，只有 256 種，支持透明，支持動畫，質(zhì)量很差，現(xiàn)在已經(jīng)用的很少。c)Png：無損壓縮格式，體積小，支持透明。是用的越來越多的一種格式。壓縮 png 格式要使用專門的壓縮工具。5、格式轉(zhuǎn)換a)打開源文件，文件另存為選一個格式保存6、的優(yōu)化a)改尺寸b)改分辨率c)壓縮d)切片7、幾個常用快捷鍵a)ctrl+加號放大b)ctrl+減號縮小c)自適

3、應顯示雙擊手型工具d)顯示隱藏工具ps 和 fw 用 Tabfw 和 dw 用 F4e)快速切換到手型工具按住空格f)按住 ctrl 鍵快速切換到選擇工具8、網(wǎng)頁基本概念a)：所有網(wǎng)頁的集合b)首頁：但收入以后，默認打開的頁面叫首頁，服務器通過名詞判斷是否是首頁，首頁的名稱一般是 index 或是 defaultc)子頁命名規(guī)則：除了首頁以外的頁面都叫子頁面，命名規(guī)則用小寫的因為字母和數(shù)字，不能用中文。也不能用中文。d)頁面寬度：以不出現(xiàn)水平滾動條為準。9、通過設計器，文字a)可以執(zhí)行命令：圖像b)還可以直接從站點中拖放到頁面上c)回車是換段，d)Shift+回車是換行10、 在設計器下做超a

4、)選中和文字，是屬性面板上點擊瀏覽文件或指向文件。11、 設計器中表格a)表格可以嵌套b)表格的有兩個，一個是百分比，一個是像素，最外層的表格是像素，嵌套的表格是像素或百分比c)在屬性面板上有兩個按鈕可以用來快速合并和拆分單元格12、選擇器a)快速選擇 HTML 對象13、 合并單元格和拆分單元格14、 表格的特性a)可以被內(nèi)容撐開，不能被背景撐開b) 背景默認是平鋪的c)如果要實現(xiàn) A 圖在 B 圖上，或者字在 B 圖上，則 B 圖是背景圖。15、 背景圖a)圖在圖上，字在圖上，這個圖是背景圖b) 如果一個圖重復出現(xiàn)，這個圖是做為背景圖。1.2作業(yè)具體代碼參見例題1.3CSS 層疊樣式表CS

5、S 是 Cascading Style Sheet(層疊樣式表)的縮寫。是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。思考題：為什么 css 叫層疊樣式表，”層疊”表示什么意思？將分成兩個部分，表現(xiàn)和內(nèi)容，表現(xiàn)由 CSS 來控制，內(nèi)容由從數(shù)據(jù)庫中。樣式以開頭，結(jié)束樣式一般寫在之間1.4CSS 基本語法CSS 的定義是由三個部分：選擇器屬性屬性的取值（value）基本格式如下：選擇器 屬性：值;小結(jié)：一個選擇器中可以有多個屬性，每個屬性都有對應的值，屬性和值之間用冒號隔開，屬性和屬性之間用分號隔開。1.5按選擇器不同來分類1.5.1類選擇器（class）語則：1、必須以點開頭

6、2、通過 class 屬性來調(diào)用3、類樣式可以被多次調(diào)用1.5.2ID 選擇器（id）Id 是唯一的語則：1、以#開頭2、通過元素的 id 屬性來調(diào)用3、只能被調(diào)用一次1.5.3標記選擇器直接選擇 HTML 的標記。多學一招：font-family:黑體, 隸書, 微軟雅黑;后面跟多個字體，默認使用第一個字體，如果第一個沒有，就使用第二個，依次類推，如果樣式中的字體客戶端一個都沒有，就使用客戶端的默認字體，中文操作系統(tǒng)，默認是宋體。1.5.4關聯(lián)選擇器P 下面所有的 b,b 只要是 p 的后代就行pb:b 必須是 p 的子級關聯(lián)選擇器的總結(jié)：p .aa表示 p 下面的.aa(p 的后代)p.a

7、a表示 p 的子級中的.aap.aa同時具備 p 和.aa 的元素。1.5.5組合選擇器多個樣式使用相同的屬性，用組合選擇器,每個選擇器之間都用逗號隔開。1.5.6偽類選擇器思考：偽類？類可以被多個元素，有一個狀態(tài)，超有 4 個狀態(tài):link：正常連接時候的狀態(tài):visited：已經(jīng)點擊過的狀態(tài):hover當鼠標移上去時候的狀態(tài):active當鼠標點擊下去的狀態(tài)/*正常連接時候狀態(tài)*/ a:linkcolor:#F00; font-size:14px;text-decoration:none; /*沒有下劃線*/*點擊后的狀態(tài)*/ a:visitedcolor:#F0F; font-size:

8、14px;text-decoration:none;/*但鼠標移上去的時候*/ a:hovercolor:#060; font-size:24px;text-decoration:underline;/*點擊下去的狀態(tài)*/ a:activecolor:#00F; font-size:24px;text-decoration:underline;鋤禾日當午偽類有四個狀態(tài)，可以省略其中的某個狀態(tài)，如果省略就使用默認樣式，但是如果要寫這些狀態(tài)，必須按照 l(link)v(visited)h(hover)a(active)Lvlove(愛)hahate（恨）思考：如下代碼表示什么意思？p:hover但

9、鼠標移動到 p 上的時候思考：如果在一個頁面上，一部分的超是一種樣式，另一部分超是另一種樣式，如果實現(xiàn)？答：使用偽類和類的組合。1.6按 CSS 的位置來分類1、內(nèi)嵌樣式：在 HTML 頁面中以開頭，結(jié)束，這里邊的樣式只能供本頁面使用2、外部樣式：寫一個 css 文件，在需要使用 css 的頁面中引入外部 css?？梢詫㈨撁婀玫?css 寫到外部 css 中3、行內(nèi)樣式：通過元素的 style 屬性直接寫的樣式。1.6.1內(nèi)嵌樣式在 HTML 頁面的內(nèi)部嵌入樣式1.6.2行內(nèi)樣式通過元素的 style 屬性直接寫的樣式1.6.3外部樣式首先新建一個 css 文件。在 HTML 頁面中或?qū)氲姆椒▉硗獠繕邮健?、外部樣式語法：rel:表示的類型，這個屬性不能省略 rel=stylesheet表示的類型是樣式表type=text/