CSS動態網頁布局_第1頁
CSS動態網頁布局_第2頁
CSS動態網頁布局_第3頁
CSS動態網頁布局_第4頁
CSS動態網頁布局_第5頁
已閱讀5頁，還剩17頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網頁設計與制作

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

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

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論