CSS動態(tài)網(wǎng)頁布局_第1頁
CSS動態(tài)網(wǎng)頁布局_第2頁
CSS動態(tài)網(wǎng)頁布局_第3頁
CSS動態(tài)網(wǎng)頁布局_第4頁
CSS動態(tài)網(wǎng)頁布局_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計(jì)與制作

CSS+JavaScript制作人：趙林莉第二章CSS根底教學(xué)目的教學(xué)重點(diǎn)教學(xué)內(nèi)容本章小結(jié)本章習(xí)題退出教學(xué)目的通過本章的學(xué)習(xí)，學(xué)生應(yīng)掌握CSS的根本語法規(guī)那么，熟練掌握CSS設(shè)置對象屬性的方法。教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄教學(xué)重點(diǎn)教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄CSS語法規(guī)那么常用樣式屬性的使用方法教學(xué)內(nèi)容教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄CSS簡介CSS根本語法應(yīng)用CSS到網(wǎng)頁中常用樣式屬性層疊式應(yīng)用規(guī)那么CSS簡介CSS是CascadingStyleSheets的縮寫，中文為“層疊樣式表”。CSS具有下述特點(diǎn)：CSS通過“樣式”來表示網(wǎng)頁的顏色、字體、背景色、邊框線及網(wǎng)頁內(nèi)容的位置及大小尺寸等屬性。一系列的樣式組成了“樣式表”。定義“樣式表”有3種方式：外部樣式表文件、內(nèi)部樣式表及元素中的樣式表。在網(wǎng)頁的標(biāo)記中應(yīng)用“樣式”時(shí)采用的是“層疊式”原那么。教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄CSS根本語法CSS屬性與選擇符ID選擇符Class選擇符類型選擇符群組選擇符包含選擇符標(biāo)簽指定選擇符偽類及偽對象教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄CSS屬性與選擇符CSS的語法結(jié)構(gòu)由三局部構(gòu)成：選擇符：指這組樣式編碼所要針對的對象屬性：值：屬性的值使用方法：Selector{property1:value1；property2:value2；……….}教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄例如body{background-color:#ffffff;}設(shè)置頁面中<body>標(biāo)簽的背景顏色為白色。教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄ID選擇符ID可以理解為頁面中每一個(gè)標(biāo)簽的標(biāo)識如：<divid=“main”></div>在CSS中，ID選擇符使用”#”號進(jìn)行標(biāo)識，如果需要對ID為main的標(biāo)簽設(shè)置樣式表，可以使用如下格式來書寫：#main{font-size:14px;line-height:20px;background-color:#0F0;width:150px;height:200px;}教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄Class選擇符Class在CSS中使用點(diǎn)符號”.”加上class名稱的形式，class允許重復(fù)使用，頁面中多個(gè)元素都可以使用同一個(gè)class定義。例：.font1{font-size:12px;font-family:宋體;

line-height:40px;}教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄類型選擇符是指以網(wǎng)頁中已有的標(biāo)簽類型作為名稱的選擇符。如：body{background-color:#ffffff;}教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄群組選擇符對一組對象的相同樣式進(jìn)行定義，使頁面中的該組對象具有相同定義。如：h1,h2,h3,p{font-size:12px;font-family:宋體;}教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄包含選擇符當(dāng)要對某一對象中的子對象進(jìn)行樣式定義時(shí)，可以使用包含選擇符，。如：對ID名為main的對象中的li子對象進(jìn)行樣式定義

#mainli{line-height:25px;font-size:12px;font-family:宋體;}應(yīng)用時(shí)<divid=“main”><ul><li>abc</li><li>def</li><li>ghi</li></ul></div>教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄標(biāo)簽指定選擇符P#main{}表示針對所有id為main的p標(biāo)簽。p.font1{}表示針對所有class為font1的p標(biāo)簽。

教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄偽類及偽對象是一種特殊的類和對象，它由CSS自動支持名稱不能被用戶自定義，使用時(shí)只能按標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用。如：P47-48a:hover{background-color:#575757}教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄應(yīng)用CSS到網(wǎng)頁中內(nèi)部樣式表外部樣式表元素中的樣式表教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄內(nèi)部樣式表內(nèi)部樣式表是將定義樣式表的內(nèi)容放在style元素中，并且設(shè)置type屬性為text/css。然后將style元素放在HTML文檔的head元素中。<styletype="text/css">h1{color:red;font-style:italic;}</style>教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄外部樣式表外部樣式表是將定義樣式表的內(nèi)容放在一個(gè)文本文件中，一般都是以.css作為擴(kuò)展名，然后在HTML文檔的head元素中插入link元素，通過下屬格式將外部樣式表文件連接到HTML文檔中：<linkrel="stylesheet"type="text/css"href="外部樣式表文件.css">教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄元素中的樣式表寫在標(biāo)簽中。如<pstyle=“font-family:宋體;font-size:12px;color:#575757”>文本內(nèi)容</p>教學(xué)目的本章要點(diǎn)教學(xué)內(nèi)容本章習(xí)題退出返回目錄常用樣式屬性1．文字2．背景3．邊框線4．高度和寬度5．間距和邊距6．列表7．位置和布局教學(xué)

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論