項目4 CSS樣式基礎_第1頁
項目4 CSS樣式基礎_第2頁
項目4 CSS樣式基礎_第3頁
項目4 CSS樣式基礎_第4頁
項目4 CSS樣式基礎_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目四CSS3基礎了解CSS3，認識CSS常用屬性及使用，學會CSS的引用學習目標Contents目錄任務1任務2任務3CSS3簡介CSS選擇器CSS3的引用任務4CSS3常用屬性任務5CSS3盒子模型1CSS發(fā)展歷程2任務1CSS3簡介什么是CSSCSS語法3任務2CSS選擇器標簽選擇器：標記名稱{屬性:屬性值;屬性:屬性值;···}例：p{text-align:center;color:red;font-size:18px;background:gray;}2.id選擇器：

#id名稱{屬性：屬性值；屬性：屬性值；……}例：#firstname{background-color:yellow;}3.class選擇器：.class名稱{屬性：屬性值；屬性：屬性值；……}例：.bingdd{font-family:黑體;font-size:30px;text-align:center;}任務2CSS選擇器4.偽類選擇器a:link當超鏈接沒被訪問過時,所設置的樣式應用于超鏈接。a:visited當超鏈接已被訪問過時,所設置的樣式應用于超鏈接。a:hover當鼠標指針移動到超鏈接之上時,所設置的樣式應用于超鏈接。a:active當超鏈接被點擊未釋放時,所設置的樣式應用于超鏈接。例：a:link{color:blue;text-decoration:none}a:visited{color:gray;text-decoration:none}a:hover{color:red;text-decoration:underline}a:active{color:purple;text-decoration:none}任務2CSS選擇器5.組選擇器

組選擇器就是多個選擇器使用同一個樣式或者同一組樣式，多個選擇器之間用逗號（,）隔開，其語法形式如下。<選擇器1>,<選擇器2>，<選擇器3>{定義樣式}例h1,h3,p{color:red;font-family:”微軟雅黑”}其表示h1,h2,p選擇器的字體顏色均為紅色，字體為“微軟雅黑”。6.層級選擇器(后代擇器)根據層級關系選擇后代標簽，以選擇器1

選擇器2開頭，主要應用在標簽嵌套的結構中減少命名。后代選擇器用于控制容器對象中的子對象，使其他容器對象中的同名子對象不受影響。書寫后代選擇器時將容器對象寫在前面,子對象寫在后面，中間用空格分隔。若容器對象有多層，則分層依次書寫。.d1.green{color:green}#son.text{color:blue;font-size:25px;}.green{color:red;}7.通配符選擇器：*{屬性:屬性值;屬性:屬性值;……}例：*{margin:0;padding:0}任務3CSS的引用3.1內部引用內部引用只適用于對單個網頁的頁面進行設置。也叫作內嵌式引用。是在head部分的<style>元素中進行定義。其語法格式如下。……<head><styletype="text/css">選擇器1{屬性:屬性值;屬性:屬性值;……}/*注釋內容*/選擇器2{[屬性:屬性值;屬性:屬性值;……}……</style></head> ……任務3CSS的引用3.2外部引用語法格式:……<head><linkhref="外部樣式表文件路徑"rel="stylesheet"type="text/css"></head>……任務3CSS的引用3.3行內引用行內引用也叫作內聯(lián)樣式，就是將樣式信息直接定義在HTML標簽的style屬性中，由于內聯(lián)樣式定義在標簽內部，所以它只對所在的標簽有效任務四CSS3常用屬性4.1背景屬性

網頁可以通過設置背景屬性使網頁變得豐富多彩，設置背景屬性主要包括設置背景顏色、設置背景圖像、設置背景圖像平鋪、設置背景圖像位置等。1.設置背景顏色利用background-color屬性設置一個元素的背景顏色。格式：background-color:顏色值顏色值可以使用以下幾種方式定義：十六進制

-如:"#ff0000"rgba-如:“rgb(255,45,35,1.00)”(r:表示紅色;g表示綠色;b:表示藍色；a:表示透明度取[0-1],例：1表示透明，0.5表示半透明，0表示透明)。顏色名稱

-如:“blue”、“red”、“orange”等。任務四CSS3常用屬性2.設置背景圖像除了可以用背景顏色設置背景屬性外，我們還可以利用background-image屬性設置背景圖像。格式：background-image:url(圖像路徑)*技巧提示：一個文檔中可以同時設置背景圖像和背景顏色，但優(yōu)先顯示背景圖像，只有當背景圖像沒有鋪滿文檔時，才會用背景顏色補上。3.設置背景圖像平鋪默認情況下，背景圖像會自動沿著水平和豎直兩個方向平鋪。通過background-repeat屬性可以控制平鋪的方向以及平鋪或者不平鋪。該屬性的取值如下。repeat：默認值，設置背景圖像在垂直方向和水平方向平鋪(完全平鋪)。repeat-x：設置背景圖像在水平方向平鋪。repeat-y：設置背景圖像在垂直方向平鋪。no-repeat：設置背景圖像不平鋪（圖像位于元素的左上角，僅顯示一次）。利用background-position屬性控制背景圖片的位置，background-position屬性設置兩個屬性值，兩個屬性值之間用空格隔開，用于定義背景圖像在頁面的水平方向和垂直方向的位置。例如，“l(fā)eftbottom”表示背景圖像水平方向位于左側，垂直方向位于下方。background-position屬性接受三種值：關鍵詞：水平方向關鍵詞為left、center、right;垂直方向關鍵詞為top、center、bottom。兩個關鍵詞的順序任意。若只有一個關鍵詞，缺省的另一個關鍵詞默認是center。例如“background-position:bottom”等價于“background-position:centerbottom”長度值：如px。百分值：%。通過百分比數(shù)值將背景圖像與元素的指定點對齊。其中，“0%0%”表示圖像的左上角與元素的左上角對齊；“100%100%”表示圖像的右下角與元素的右下角對齊；“50%50%”表示圖像的50%50%與元素的50%50%對齊。4.設置背景圖像的位置固定背景圖像，就是當我們在頁面輸入任何內容時或者移動鼠標，背景圖像都不會發(fā)生變動。利用background-attachment屬性可以設置背景圖像的固定。其值有兩個：scroll和fixed。scroll(默認值):圖像隨頁面一起滾動。fixed:圖像固定在屏幕上，不隨頁面滾動。4.設置背景圖像的固定任務四CSS3常用屬性4.2文本屬性text-align屬性text-decoration屬性text-indent屬性line-height屬性text-shadow屬性任務四CSS3常用屬性4.3字體屬性font-family屬性font-size屬性.font-style屬性font-variant屬性font-weight屬性font屬性4.4多媒體對象除了文本和圖片以外，在網頁中還可以插入音頻、視頻、動畫等多媒體對象，以獲得豐富的視覺體驗，給觀眾帶來全新的感受。任務四CSS3常用屬性1.使用<video>標簽為頁面添加視頻屬性值功能srcurl指定視頻播放的地址autoplayautoplay用于設置視頻是否自動播放,有autoplay屬性，表示自動播放，去掉autoplay屬性表示不自動播放controlscontrols出現(xiàn)該屬性，則需要瀏覽器啟動播放控制欄，播放控制欄包括播放、暫停、音量控制等looploop用于指定視頻是否循環(huán)播放，出現(xiàn)該屬性，表示循環(huán)播放；不出現(xiàn)，則不循環(huán)播放posterurl用于指定一張圖片，在當前視頻數(shù)據正在加載,或者是視頻地址錯誤等等時顯示這張圖片（也叫作預覽圖）preloadnone、metadata、auto定義視頻是否預加載。None:表示不加載；metadata:表示部分預加載；auto(默認值):全部加載mutedmuted設置視頻的音頻輸出應該被靜音widthpx設置視頻的寬度heightpx設置視頻的高度任務四CSS3常用屬性4.3字體屬性font-family屬性font-size屬性.font-style屬性font-variant屬性font-weight屬性font屬性4.4多媒體對象除了文本和圖片以外，在網頁中還可以插入音頻、視頻、動畫等多媒體對象，以獲得豐富的視覺體驗，給觀眾帶來全新的感受。任務四CSS3常用屬性1.使用<video>標簽為頁面添加視頻屬性值功能srcurl指定視頻播放的地址autoplayautoplay用于設置視頻是否自動播放,有autoplay屬性，表示自動播放，去掉autoplay屬性表示不自動播放controlscontrols出現(xiàn)該屬性，則需要瀏覽器啟動播放控制欄，播放控制欄包括播放、暫停、音量控制等looploop用于指定視頻是否循環(huán)播放，出現(xiàn)該屬性，表示循環(huán)播放；不出現(xiàn)，則不循環(huán)播放posterurl用于指定一張圖片，在當前視頻數(shù)據正在加載,或者是視頻地址錯誤等等時顯示這張圖片（也叫作預覽圖）preloadnone、metadata、auto定義視頻是否預加載。None:表示不加載；metadata:表示部分預加載；auto(默認值):全部加載mutedmuted設置視頻的音頻輸出應該被靜音widthpx設置視頻的寬度heightpx設置視頻的高度語法格式<videosrc=“視頻文件路徑”controls=“controls”></video>4.4多媒體對象任務四CSS3常用屬性2.使用audio標記符插入音頻屬性值功能srcurl指定音頻播放的地址autoplayautoplay用于設置音頻是否自動播放,有autoplay屬性，表示自動播放，去掉autoplay屬性表示不自動播放controlscontrols出現(xiàn)該屬性

溫馨提示

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

評論

0/150

提交評論