《網頁設計與 Web 前端開發(fā)》課件 第3章 使用CSS3樣式表_第1頁
《網頁設計與 Web 前端開發(fā)》課件 第3章 使用CSS3樣式表_第2頁
《網頁設計與 Web 前端開發(fā)》課件 第3章 使用CSS3樣式表_第3頁
《網頁設計與 Web 前端開發(fā)》課件 第3章 使用CSS3樣式表_第4頁
《網頁設計與 Web 前端開發(fā)》課件 第3章 使用CSS3樣式表_第5頁
已閱讀5頁，還剩46頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網頁設計與Web前端開發(fā)案例教程第3章使用CSS3樣式表CONTENT目錄初識CSS樣式表01盒模型02列表標簽及樣式03元素分類及轉換04CSS常用屬性05選擇器高級06CSS繼承與優(yōu)先07常用CSS3屬性0801初識CSS樣式表W3C制定層疊樣式表W3C與CSS的誕生W3C于1997年公布HTML4.0時，同步推出CSS1.0標準，正式確立層疊樣式表規(guī)范，開啟網頁結構與表現分離的新紀元。CSS版本演進歷程1998年發(fā)布CSS2.0完善基礎功能，2001年啟動CSS3模塊化開發(fā)，2011年成為推薦標準，持續(xù)新增特性并向下兼容，奠定現代網頁設計基石。CSS核心設計理念通過選擇器定位HTML元素，屬性值對定義視覺表現，支持多樣式層疊規(guī)則，實現單一修改全局生效的高效樣式管理機制。結構樣式分離原理12結構與樣式分離概念CSS實現網頁結構與樣式分離，HTML定義結構，CSS負責外觀表現，便于統(tǒng)一管理和修改樣式。結構樣式分離優(yōu)勢結構樣式分離使網頁維護更高效，更改樣式時無需改動HTML結構，提升開發(fā)效率與代碼可讀性。第一個CSS案例231CSS控制網頁外觀通過CSS設置文字顏色、背景顏色及段落首行縮進，使用

<style>標簽定義樣式，如color和background-color屬性。CSS基本語法結構CSS樣式由選擇器、屬性和屬性值組成，如p{text-indent:2em;}，練習：編寫CSS規(guī)則設置段落字體大小為16px。CSS創(chuàng)建方法比較內部樣式表使用<style>標簽，在<head>…</head>中定義，鏈入外部樣式表通過<link>標簽實現，導入外部樣式表使用@import規(guī)則，各有適用場景。多種選擇器的使用組合選擇器CSS3中“,”是組合選擇器，把相同屬性和值的選擇器組合起來書寫，這樣可以減少樣式重復定義后代選擇器CSS3中“”（空格）為后代選擇器，可以選擇作為某元素后代的元素，它允許根據文檔的上下文關系來確定某個標簽的樣式。類選擇器CSS3中“.”是類選擇器，定義類選擇器時，在自定類的名稱前面加一個點號。類選擇器的引用很簡單，只需在標志后面設置class屬性值為類選擇器名即可。id選擇器CSS3中“#”是id選擇器，定義id選擇器時，在自定id的名稱前面加一個井號。id選擇器的引用和類選擇器類似，只要把class換成id即可。02盒模型盒模型的概念盒模型基礎概念CSS中所有元素均可視為盒模型，由外邊距、邊框、內邊距和內容組成，是布局的基礎。盒模型組成部分外邊距用于間隔盒子，邊框增強視覺效果，內邊距控制內容與邊框間距，內容為核心區(qū)域。盒模型應用示例通過CSS設置div的盒模型屬性，如寬度、高度、邊框等，實現特定布局效果，可借助開發(fā)者工具調試。背景屬性作用010203盒模型背景作用背景設置作用于邊框以內區(qū)域，外邊距透明顯示父元素背景，合理利用可提升頁面美觀度與用戶體驗。背景增強視覺效果通過設置背景顏色等屬性，能增強盒子視覺效果，讓頁面元素更具辨識度，優(yōu)化整體視覺感受。背景與布局關聯(lián)背景的呈現與盒模型其他部分相互配合，影響頁面布局，需綜合考慮以實現合理美觀的頁面設計。寬度和高度計算方法010203盒模型尺寸構成盒子總寬度和高度由外邊距、邊框、內邊距及內容區(qū)域共同決定，需綜合計算各部分尺寸以確保布局準確。寬度計算實例如設置margin10px、border1px、padding10px、width100px，盒子總寬度為100+2×10+2×1+2×10=142px。高度計算要點高度計算同寬度，需將內容高度與上下內邊距、邊框及外邊距相加，精準把控實現合理頁面布局。瀏覽器開發(fā)者工具使用010203開發(fā)者工具功能瀏覽器開發(fā)者工具可查看盒模型參數，直觀了解盒子尺寸與布局，助于調試CSS布局問題。查看盒模型示例以Chrome為例，能查看div盒子模型各部分尺寸及布局效果，明確盒模型在實際頁面呈現。工具輔助學習開發(fā)者工具是學習CSS布局有力助手，可快速定位盒模型相關問題并解決，提升開發(fā)效率。樣式初始化瀏覽器默認樣式差異不同瀏覽器對元素的默認樣式不同，如自帶內外邊距，影響布局兼容性?；A初始化方案使用通配符“*”統(tǒng)一重置所有元素內外邊距為0，可解決兼容性問題?；A初始化缺點全局匹配所有元素重置樣式，會影響渲染性能，降低頁面加載速度。推薦初始化方案指定常用標簽如body、p、h1、ul等，精準控制樣式，平衡效率與兼容性。邊框屬性邊框屬性定義邊框屬性是CSS中用于設置元素邊框的復合屬性，可同時定義寬度、樣式和顏色，簡化邊框設置。復合寫法特點復合寫法將邊框寬度、樣式和顏色合并為一個聲明，順序可互換，簡化代碼并提高開發(fā)效率。單獨寫法優(yōu)勢單獨寫法分別設置邊框的寬度、樣式和顏色，增強代碼可讀性，便于調試和維護復雜樣式。復合寫法123復合寫法概念邊框屬性可將寬度、樣式和顏色合并為一個聲明，順序可互換，簡化代碼，提高開發(fā)效率。復合寫法案例如border:5pxdottedblue;設置邊框寬度為5px，樣式為點線，顏色為藍色，簡潔高效。復合寫法優(yōu)勢復合寫法使代碼更簡潔，減少冗余，但需注意屬性值的順序和語法，避免錯誤。單獨寫法單獨寫法概念邊框屬性可單獨設置寬度、樣式和顏色，增強代碼可讀性，便于調試維護，適合復雜樣式場景。單獨寫法案例如border-width:5px;border-style:dotted;border-color:blue;分別定義邊框各屬性，清晰明確。單獨寫法優(yōu)勢使代碼結構更清晰，各屬性一目了然，在處理不同邊框需求時，能精準定位和修改，提高開發(fā)效率。內邊距屬性213內邊距的定義內邊距控制盒子中邊框與內容的距離，影響元素顯示效果。設置padding可調整內部空間，優(yōu)化布局。內邊距的取值內邊距可取長度值或百分比值，長度值精確控制間距，百分比值靈活適應不同尺寸。內邊距的定義方式可分別定義四個方向的內邊距，實現復雜布局需求；也可匯總定義，簡化代碼。外邊距屬性1·2·3·外邊距的定義外邊距控制盒子間距，定義邊框外區(qū)域，可調整元素間空間，優(yōu)化布局。外邊距的取值外邊距可取長度值、百分比或auto，靈活控制間距，滿足不同布局需求。外邊距的定義方式可分別定義四方向外邊距，或匯總定義，簡化代碼，實現復雜布局。外邊距特殊行為020301外邊距的auto值auto值使外邊距自動分配，常用于水平居中。如margin:0auto;可讓寬度已知的塊元素水平居中，是布局常用技巧。外邊距合并特性垂直方向相鄰塊元素的外邊距會合并，取較大值。例如兩個相鄰塊元素外邊距分別為10px和20px，最終間距為20px。負外邊距應用外邊距可取負值，能使元素重疊，實現特殊布局效果。如margin-top:-20px;可讓元素向上移動20像素與其他元素重疊。外邊距合并垂直相鄰的兄弟元素當兩個盒子相鄰時，在垂直方向上外邊距相遇時，它們將形成一個外邊距，即發(fā)生外邊距合并?？諌K元素空的塊級元素若border、padding等不存在，其上下外邊距會合并。塊級父與子元素塊級父元素與其第一個/最后一個子元素間，在特定條件下會發(fā)生外邊距合并。03列表標簽及樣式無序列表創(chuàng)建與樣式設置1·2·3·無序列表創(chuàng)建基礎無序列表由<ul>和<li>標簽構建，用于展示無順序關系的內容項，如商品分類或待辦事項。項目符號樣式設置通過list-style-type屬性定義項目符號樣式，支持圓點、方塊等預設類型，可增強列表視覺表現。列表交互實踐應用在案例中創(chuàng)建商品分類列表，可通過修改CSS屬性嘗試不同符號類型，強化樣式設置技能。有序列表創(chuàng)建與樣式設置有序列表創(chuàng)建使用<ol>和<li>標簽構建有序列表，通過list-style-type屬性設置編號類型，如大寫羅馬數字。樣式設置方法可通過CSS屬性list-style-type調整編號樣式，支持阿拉伯數字、英文字母等多種類型，滿足不同展示需求?；訉嵺`環(huán)節(jié)嘗試修改編號起始值及類型，觀察列表樣式變化，加深對有序列表樣式控制的理解與應用能力。定義列表創(chuàng)建與樣式設置定義列表創(chuàng)建使用<dl>、<dt>和<dd>標簽創(chuàng)建定義列表，<dt>定義項目，<dd>提供說明。定義列表樣式設置通過CSS設置定義列表的樣式，如字體、顏色等，提升頁面美觀度。定義列表應用案例創(chuàng)建一個解釋HTML列表類型的定義列表，并為其添加合適的樣式。04元素分類及轉換塊元素特征及應用132塊元素特征塊元素獨占一行，支持寬高屬性，通過display:block;設置。塊元素應用使用<div>創(chuàng)建塊元素，可設置寬度和高度，控制頁面布局。轉換示例將塊元素轉換為行內元素，需用display:inline;實現樣式調整。行內元素特征及應用行內元素特征行內元素在同一行顯示，不支持寬高屬性，通過display:inline;設置。行內元素應用使用<span>標簽創(chuàng)建行內元素，可設置字體顏色等樣式。元素類型轉換行內元素與塊元素可相互轉換，調整布局和樣式表現。010302行內塊元素特征及應用行內塊元素特征行內塊元素在同一行顯示，支持寬高屬性，可通過display:inline-block;設置。行內塊元素應用使用<img>標簽創(chuàng)建行內塊元素，可設置寬度和高度，調整外邊距和內邊距。行內塊元素案例通過實際案例展示行內塊元素的創(chuàng)建與樣式設置，如圖片的寬高調整。05CSS常用屬性背景屬性設置背景屬性設置通過background-color、background-image等屬性，可設置元素的背景顏色與圖片。利用background-repeat控制圖片平鋪方式，實現多樣化背景效果。背景圖片應用使用background-image引入外部圖片資源，結合background-position調整圖片位置。設置background-size適配不同尺寸屏幕，增強視覺表現力。復合背景管理通過background簡寫屬性統(tǒng)一設置多層背景，調整各層疊加順序。利用透明度設置實現漸變效果，打造立體化視覺層次。010203字體屬性設置1·2·3·字體屬性基礎字體屬性包括font-family、font-size等，用于設置文本的字體和大小，通過CSS實現網頁文字樣式的定制。字體樣式調整利用font-weight設置文本粗細，font-style實現斜體效果，靈活調整字體樣式，增強網頁文字表現力。字體繼承特性子元素可繼承父元素的字體屬性，如字體和顏色，便于統(tǒng)一網頁風格，減少重復樣式定義的工作量。文本屬性設置010203文本屬性設置通過CSS設置文本對齊、縮進和裝飾，如使用text-align控制對齊方式，text-indent實現首行縮進，text-decoration添加下劃線或刪除線。文本屬性案例創(chuàng)建段落展示text-align實現居中對齊，text-indent設置首行縮進兩字符，text-decoration為鏈接添加下劃線，提升文本可讀性。交互實踐修改CSS代碼改變文本對齊方式，調整縮進值觀察效果，嘗試不同text-decoration樣式，實時預覽頁面變化，加深屬性理解。指針光標010203指針光標定義CSS中cursor屬性用于定義鼠標指針形狀，增強用戶體驗，如懸停鏈接時變手形。常用指針值default為默認箭頭，pointer為手形，wait為等待狀態(tài)，適用于不同場景。高級用法可自定義光標圖像，支持多值按優(yōu)先級顯示，還有調整大小方向的光標。06選擇器高級子元素選擇器子元素選擇器定義子元素選擇器使用>符號，用于精準選取某元素的直接子元素，實現樣式的精確控制。子元素選擇器案例通過h3>strong選擇器，將<h3>標簽內<strong>元素的文本顏色設為紅色，展示選擇器應用。子元素選擇器互動嘗試選擇不同元素的子元素并設置樣式，如改變<div>子元素<p>的背景色，實踐選擇器使用。相鄰元素選擇器132相鄰元素選擇器用于選擇緊鄰特定元素的兄弟元素，通過+符號實現。如div+p表示選緊鄰div后的第一個p元素。案例與互動案例展示選擇div后第一個p元素并設背景色，互動環(huán)節(jié)嘗試選其他相鄰元素設置樣式。選擇器作用可精準控制頁面布局中相鄰元素的樣式，避免全局選擇影響，提升樣式定義準確性。關聯(lián)元素選擇器010203關聯(lián)元素選擇器概念關聯(lián)元素選擇器用于選擇某元素后的所有同級兄弟元素，通過~符號實現，可快速為特定組元素設置相同樣式。關聯(lián)元素選擇器案例如選擇div后的所有p元素，設置背景顏色為黃色，能精準定位并統(tǒng)一修改符合條件元素的樣式，提升效率。關聯(lián)元素選擇器互動嘗試選擇其他關聯(lián)元素并設置樣式，如改變文字顏色等，加深對選擇器應用的理解，靈活運用于頁面布局。屬性選擇器010203屬性選擇器基礎基于HTML元素屬性及值進行選擇，如[title]選有該屬性的元素，提供靈活多樣的選擇方式，精準控制樣式。常見屬性選擇器類型包括基于屬性存在、值精確匹配、值包含、值前綴等選擇器，適用于不同場景，滿足多種樣式設置需求。屬性選擇器綜合應用結合多種屬性選擇器，可應對復雜樣式需求，精準控制頁面元素樣式，實現多樣化設計效果。偽類選擇器偽類概述偽類基于元素特殊狀態(tài)選擇，以冒號:開頭，用于控制鏈接不同狀態(tài)樣式，增強交互體驗。錨偽類a:link、a:visited、a:hover、a:active分別對應鏈接未訪問、已訪問、懸停和激活狀態(tài)，可設不同樣式。通用偽類:active、:hover通用偽類適用于所有元素，:focus適用于擁有鍵盤輸入焦點的元素，為元素激活、懸浮或焦點狀態(tài)提供樣式控制。偽元素選擇器Part01Part03Part02首字母和首行偽元素通過p::first-letter和p::first-line實現首字母放大、首行變紅等效果，僅對塊級元素生效。::before和

::after偽元素使用::before/::after配合content屬性添加前后綴，結合display:block轉換塊級元素，可創(chuàng)意應用于圖標裝飾。偽元素綜合應用挑戰(zhàn)按鈕懸浮提示框實現，對比偽元素與額外HTML標簽優(yōu)劣，討論技術選型策略。07CSS繼承與優(yōu)先CSS樣式繼承020301CSS樣式繼承概念子元素可繼承父元素的部分樣式，如字體、文本顏色等，實現樣式的快速統(tǒng)一與復用。繼承案例演示設置的字體樣式，其子元素自動繼承，直觀展現CSS樣式繼承的效果?？衫^承屬性除字體外，文本顏色等也是可繼承屬性，合理運用能提升網頁樣式的一致性。選擇器優(yōu)先級1·2·3·選擇器優(yōu)先級順序選擇器優(yōu)先級遵循id>class>tag>*規(guī)則，可通過!important提升特定樣式優(yōu)先級。多元素組合選擇器的優(yōu)先級首要的原則是控制對象的精準度。當控制的精準度相同時，id個數越多的優(yōu)先級越高。class個數越多的優(yōu)先級越高。tagName（標簽名）個數越多的優(yōu)先級越高。后定義的樣式覆蓋前面定義的樣式。優(yōu)先級實戰(zhàn)應用在控制對象的精度相同的情況下，#wrap

ul

li

.list{}

和.wrap

ul

li

#list{}優(yōu)先級一樣。樣式優(yōu)先級123HTML與CSS的優(yōu)先級當HTML與CSS樣式有沖突時，瀏覽器按CSS樣式中定義的屬性來顯示。就近原則在不考慮選擇器優(yōu)先級的情況下，瀏覽器一般按照與該元素關系遠近來顯示，這可以簡單地稱之為就近原則。樣式定義優(yōu)先級內聯(lián)樣式表>內部樣式表>外部樣式表，可借!important調整。08常用CSS3屬性@font-face

規(guī)則@font-face規(guī)則概述CSS3的@font-face規(guī)則允許開發(fā)者自定義字體，突破用戶設備預裝字體限制，使網頁設計更靈活，增強個性化。@font-face規(guī)則語法@font-face規(guī)則需指定字體名稱和文件路徑，如{font-family:'MyFont';src:url('myfont.eot’);}支持多種格式。@font-face使用步驟使用@font-face需獲取字體文件、編寫規(guī)則、應用字體，通過font-family在CSS選擇器中使用，實現自定義字體

溫馨提示

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

最新文檔

評論

0/150

提交評論