版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
1、第12節(jié) CSS樣式的定義與使用,武漢紡織大學傳媒學院cm.wtu.edu.cn,2024/3/16,1,傳媒學院,1、回顧概念,樣式(也叫樣式表)行樣式例子武漢既是定義也是使用,2024/3/16,2,傳媒學院,2、內(nèi)部樣式,內(nèi)部樣式表定義在HTML文件的head部分,該HTML頁面內(nèi)所有標簽都可使用該樣式來美化其包含的內(nèi)容例子定義(這些樣式代碼一般放在網(wǎng)頁的head部分)使用舉例此行文字被內(nèi)部的
2、樣式定義為藍色顯示說明標簽是用來表明進行樣式定義,其type屬性是指該標簽為CSS定義,2024/3/16,3,傳媒學院,Q:除藍色,18像素的大小外,還有什么效果?,2、使用DW定義內(nèi)部樣式,開始定義,2024/3/16,4,傳媒學院,在彈出的CSS規(guī)則定義面板選擇兩個屬性及取值后面會詳細講解怎么使用,2024/3/16,5,傳媒學院,確定后,DW會自動地將選定的規(guī)則翻譯成CSS代碼放置在網(wǎng)頁的head部分由dw自動創(chuàng)
3、建的css代碼,使用方式和前面的描述一樣如果想修改樣式,可以把光標放置在樣式代碼區(qū)域,然后點擊DW的右邊的“編輯樣式”按鈕會返回CSS規(guī)則定義面板,2024/3/16,6,傳媒學院,使用css,3、外部樣式,CSS樣式不定義在網(wǎng)頁中,而是單獨定義在一個樣式文件中,網(wǎng)頁鏈接外部樣式表后就可以使用外部樣式表所定義的CSS樣式了好處:同一個樣式可以被多個網(wǎng)頁使用,而無需重復定義定義的方法和內(nèi)部樣式表一樣,只是不需要和隱藏標記了例子:比
4、如外部樣式文件style.css文件的內(nèi)容如下 .s1{font-size:18px; color:red}外部樣式文件以.css結(jié)尾,2024/3/16,7,傳媒學院,外部樣式的使用使用前必須先鏈接外部樣式文件網(wǎng)頁鏈接外部樣式表文件的語法例子在標簽中使用外部樣式和使用內(nèi)部樣式的方法一樣例如Welcome to WTU,2024/3/16,8,傳媒學院,4、利用DW創(chuàng)建外部樣式表,點擊DW的“新建CSS規(guī)則”按鈕開始
5、創(chuàng)建在彈出的界面選擇“定義在 新建樣式表文件”選項隨后會彈出一個界面要求輸入外部樣式表文件的路徑和文件名,完成就會彈出CSS樣式規(guī)則定義面板,2024/3/16,9,傳媒學院,設置CSS規(guī)則后(設置方式和內(nèi)部樣式的設置一樣),樣式定義將被保存在外部樣式表文件中;而且會自動增加一個當前網(wǎng)頁到該樣式表文件的鏈接,而且dw會自動打開該外部樣式文件,,2024/3/16,10,傳媒學院,5、理解網(wǎng)頁和外部樣式表文件的關(guān)系,網(wǎng)頁中放置的是H
6、TML標簽和所要呈現(xiàn)的內(nèi)容外部樣式表文件中保存的是CSS樣式的定義網(wǎng)頁通過鏈接外部樣式表就可以使用樣式文件中的CSS定義來美化網(wǎng)頁這兩個不同文件的存儲位置要理解如果是要手工書寫網(wǎng)頁到外部樣式表的鏈接,要注意路徑,在DW中可通過瀏覽按鈕來找到外部樣式表文件,2024/3/16,11,傳媒學院,6、思考下列問題,如果已經(jīng)創(chuàng)建了一個外部樣式表,現(xiàn)在要創(chuàng)建一個新的CSS規(guī)則,應該怎么辦?光標在網(wǎng)頁中時,如何新建?光標在外部樣式表中時
7、,如何新建?如何修改外部樣式在網(wǎng)頁中如何修改?在外部樣式表中如何修改?,2024/3/16,12,傳媒學院,作業(yè)1,使用Dreamweaver創(chuàng)建內(nèi)部樣式,并通過規(guī)則定義面板定義三個樣式,1.設置字體大小為24px,顏色為紅色;2.設置字體大小為16px,顏色為藍色;3.設置字體大小為24px,顏色為白色,背景顏色為綠色。并在font、sup標簽中通過class屬性使用定義好的樣式,達到如下效果,2024/3/16,13,傳媒學院
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 眾賞文庫僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 《css樣式》習題答案
- 表單和css樣式
- 《css樣式》復習題
- css樣式表鏈接
- css中的cursor屬性(光標樣式)
- css常用的網(wǎng)頁布局樣式屬性
- dreamweaver中css樣式的應用教案
- css中的cursor屬性(光標樣式)
- CSS_網(wǎng)頁樣式大全.doc
- html中css樣式標簽大全及用法
- ch08-應用css樣式美化網(wǎng)頁
- 淺談技校css+div網(wǎng)頁樣式與布局課程教學
- [學習]網(wǎng)頁設計與制作_第四章css樣式
- 《photoshop cs2基礎教程與上機指導》第12課使用圖層樣式制作圖像特效
- c語言_函數(shù)的定義與使用
- css樣式技巧常用的選擇器和通用選擇器-
- 項目5使用css控制頁面元素
- 網(wǎng)頁制作中的樣式的使用
- 人教版物理第12章第2節(jié):滑輪
- 在flex中使用樣式方法
評論
0/150
提交評論