HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第2版） 課件 單元3 CSS基本應(yīng)用_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第2版） 課件 單元3 CSS基本應(yīng)用_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第2版） 課件 單元3 CSS基本應(yīng)用_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第2版） 課件 單元3 CSS基本應(yīng)用_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第2版） 課件 單元3 CSS基本應(yīng)用_第5頁
已閱讀5頁，還剩44頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

CSS基本應(yīng)用單元3目錄02CSS元素選擇器的使用03內(nèi)聯(lián)式、嵌入式、外部式樣式的使用01使用CSS設(shè)置body樣式04測(cè)試樣式優(yōu)先級(jí)05創(chuàng)建盒子模型06CSS中float屬性的使用07常用文本樣式屬性的使用08常用圖片樣式屬性的使用09position的4種定位方式的使用10Chrome瀏覽器調(diào)試基本技巧3-1HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第二版）使用CSS設(shè)置body樣式任務(wù)3-1使用CSS設(shè)置body樣式任務(wù)3-1使用CSS設(shè)置body樣式CSS是CascadingStyleSheets的縮寫，即層疊樣式表，在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)中，CSS負(fù)責(zé)網(wǎng)頁內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、字體顏色、元素位置等。CSS基本語法：selector{declaration1;declaration2;...declarationN}/*這里是注釋*/body選擇器是CSS中的基礎(chǔ)選擇器，用于對(duì)整個(gè)文檔進(jìn)行全局樣式的設(shè)置。我們可以通過在CSS文件中為body元素添加樣式來改變整個(gè)頁面的風(fēng)格。我們?cè)O(shè)置了背景顏色、字體、字號(hào)和字體顏色。這些樣式將應(yīng)用于整個(gè)文檔的body元素。另外，我們也可以為body元素設(shè)置其他樣式，如邊距、邊框和填充等。這些樣式可以讓網(wǎng)頁的布局更加美觀和整潔。CSS代碼需要放在CSS文件或者<style>標(biāo)簽內(nèi)，如果放在獨(dú)立的CSS文件內(nèi)，則頁面需要調(diào)用：<linkrel="stylesheet"type="text/css"href="css/style.css"/>css/style.css為CSS文件存放的地址。任務(wù)3-1使用CSS設(shè)置body樣式1、background-color:背景顏色，background-image:背景圖像，background-repeat:背景重復(fù)，background-position:背景圖像位置，background-attachment:如何設(shè)置固定的背景圖像。2、margin:外邊距，此處是指頁邊距，margin:20px（上、下、左、右各20px）;margin:20px40px（上、下20px；左、右40px）;margin:20px40px60px（上20px；左、右40px；下60px）;margin:20px40px60px80px（上20px；右40px；下60px；左80px）。3、font-size:字體大小。4、color:字體顏色，如果采用6位16進(jìn)制數(shù)，前面需要加上”#”，注意字體顏色不是font-color。5、font-family:ComicSansMS,"微軟雅黑";先寫英文字體，再寫中文字體，會(huì)優(yōu)先匹配英文字體，但是在英文字體中找不到中文字符，這樣中文就會(huì)自動(dòng)使用后寫的中文字體了。6、line-height:文本行高，一般采用em單位，1em代表一倍行距。3-2HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第二版）CSS元素選擇器的使用1234CSS選擇器標(biāo)簽選擇器所謂標(biāo)簽選擇器就是使用已有的HTML代碼中的標(biāo)簽作為名稱的選擇器。例如：{font-size:12px;color:white;}類選擇器為標(biāo)簽設(shè)置“class=CLASS名稱”，類選擇器定義時(shí)以“.”開頭。格式為：.類選器名稱{CSS樣式代碼；}通用選擇器(通配選擇器)

指的是當(dāng)前頁面上的所有標(biāo)簽都應(yīng)用該樣式

*{color:red;}

指所有元素,優(yōu)先級(jí)非常低,

性能低

*{margin:0;padding:0}是指將所有元素的內(nèi)外間距去除

ID選擇器

即標(biāo)記選擇器，為標(biāo)簽設(shè)置“id=ID名稱”，ID選擇器定義時(shí)以“#”開頭，ID選擇器在一個(gè)HTML文件中只能使用一次。格式為：#ID選擇器名稱{CSS樣式代碼}任務(wù)3-2CSS元素選擇器的使用〓

基礎(chǔ)選擇器1、組合選擇器：也稱為分組選擇器，或并集選擇器，用“,”將需要設(shè)置相同樣式的多個(gè)選擇器組合起來就構(gòu)成了組合選擇器。h1,p{background-color:yellow;}2、交集選擇器：兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為類選擇器或ID選擇器，兩個(gè)選擇器之間沒有空格。p.hometown{background-color:yellow;}3、后代選擇器：也稱為包含選擇器，即在選擇器之間加入空格，用于選擇指定選擇器的后代元素，后面元素是前面元素的后代元素，是一種從屬關(guān)系。divp{background-color:yellow;}任務(wù)3-2CSS元素選擇器的使用〓

復(fù)合選擇器4、子元素選擇器：用來選擇元素的子元素，父級(jí)標(biāo)簽寫前面，子級(jí)標(biāo)簽寫后面，中間跟一個(gè)“>”進(jìn)行連接，符號(hào)左右兩側(cè)各保留一個(gè)空格。div>p{background-color:yellow;}5、兄弟選擇器：是CSS3.0新增的一個(gè)選擇器，分別使用“~”或者“+”連接兩個(gè)元素，其中“~”表示某元素后所有同級(jí)的指定元素，強(qiáng)調(diào)所有的?！?”表示某元素后相鄰的兄弟元素，也就是緊挨著的，是單個(gè)的。div+p{background-color:yellow;}6、屬性選擇器：是選取標(biāo)簽帶有某些特殊屬性的選擇器，使用[]括起來，一般用于<form>標(biāo)簽中的<input>標(biāo)簽。如input[type=”text”]表示type屬性值為text的<input>標(biāo)簽。a[target=_blank]{background-color:yellow;}任務(wù)3-2CSS元素選擇器的使用〓

復(fù)合選擇器偽類選擇器：用于向某些選擇器添加特殊的效果。以“:”開頭，分為鏈接偽類、結(jié)構(gòu)偽類等。a:link{color:#FF0000;}/*未訪問的鏈接*/a:visited{color:#00FF00;}/*已訪問的鏈接*/a:hover{color:#FF00FF;}/*鼠標(biāo)劃過鏈接*/a:active{color:#0000FF;}/*已選中的鏈接*/任務(wù)3-2CSS元素選擇器的使用〓

偽類選擇器3-3HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第二版）內(nèi)聯(lián)式、嵌入式、外部式樣式的使用任務(wù)3-3內(nèi)聯(lián)式、嵌入式、外部式樣式的使用內(nèi)聯(lián)式：把CSS代碼直接作為標(biāo)簽的style屬性的內(nèi)容寫在現(xiàn)有的HTML標(biāo)簽

（如p,span...）中，如：<pstyle="color:red;font-size:12px;">表示這個(gè)段落中的文字大小是12像素，字體顏色是紅色。嵌入式：也稱作內(nèi)部樣式表，把CSS樣式寫在標(biāo)簽<styletype="text/css"></style>之間，并且一般情況下嵌入式CSS樣式寫在<head></head>之間。外部式：把CSS代碼寫在一個(gè)單獨(dú)的外部文件中存放在根目錄的CSS文件夾下面，這個(gè)CSS樣式文件以“.css”為擴(kuò)展名，在<head>標(biāo)簽內(nèi)使用<link>標(biāo)簽將CSS樣式文件鏈接到HTML文件內(nèi)：

<linkhref="style.css"rel="stylesheet"type="text/css"/>一般外部式的樣式文件名字為style.css。.任務(wù)3-3內(nèi)聯(lián)式、嵌入式、外部式樣式的使用CSS三種使用方法40%15%15%20%20%3-4HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第二版）測(cè)試樣式優(yōu)先級(jí)任務(wù)3-4測(cè)試樣式優(yōu)先級(jí)任務(wù)3-4測(cè)試樣式優(yōu)先級(jí)通常我們可以將CSS的優(yōu)先級(jí)由高到低分為六組：1、無條件優(yōu)先的屬性只需要在屬性后面使用!important。它會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式。2、第二高位的優(yōu)先屬性是在HTML中給元素標(biāo)簽加style。由于該方法會(huì)造成CSS的難以管理，所以不推薦使用。3、第三級(jí)優(yōu)先的屬性是由一個(gè)或多個(gè)id選擇器來定義的。例如#id{margin:0;}會(huì)覆蓋.classname{margin:3px;}。4、第四級(jí)的屬性由一個(gè)或多個(gè)類選擇器、屬性選擇器、偽類選擇器定義。例如.classname{margin:3px;}會(huì)覆蓋div{margin:6px;}5、第五級(jí)由一個(gè)或多個(gè)類型選擇器定義。例如div{margin:6px;}覆蓋*{margin:10px;}。6、最低一級(jí)的選擇器是為一個(gè)通配選擇器，用*{margin:10px;}這樣的類型來定義。CSS優(yōu)先級(jí)的優(yōu)先順序!important>內(nèi)聯(lián)樣式>ID選擇器>類選擇器=屬性選擇器=偽類選擇器>標(biāo)簽選擇器=偽元素選擇器>通配選擇器。3-5HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第二版）創(chuàng)建盒子模型任務(wù)3-5創(chuàng)建盒子模型1、內(nèi)容（content）：內(nèi)容包括了文本，塊狀盒子，圖片，內(nèi)容盒子的盒模型等等。2、內(nèi)邊距（padding）：內(nèi)邊距規(guī)定了內(nèi)容與邊框之間的填充距離。3、邊框（border）：border默認(rèn)為0；可以設(shè)置邊框樣式。4、外邊距（margin）：外邊距規(guī)定了盒子與盒子之間的距離，因此它不會(huì)被計(jì)算到盒子的總體寬度和高度之中，盒子內(nèi)的盒子的外邊距則會(huì)影響父級(jí)元素的寬度和高度。5、元素框的總寬度=內(nèi)容（content）的width+padding的左邊距和右邊距的值+margin的左邊距和右邊距的值+border的左右寬度。6、元素框的總高度=內(nèi)容（content）的height+padding的上下邊距的值+margin的上下邊距的值＋border的上下寬度。3-6HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第二版）CSS中float屬性的使用任務(wù)3-6CSS中float屬性的使用任務(wù)3-6CSS中float屬性的使用我們可以給<div>設(shè)置float屬性，讓塊元素轉(zhuǎn)變?yōu)樾性?，?shí)現(xiàn)兩個(gè)塊元素并排顯示。float是CSS屬性，它可以讓元素“浮動(dòng)”到其容器的左側(cè)或右側(cè)。當(dāng)一個(gè)元素設(shè)置了float屬性后，它就會(huì)向左或向右移動(dòng)，直到碰到父容器或另一個(gè)浮動(dòng)元素的邊緣為止。float屬性的值有：1.none：元素將保持其原始位置，不會(huì)受到影響。2.left：元素將向左移動(dòng)，直到達(dá)到其最近的無邊邊距元素或文檔流中的其他元素。3.right：元素將向右移動(dòng)，直到達(dá)到其最近的無邊邊距元素或文檔流中的其他元素。4.top：元素將向上移動(dòng)，直到達(dá)到其最近的無邊邊距元素或文檔流中的其他元素。5.bottom：元素將向下移動(dòng)，直到達(dá)到其最近的無邊邊距元素或文檔流中的其他元素。6.inline-block：元素將轉(zhuǎn)換為一個(gè)內(nèi)聯(lián)塊元素，其寬度將根據(jù)其寬度值自動(dòng)調(diào)整。7.inline：元素將保持其原始位置，但將被視為一個(gè)內(nèi)聯(lián)行元素。8.float：元素將浮起來，直到達(dá)到其最近的無邊邊距元素或文檔流中的其他元素。3-7HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第二版）常用文本樣式屬性的使用任務(wù)3-7常用文本樣式屬性的使用〓<div>居中margin-left:auto;margin-right:auto;設(shè)置div左右居中任務(wù)3-7常用文本樣式屬性的使用〓

文字左右居中text-align:center;設(shè)置文字左右居中任務(wù)3-7常用文本樣式屬性的使用〓

文字上下居中如果只有一行文字，可通過設(shè)置塊狀元素的高度屬性height與文本的行高屬性line-height的屬性值相等實(shí)現(xiàn)任務(wù)3-7常用文本樣式屬性的使用〓CSS3文本陰影文本設(shè)置陰影使用text-shadow屬性，其使用格式為：text-shadow:h-shadowv-shadowblurcolor;h-shadow表示水平陰影的位置，允許負(fù)值；v-shadow表示垂直陰影的位置，允許負(fù)值；blur表示陰影模糊的距離；color表示陰影的顏色。任務(wù)3-7常用文本樣式屬性的使用〓

自定義字體在CSS3之前，WEB設(shè)計(jì)師必須使用已在用戶計(jì)算機(jī)上安裝好的字體。通過CSS3WEB設(shè)計(jì)師可將喜歡的字體文件存放到WEB服務(wù)器上，它會(huì)在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)上。這種字體我們稱之為自定義字體，是在CSS3@font-face規(guī)則中定義的。其使用的語法格式為：@font-face{font-family:<YourWebFontName>;src:<source>[<format>][,<source>[<format>]]*;[font-weight:<weight>];[font-style:<style>];}任務(wù)3-7常用文本樣式屬性的使用〓

遠(yuǎn)程調(diào)用字體引入<linkhref="/css?family=Condiment"rel="stylesheet"type="text/css">代表遠(yuǎn)程調(diào)用Condiment字體3-8HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第二版）常用圖片樣式屬性的使用任務(wù)3-8常用圖片樣式屬性的使用〓border-radius屬性CSS3border-radius指定每個(gè)圓角如果你在border-radius屬性中只指定一個(gè)值，那么將生成4個(gè)圓角。但是，如果你要在四個(gè)角上一一指定，可以使用以下規(guī)則：四個(gè)值：第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角。三個(gè)值：第一個(gè)值為左上角,第二個(gè)值為右上角和左下角，第三個(gè)值為右下角。兩個(gè)值：第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角。一個(gè)值：四個(gè)圓角值相同。任務(wù)3-8常用圖片樣式屬性的使用〓border-radius屬性任務(wù)3-8常用圖片樣式屬性的使用〓border-radius屬性漸變屬性是實(shí)現(xiàn)漸變效果的重要方式，其中包括線性漸變、徑向漸變和重復(fù)漸變。線性漸變：在線性漸變過程中，起始顏色會(huì)沿著一條直線按順序過渡到結(jié)束顏色。基本語法為bacground-image：linear-gradient（漸變角度，起始顏色，結(jié)束顏色）。徑向漸變：在徑向漸變過程中，起始顏色會(huì)從一個(gè)中心點(diǎn)開始，依據(jù)橢圓或圓形形狀進(jìn)行擴(kuò)張漸變?；菊Z法為：background-image：radial-gradient（漸變形狀圓心位置，起始顏色，結(jié)束顏色）。任務(wù)3-8常用圖片樣式屬性的使用〓CSS3漸變?nèi)蝿?wù)3-8常用圖片樣式屬性的使用〓border-radius屬性CSS濾鏡（CSSfilters）是一種CSS屬性，它可以應(yīng)用于元素的可視呈現(xiàn)，用于實(shí)現(xiàn)各種視覺效果和圖像處理效果。濾鏡屬性允許你修改元素的外觀，如調(diào)整亮度、對(duì)比度、模糊度等。以下是一些常用的CSS濾鏡屬性：1、blur()：給元素添加模糊效果。2、brightness()：調(diào)整元素的亮度。3、contrast()：調(diào)整元素的對(duì)比度。4、grayscale()：將元素轉(zhuǎn)換為灰度圖像。5、sepia()：給元素添加復(fù)古色調(diào)。6、saturate()：調(diào)整元素的飽和度。7、hue-rotate()：旋轉(zhuǎn)元素的色相。8、invert()：反轉(zhuǎn)元素的顏色。這些是一些常用的CSS濾鏡屬性，你可以根據(jù)需要使用其中的一個(gè)或多個(gè)屬性來實(shí)現(xiàn)特定的視覺效果。請(qǐng)注意，濾鏡屬性在不同瀏覽器中的兼容性可能會(huì)有所不同，因此在使用時(shí)需要進(jìn)行相應(yīng)的瀏覽器兼容性檢查。任務(wù)3-8常用圖片樣式屬性的使用〓CSS3Filter（濾鏡）屬性在計(jì)算機(jī)查找網(wǎng)頁文檔時(shí)，計(jì)算機(jī)需要明確該網(wǎng)頁文檔所在位置。我們把網(wǎng)頁文檔所在的位置稱為路徑。網(wǎng)頁中的路徑分為絕對(duì)路徑和相對(duì)路徑兩種，具體介紹如下：1、絕對(duì)路徑絕對(duì)路徑就是網(wǎng)頁上的文檔或目錄在盤符(即C盤、D盤等)中的真正路徑，例如“D：\案例源碼\chapter02limagesbannerl.jpg”就是一個(gè)盤符中的絕對(duì)路徑。再如完整的網(wǎng)絡(luò)地址“/images/logo.gif”。2、相對(duì)路徑相對(duì)路徑就是相對(duì)于當(dāng)前文檔的路徑。相對(duì)路徑?jīng)]有盤符，通常是以HTML網(wǎng)頁文檔為起點(diǎn)，通過層級(jí)關(guān)系描述目標(biāo)圖像的位置。3、相對(duì)路徑使用的特殊符號(hào)以下為建立路徑所使用的幾個(gè)特殊符號(hào)，及其所代表的意義。"./"：代表目前所在的目錄。"../"：代表上一層目錄。以"/"開頭：代表根目錄。任務(wù)3-8常用圖片樣式屬性的使用〓相對(duì)路徑和絕對(duì)路徑3-9HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第二版）position的4種定位方式的使用任務(wù)3-9position的4種定位方式的使用〓staticstatic：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。任務(wù)3-9position的4種定位方式的使用〓relativerelative：生成相對(duì)定位的元素，通過top,bottom,left,right的設(shè)置相對(duì)于其正常位置進(jìn)行定位?？赏ㄟ^z-index進(jìn)行層次分級(jí)。任務(wù)3-9position的4種定位方式的使用〓absoluteabsolute：生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。可通過z-index進(jìn)行層次分級(jí)。

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論