二.css視頻教程4天視頻

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

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

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

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

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

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

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

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

9、鼠標(biāo)移動(dòng)到 p 上的時(shí)候思考：如果在一個(gè)頁面上，一部分的超是一種樣式，另一部分超是另一種樣式，如果實(shí)現(xiàn)？答：使用偽類和類的組合。1.6按 CSS 的位置來分類1、內(nèi)嵌樣式：在 HTML 頁面中以開頭，結(jié)束，這里邊的樣式只能供本頁面使用2、外部樣式：寫一個(gè) 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外部樣式首先新建一個(gè) css 文件。在 HTML 頁面中或?qū)氲姆椒▉硗獠繕邮健?、外部樣式語法：rel:表示的類型，這個(gè)屬性不能省略 rel=stylesheet表示的類型是樣式表type=text/