版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
職業(yè)教育“十三五”數(shù)字媒體應(yīng)用人才培養(yǎng)系列教材Dreamweaver網(wǎng)頁設(shè)計與應(yīng)用60個專業(yè)案例362個案例素材及源文件92個微課視頻DreamweaverCC2019微課版教師專項服務(wù)項目7CSS樣式項目引入：通過CSS
樣式可以將網(wǎng)頁制作得更加絢麗多彩。本項目主要對CSS
樣式進
行講解。通過對本項目的學(xué)習(xí)，學(xué)生可以
輕松、有效地對頁面的整體布局、顏色、
字體、鏈接、背景，以及同一頁面的不同
部分、不同頁面的外觀和格式等效果進行
精確控制?！?/p>
了解CSS選擇器的類型、CSS樣式的創(chuàng)建與應(yīng)用方法◆
掌握CSS屬性的設(shè)置方法◆
熟練使用"CSS
過渡效果"面板項目目標
掌握“山地車網(wǎng)頁”的關(guān)鍵制作步驟◆
掌握“羽毛球運動網(wǎng)頁”的關(guān)鍵制作步驟技能目標
培養(yǎng)對網(wǎng)頁布局、顏色、字體等方面的審美能力
激發(fā)對CSS
技術(shù)的學(xué)習(xí)興趣素養(yǎng)目標
"CSS
設(shè)計器"面板CSS
選擇器的類型任務(wù)7.1
CSS樣式概述使用"CSS
設(shè)計器"面板可以創(chuàng)建、編輯和刪除CSS
樣式，并且可以將外部樣式表附加到文檔中。1.
打開"CSS
設(shè)計器"面板2.CSS
的功能44CSS設(shè)計器全部當(dāng)前+
一
源十
-
體
：這
障
一
個
s
草
體
藍
詢
，+一
選擇器P郝選CSS規(guī)則適辣一個CSs原并蘋方源+一勝2顯示集所有模式：列出整個文檔的規(guī)則7.1.1"CSS
設(shè)計器"面板"CSS
設(shè)計器"面板+添加新的CSS源聲明
聲明
聲明聲明聲明
聲明font-size:18px;
colorred;
font-size:18px;
color:red;#textfont-size:18px;
color:red;屬性
值
屬
性
值標簽選擇器
屬性值
屬
性
值
ID選擇器屬性值屬
性
值17
V<body>18<p
style="font-family:'微軟雅黑';
font-size:12px;">你好嗎?</p>19
</body>14
Vh1,h3,h4
{15
font-family
:“微軟雅黑”;16
color
:#FF0004
;17
}CSS
選擇器可分為類選擇器、標簽選擇器、
ID
選擇器、復(fù)合選擇器等。7.1.2
CSS
選擇器的類型14
Vh1,h3,h4
{15
font-family:
“
微
軟
雅
黑16
color
:#FF0004
;17
}同級別聲明
嵌套式聲明類名稱.text類選擇器”;◆
創(chuàng)建CSS
樣式◆
應(yīng)用CSS
樣式◆
創(chuàng)建和附加外部樣式任務(wù)7.2
CSS樣式的創(chuàng)建與應(yīng)用全部
當(dāng)前□顯示集widthstylecolor
#D93234border-radus所有模式：列出整個文檔的規(guī)則全
部
當(dāng)前通痛一個
CSS
源并草出”震加深體查游。十
一
選擇器P篩選
CSS
規(guī)則適擇一個
SS
源并草擊””加透擇部，□顯示集所有模式：列出整個文檔的規(guī)則使用"CSS
設(shè)計器"面板可以創(chuàng)建類選擇器、標簽選擇器、
ID
選擇器和復(fù)合選擇器等。7.2.1創(chuàng)建CSS樣式創(chuàng)建自定義樣式后，要為不同的網(wǎng)頁元素應(yīng)用不同的樣式，具體操作步驟如下。(1)在文檔編輯窗口中選擇網(wǎng)頁元素。(2)根據(jù)選擇器的類型使用不同的應(yīng)用方法。7.2.2
應(yīng)用CSS樣式如果不同網(wǎng)頁的不同HTML元素需要使用同一樣式，則可通過附加外部樣式來實現(xiàn)。首先創(chuàng)建一個外部樣式，然后在不同網(wǎng)頁的不同
HTML
元素中附加定義好的外部樣式。1.
創(chuàng)建外部樣式2.
附加外部樣式7.2.3
創(chuàng)建和附加外部樣式網(wǎng)站設(shè)計者有時需要修改應(yīng)用于文檔的內(nèi)部樣式和外部樣式，如果修改內(nèi)部樣式，則會自動重新設(shè)置受它控制的所有HTML
元素的格
式；如果修改外部樣式文件，則會自動重新設(shè)置與它鏈接的所有
HTML文件。text的CSS規(guī)則定義分類幫
動
(
H
0X類型
Font-family(F):口微軟雅黑
★L(fēng)Ine-height(T);Tet-decoration(D):px□underine(U)□overine(O)□
line-through(L)□blink(B)□none(N)Tst
-ransform(R);:
Color(C):!
E72629應(yīng)用(A)
取消
確定屬性>HTML
曲
CS
S目標規(guī)則.text編輯規(guī)則
CSS和設(shè)計器W文檔標題無標題文檔任務(wù)7.3
編輯CSS
樣式類型背景區(qū)塊方框邊列表定位擴展過Font-size(S):
12pxFont-weightw);
boldFont-style();:Font-variantv):
布局屬性文本屬性邊框?qū)傩员尘皩傩匀蝿?wù)實踐一山地車網(wǎng)頁任務(wù)7.4
CSS屬性品
T
□…
□顯示集品
布
局widthheightmin-width
min-height
max-width
max-height
displaybox-sizingmargin0padding::::投望速匯000:設(shè)盟速匯所有模式：列出整個文檔的規(guī)則“布局”選項組用于控制網(wǎng)頁中塊元素的大小、邊距、填充和位置屬性等。dearoverflowxopacity所有模式：列出整個文檔的規(guī)則7.4.1
布局屬性left:bottom:+-□顯示集T文本colorfont-family
font-stylefont-variart
font-weight#EF?A0E:方正大黑簡體;:font-size:
20
pxline-heighttext-align
:
三
三三text-decoration
□T
T
平text-indenttext-shadowh-shadowv-shadowblur:color
undefined所有模式：列出整個文檔的規(guī)則“文本”選項組用于控制網(wǎng)頁中文本的字體、字號、顏色、行距、首行縮進、對齊方式、陰影等。+
-
性品□
四
口顯示集blurcolor
undefinedtext-transfom
letter-spadng
word-spadngwhite-spacevertical-alignlist-stylepositionAbAB
ab:
望
唱list-styleimagenonelist-styletype所有模式：列出整個文檔的規(guī)則7.4.2
文本屬性:
段盟遞記widthstyiecolorborder-radusborder-spadng所有模式：列出整個文檔的規(guī)則“邊框”選項組用于控制塊元素的邊框粗細、樣式、顏色及圓角。7.4.3
邊框?qū)傩?
-
屬
性品
T
Z
口顯示集□
背
景background-undefinedcolorbackground-imageurl輸入文件路徑gradient
nonebackground-positionbackground-sizebackground-dpbackground-
repet田
■所有模式：列出整個文檔的規(guī)則II+
-
勝T
□顯示集background-
repeatbackground-
originbackground-attachmentbox-shadow田
■
■h-shadowV-shadowblur:spreadcolor
undefinedinset
:
□所有模式：列出整個文檔的規(guī)則“背景”選項組用于為網(wǎng)頁元素添加背景圖像或背景顏色。7.4.4
背景屬性使用"Table"按鈕插入表格，使用CSS
屬性設(shè)置鏈接效果。任務(wù)實踐一山地車網(wǎng)頁山地車魅力，騎行芯演繹。效果圖低碳減排快樂騎行卻我選擇新白行車山站越野山道童車女式男士定制海
情
格
度
"CSS
過渡效果"面板
創(chuàng)建CSS
過渡效果◆
任務(wù)實踐一羽毛球運動網(wǎng)頁任務(wù)7.5
過渡效果7.5.1
“CSS
過渡效果”面板在"CSS
過渡效果"面板中可以新建、刪除和編輯CSS
過渡效果。.textYhoverbody.textTIIIICSS過渡效果十
一44
X三在創(chuàng)建CSS
過渡效果時，需要為元素指定過渡效果類。如果在創(chuàng)建效果類之前已選擇元素，則過渡效果類會自動應(yīng)用于選定的元素。7.5.2
創(chuàng)建CSS
過渡效果使用"CSS
設(shè)計器”面板設(shè)置文字的字體、顏色，使用"CSS
過渡效果”面板設(shè)置文字的變色效
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2026年寧波中遠海運物流有限公司招聘備考題庫及答案詳解1套
- 2026年佛山市順德區(qū)倫教三洲幼兒園招聘備考題庫附答案詳解
- 2026年中國輕工業(yè)出版社有限公司招聘備考題庫附答案詳解
- 2026年定邊縣公開招聘展館講解員備考題庫及答案詳解參考
- 2026年天津人力資源開發(fā)服務(wù)有限公司招聘國有大型銀行派遣制客服代表備考題庫含答案詳解
- 2026年大連理工大學(xué)化工學(xué)院黨群辦公室職員（自聘）招聘備考題庫完整答案詳解
- 2025年鳳臺十中高中部選調(diào)教師備考題庫及一套參考答案詳解
- 2026年北京京西門城基礎(chǔ)設(shè)施投資建設(shè)有限公司招聘備考題庫及答案詳解1套
- 2026年體育總局科研所體育服務(wù)檢驗中心檢驗檢測工作崗位編外聘用人員招聘備考題庫及一套參考答案詳解
- 2026年寧波市象山縣商貿(mào)集團有限公司公開選聘國有企業(yè)工作人員崗位調(diào)整備考題庫及參考答案詳解
- 船廠裝配工基礎(chǔ)知識培訓(xùn)課件
- 2025年GMAT邏輯推理解析試題
- 2025-2026學(xué)年蘇教版（2024）小學(xué)數(shù)學(xué)二年級上冊（全冊）教學(xué)設(shè)計（附目錄P226）
- 2025-2030電子特氣行業(yè)純度標準升級對晶圓制造良率影響深度分析報告
- 除夕年夜飯作文600字9篇范文
- 國企公房管理辦法
- 公共政策概論-004-國開機考復(fù)習(xí)資料
- 空調(diào)售后維修管理制度
- 建筑裝飾裝修施工圖設(shè)計說明
- 2025年河北石家莊印鈔有限公司招聘13人筆試參考題庫附帶答案詳解
- 《幼兒園保育教育質(zhì)量評估指南》解讀與培訓(xùn)
評論
0/150
提交評論