HTML5+CSS3 Web前端開發(fā)項(xiàng)目化教程 課件 項(xiàng)目2 樣式頁面制作_第1頁
HTML5+CSS3 Web前端開發(fā)項(xiàng)目化教程 課件 項(xiàng)目2 樣式頁面制作_第2頁
HTML5+CSS3 Web前端開發(fā)項(xiàng)目化教程 課件 項(xiàng)目2 樣式頁面制作_第3頁
HTML5+CSS3 Web前端開發(fā)項(xiàng)目化教程 課件 項(xiàng)目2 樣式頁面制作_第4頁
HTML5+CSS3 Web前端開發(fā)項(xiàng)目化教程 課件 項(xiàng)目2 樣式頁面制作_第5頁
已閱讀5頁，還剩81頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

《HTML5+CSS3Web前端開發(fā)項(xiàng)目化教程》

項(xiàng)目2樣式頁面制作任務(wù)2.3制作“中國剪紙”頁面03目錄Contents任務(wù)2.2制作“游子吟”頁面02任務(wù)2.1制作“社會(huì)主義核心價(jià)值觀”頁面01任務(wù)2.4制作“校園動(dòng)態(tài)”文章列表04教學(xué)目標(biāo)熟悉CSS?樣式表的引入方式掌握CSS基礎(chǔ)選擇器掌握CSS?文本樣式屬性理解CSS?繼承性、層疊性和優(yōu)先級(jí)1.知識(shí)目標(biāo)能夠引入

CSS樣式表文件能夠合理運(yùn)用

CSS?選擇器定義標(biāo)簽樣式能夠運(yùn)用

CSS文本屬性設(shè)置文本樣式2.技能目標(biāo)?樹立正確的價(jià)值觀，培養(yǎng)愛黨、愛國、愛校、愛家的家國情懷培養(yǎng)自主學(xué)習(xí)和獨(dú)立解決問題的能力遵守代碼規(guī)范性要求，養(yǎng)成良好的代碼編寫習(xí)慣3.素養(yǎng)目標(biāo)1任務(wù)2.1制作“社會(huì)主義核心價(jià)值觀”頁面效果展示知識(shí)儲(chǔ)備可愛型古典型現(xiàn)實(shí)生活中，我們可以通過更換衣服來改變自己的風(fēng)格。知識(shí)儲(chǔ)備郵箱換膚藤蔓綠甜蜜橙其實(shí)本質(zhì)就是給郵箱更換了不同的樣式，網(wǎng)頁的外觀就是通過CSS樣式進(jìn)行控制的。網(wǎng)頁也可以通過更改“衣服”來改變自己的外觀。知識(shí)儲(chǔ)備CSS（CascadingStyleSheet），中文譯為層疊樣式表，簡稱樣式表。它是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言，是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，用來決定頁面的表現(xiàn)形式。知識(shí)儲(chǔ)備什么是結(jié)構(gòu)與表現(xiàn)分離？內(nèi)容結(jié)構(gòu)與表現(xiàn)形式相分離是指在Web開發(fā)標(biāo)準(zhǔn)中，HTML只用于搭建網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，而相關(guān)版面布局、文本或圖片的等顯示樣式都使用CSS控制。知識(shí)儲(chǔ)備所示的代碼片段，就是將CSS嵌入在HTML文檔中，雖然與HTML在同一個(gè)文檔中，但CSS集中寫在HTML文檔的頭部，也是符合結(jié)構(gòu)與表現(xiàn)相分離的。知識(shí)儲(chǔ)備CSS目前最新版本為CSS3，目前很多瀏覽器已經(jīng)相繼支持，如Chrome、Firefox、MicrosoftEdge、Safari、Opera等等。知識(shí)儲(chǔ)備使用CSS3不僅可以設(shè)計(jì)炫酷美觀的網(wǎng)頁，提高用戶體驗(yàn)，同時(shí)還能提高網(wǎng)頁性能。CSS3有很多新特征，例如圓角效果、圖形化邊框、盒子陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)自定義字體、多背景圖像、變形處理(旋轉(zhuǎn)、縮放、傾斜、移動(dòng))、動(dòng)畫效果、自適應(yīng)布局、媒體查詢等。知識(shí)儲(chǔ)備1.CSS樣式聲明選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}在上面的樣式規(guī)則中，選擇器用于指定CSS樣式作用的HTML對(duì)象，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。其中，屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)，用英文“:”連接，多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分。知識(shí)儲(chǔ)備1.CSS樣式聲明CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫，而聲明不區(qū)分大小寫，按照書寫習(xí)慣一般將選擇器、聲明都采用小寫的方式。多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開。如果屬性的屬性值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上引號(hào)。在編寫CSS代碼時(shí)，為了提高代碼的可讀性，可使用“/*注釋語句*/”來進(jìn)行注釋。在CSS代碼中空格是不被解析的，花括號(hào)以及分號(hào)前后的空格可有可無。因此可以使用空格鍵、Tab鍵、回車鍵等對(duì)樣式代碼進(jìn)行排版，即所謂的格式化CSS代碼。知識(shí)儲(chǔ)備2.CSS樣式表的引入方式什么是結(jié)構(gòu)與表現(xiàn)分離？在Web開發(fā)標(biāo)準(zhǔn)中，HTML內(nèi)容結(jié)構(gòu)與CSS樣式是相分離的，那怎樣將CSS樣式作用到HTML結(jié)構(gòu)上呢？應(yīng)用樣式最終呈現(xiàn)知識(shí)儲(chǔ)備2.CSS樣式表的引入方式行內(nèi)式是通過標(biāo)簽的style屬性來設(shè)置元素的樣式，語法格式如下:<標(biāo)簽名style="屬性1:屬性值1;屬性2:屬性值2;">內(nèi)容</標(biāo)簽名>行內(nèi)式適用于指定網(wǎng)頁中的某一元素的樣式，一般用于測試用途，效果范圍僅可以控制該標(biāo)簽。行內(nèi)式內(nèi)嵌式外鏈?zhǔn)綄?dǎo)入式知識(shí)儲(chǔ)備2.CSS樣式表的引入方式內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)簽中，并且用<style>標(biāo)簽定義，語法格式如下:<head><styletype="text/css">

選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style></head>行內(nèi)式內(nèi)嵌式外鏈?zhǔn)綄?dǎo)入式知識(shí)儲(chǔ)備2.CSS樣式表的引入方式內(nèi)嵌式的作用效果范圍為當(dāng)前頁面。1.HTML內(nèi)容結(jié)構(gòu)2.在head內(nèi)輸入style標(biāo)簽，并在style標(biāo)簽內(nèi)書寫樣式行內(nèi)式內(nèi)嵌式外鏈?zhǔn)綄?dǎo)入式知識(shí)儲(chǔ)備2.CSS樣式表的引入方式內(nèi)嵌式常用于為一個(gè)頁面設(shè)置單獨(dú)的樣式風(fēng)格。但若在一個(gè)網(wǎng)站中很多不同頁面中都想采用同樣的風(fēng)格時(shí)，內(nèi)嵌式方法就顯示略微麻煩，維護(hù)成本也不低。行內(nèi)式內(nèi)嵌式外鏈?zhǔn)綄?dǎo)入式知識(shí)儲(chǔ)備2.CSS樣式表的引入方式外鏈?zhǔn)绞菍⑺械臉邮椒旁谝粋€(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過<link/>標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，語法格式如下:<link>標(biāo)簽用來定義文檔與外部資源的關(guān)系，其中：“href”屬性：用于定義CSS文件的URL地址?！皌ype”屬性：定義文件的類型是CSS樣式表文件?！皉el”屬性：用來說明<link>元素在這里要完成的任務(wù)是鏈接一個(gè)獨(dú)立的CSS文件。<head><linkhref="CSS文件的路徑“type="text/css“rel="stylesheet"/></head>行內(nèi)式內(nèi)嵌式外鏈?zhǔn)綄?dǎo)入式知識(shí)儲(chǔ)備2.CSS樣式表的引入方式1.在css文件夾中新建一個(gè)樣式表文件style.css2.在style.css文件中書寫樣式3.使用link標(biāo)簽為頁面和樣式建立鏈接關(guān)系4.再創(chuàng)建一個(gè)頁面，使用link標(biāo)簽建立鏈接關(guān)系外鏈?zhǔn)降淖饔眯Ч秶鸀槭褂迷摌邮奖淼乃许撁妗Ｐ袃?nèi)式內(nèi)嵌式外鏈?zhǔn)綄?dǎo)入式知識(shí)儲(chǔ)備2.CSS樣式表的引入方式外鏈?zhǔn)匠Ｓ糜谝粋€(gè)網(wǎng)站中很多不同頁面中都采用同樣的風(fēng)格時(shí)，可以實(shí)現(xiàn)“內(nèi)容結(jié)構(gòu)”與“樣式信息”真正的分離。比如一個(gè)站點(diǎn)下的多個(gè)頁面應(yīng)用同一個(gè)樣式表style.css，只要改動(dòng)這個(gè)css文件，所有與之關(guān)聯(lián)的頁面樣式都會(huì)發(fā)生變化，這將使后期的改動(dòng)更加容易，維護(hù)更加方便。行內(nèi)式內(nèi)嵌式外鏈?zhǔn)綄?dǎo)入式知識(shí)儲(chǔ)備2.CSS樣式表的引入方式導(dǎo)入外部樣式表是指在<style>與</style>標(biāo)簽之間使用@import語句引入外部CSS文件。語法格式如下：將@import語句放置在<style>標(biāo)簽的內(nèi)部，通過url指定外部CSS文件的路徑。外部樣式表可以有多個(gè)。<styletype="text/css">

@importurl(css文件路徑);或@import"css文件路徑"; /*在此還可以存放其他CSS樣式*/</style>行內(nèi)式內(nèi)嵌式外鏈?zhǔn)綄?dǎo)入式知識(shí)儲(chǔ)備行內(nèi)式一般應(yīng)用于改變某個(gè)標(biāo)簽的樣式，內(nèi)嵌式一般應(yīng)用于改變一個(gè)頁面的樣式，鏈入式和導(dǎo)入式可以使網(wǎng)頁的內(nèi)容與表現(xiàn)真正實(shí)現(xiàn)分離。鏈入式在頁面加載時(shí)同時(shí)加載CSS文件，而導(dǎo)入式是在頁面加載完畢后再加載CSS文件。推薦使用鏈入式?？偨Y(jié)2.CSS樣式表的引入方式知識(shí)導(dǎo)圖任務(wù)分析任務(wù)要求：使用鏈入式設(shè)置頁面背景顏色為紅色；使用行內(nèi)式設(shè)置“社會(huì)主義核心價(jià)值觀”文字顏色為黃色；使用內(nèi)嵌式設(shè)置“富強(qiáng)、民主、文明、和諧……”等24字顏色為白色。<h2>練習(xí)樣式表的使用方法<h1>任務(wù)實(shí)施任務(wù)實(shí)施2任務(wù)2.2制作“游子吟”頁面效果展示選擇合適的選擇器，制作“游子吟”頁面。知識(shí)儲(chǔ)備1.CSS基礎(chǔ)選擇器選擇器是CSS中最基礎(chǔ)的部分，它指明了文檔中要應(yīng)用樣式的元素，所有HTML元素的樣式都是通過不同的CSS選擇器進(jìn)行控制的，利用選擇器我們可以對(duì)網(wǎng)頁元素進(jìn)行非常靈活的選取。基本選擇器有：標(biāo)簽選擇器類選擇器ID

選擇器包含選擇器標(biāo)簽指定選擇器分組選擇器通配符選擇器知識(shí)儲(chǔ)備注意：HTML中所有標(biāo)簽都可以作為標(biāo)簽選擇器；標(biāo)簽選擇器定義的樣式會(huì)影響整個(gè)頁面中所有該元素的顯示；h1{

color:blue;text-align:center;

}標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，本質(zhì)上就是對(duì)HTML標(biāo)簽元素進(jìn)行重新定義。1.標(biāo)簽選擇器1.CSS基礎(chǔ)選擇器知識(shí)儲(chǔ)備類選擇器可以將同一種類型的元素定義成不同樣式，又稱為class選擇器。定義類選擇器時(shí)，在自定義類名的前面需要加一個(gè)“.”（英文點(diǎn)號(hào)），如.redText。2.類選擇器注意：定義一個(gè)類，在頁面中可以被多次引用只有應(yīng)用了該類名的元素才會(huì)受到影響；一個(gè)元素可以應(yīng)用多個(gè)類，類名之間用空格隔開。類名是自定義的，定義的時(shí)候要遵循命名規(guī)范。類選擇器定義后，在網(wǎng)頁中需要使用該類選擇器處用class屬性引用它。.redText{

color:red;

}1.CSS基礎(chǔ)選擇器知識(shí)儲(chǔ)備一個(gè)HTML頁面中的id名稱是唯一的，id選擇器用來對(duì)這個(gè)唯一元素定義樣式。id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名，如：#main3.id選擇器注意：在符合web標(biāo)準(zhǔn)的設(shè)計(jì)中，一個(gè)頁面中的id名稱是唯一的；id嚴(yán)格區(qū)分大小寫；一般用來構(gòu)建整體框架的元素定義id屬性。#main{

background-color:skyblue;

}<divid="main">id選擇器</div>1.CSS基礎(chǔ)選擇器知識(shí)儲(chǔ)備包含選擇器又稱后代選擇器，當(dāng)HTML標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。包含選擇器寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。4.包含選擇器語法：元素1元素2{}注意：元素1（前）里必須包含元素2（后）；前后兩個(gè)對(duì)象之間用空格隔開。例如：<span>勸學(xué)</span><h2>書山有路<span>勤為徑</span></h2><h3>學(xué)海無涯<span>苦做舟</span></h3>h2span{

color:green;

}解析：h2span，只對(duì)<h2>里的span定義，其他地方的span不受影響。1.CSS基礎(chǔ)選擇器知識(shí)儲(chǔ)備分組選擇器又稱為并集選擇器，可以為多個(gè)選擇器定義相同的樣式，選擇器之間用逗號(hào)分隔，這樣可以減少樣式的重復(fù)定義，任何形式的選擇器都可以作為分組選擇器的一部分。5.分組選擇器解析：標(biāo)簽<p>、標(biāo)簽<h2>、id名為main的標(biāo)簽和類名為.title的標(biāo)簽都具有同樣的樣式。p,h1.redText,h3span{

text-decoration:underline; }1.CSS基礎(chǔ)選擇器知識(shí)儲(chǔ)備標(biāo)簽指定選擇器又稱交集選擇器，由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器或id選擇器，兩個(gè)選擇器之間不能有空格，語法：元素1元素2{}6.標(biāo)簽指定選擇器h2.special{ font-style:italic; }解析：類名為special的h2元素應(yīng)用樣式，“書山有路勤為徑”文字為傾斜。例如：h2、h3分別應(yīng)用類名為special的樣式<h2class="special">書山有路<span>勤為徑</span></h2><h3class="special">學(xué)海無涯<span>苦做舟</span></h3>注意：元素1（前）里不用包含元素2（后）；前后兩個(gè)對(duì)象之間不用空格隔開。1.CSS基礎(chǔ)選擇器知識(shí)儲(chǔ)備通配符選擇器用“*”號(hào)表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。通常情況下用于對(duì)網(wǎng)頁中所有元素初始化，從而可以將不同瀏覽器對(duì)同樣的HTML標(biāo)簽的不同默認(rèn)樣式統(tǒng)一起來。7.通配符選擇器例如：*{

margin:0;

padding:0;

}1.CSS基礎(chǔ)選擇器知識(shí)儲(chǔ)備在編寫代碼時(shí)，我們要遵循一定的命名規(guī)范；同時(shí)，我們還要注意代碼的縮進(jìn)和注釋的使用，以便他人能夠更好地理解和維護(hù)我們的代碼；通過編寫規(guī)范的代碼，我們可以培養(yǎng)自己的自律和嚴(yán)謹(jǐn)性。職業(yè)素養(yǎng)：代碼規(guī)范拓展任務(wù)：選擇合適的選擇器頁面內(nèi)所有元素內(nèi)邊距為0；整個(gè)頁面背景顏色為淺黃色，行高為2em；段落首行縮進(jìn)2em。紅色盒子（redBlock）背景顏色為紅色，藍(lán)色盒子（blueBlock）背景顏色為藍(lán)色；h1,h2大小18px，顏色為橘色“紅色盒子的標(biāo)題”為淺綠色；所有“盒子”兩個(gè)字顏色為白色;<divid="redBlock"> <h1></h1> <p></p></div><divid=“blueBlock"> <h1></h1> <h2></h2> <p></p></div>*{}body{}p{}#redBlock{}#blueBlock{}h1,h2{}#redBlockh1{}.white{}HTMlCSS知識(shí)儲(chǔ)備所謂繼承性是指書寫CSS樣式表時(shí)，子元素會(huì)繼承父元素的某些樣式，如文本顏色和字號(hào)。子元素的樣式不會(huì)影響父元素。

繼承性<strong>標(biāo)簽并沒有設(shè)置文字顏色，但卻顯示為紅色，這就是CSS的繼承性，即<strong>標(biāo)簽繼承了父元素<p>標(biāo)簽的顏色設(shè)置。2.CSS的繼承性、層疊性、優(yōu)先級(jí)知識(shí)儲(chǔ)備并不是所有的CSS屬性都可以繼承，例如，下面的屬性就不具有繼承性：

邊框?qū)傩?/p>

內(nèi)/外邊距屬性背景屬性定位屬性布局屬性元素寬高屬性2.CSS的繼承性、層疊性、優(yōu)先級(jí)繼承性知識(shí)儲(chǔ)備CSS的繼承性貫穿CSS設(shè)計(jì)的始終，網(wǎng)頁中每個(gè)元素都遵循著CSS繼承的概念?？梢岳眠@種巧妙的繼承關(guān)系，大大縮減代碼的編寫量，并提高可讀性，尤其是在頁面內(nèi)容很多且關(guān)系復(fù)雜的情況下?？偨Y(jié)2.CSS的繼承性、層疊性、優(yōu)先級(jí)繼承性知識(shí)儲(chǔ)備所謂層疊性是指多種CSS樣式的疊加。有以下三種情況：

層疊性當(dāng)不同選擇器作用到同一元素時(shí)，樣式不沖突時(shí)，會(huì)出現(xiàn)疊加。樣式?jīng)_突時(shí)，選擇器同級(jí)別遵循就近原則，哪個(gè)樣式離標(biāo)簽近，就執(zhí)行哪個(gè)樣式。樣式?jīng)_突時(shí)，選擇器不同級(jí)別受優(yōu)先級(jí)的影響。2.CSS的繼承性、層疊性、優(yōu)先級(jí)知識(shí)儲(chǔ)備1.當(dāng)不同選擇器作用到同一元素時(shí)，樣式不沖突時(shí)，會(huì)出現(xiàn)疊加。標(biāo)簽選擇器p和類選器.green樣式不沖突，樣式疊加作用到文字上，文字顯示為20px綠色。2.CSS的繼承性、層疊性、優(yōu)先級(jí)層疊性知識(shí)儲(chǔ)備2.樣式?jīng)_突時(shí)，選擇器同級(jí)別遵循就近原則，哪個(gè)樣式離標(biāo)簽近，就執(zhí)行哪個(gè)樣式。類選擇器.green和.red都是類選擇器級(jí)別相同，都設(shè)置了color屬性，出現(xiàn)樣式?jīng)_突，.red最后出現(xiàn)，文字顏色為red。2.CSS的繼承性、層疊性、優(yōu)先級(jí)層疊性知識(shí)儲(chǔ)備color:pink;color:blue;color:red;【結(jié)論】定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。網(wǎng)頁制作時(shí)，對(duì)同一元素，應(yīng)用不同的樣式，會(huì)出現(xiàn)什么情況？思考2.CSS的繼承性、層疊性、優(yōu)先級(jí)優(yōu)先級(jí)知識(shí)儲(chǔ)備標(biāo)簽選擇器，權(quán)重為1；類選擇器，權(quán)重為10；id選擇器，權(quán)重為100；行內(nèi)樣式優(yōu)先，權(quán)重是1000，!important權(quán)重最大。優(yōu)先級(jí)：!important>行內(nèi)樣式>id選擇器>類選擇器>標(biāo)簽選擇器CSS規(guī)范為不同類型的選擇器定義了權(quán)重，權(quán)重越高，樣式會(huì)被優(yōu)先應(yīng)用，權(quán)重定義如下：繼承樣式的權(quán)重為0。權(quán)重相同時(shí)，CSS遵循就近原則。特殊情況2.CSS的繼承性、層疊性、優(yōu)先級(jí)優(yōu)先級(jí)知識(shí)儲(chǔ)備選擇器權(quán)重計(jì)算方法：將選擇器中每個(gè)基本選擇器進(jìn)行賦值后相加。例如：h1{color:blue}

：1個(gè)標(biāo)簽選擇器，權(quán)重為1

p

span{color:yellow}

：2個(gè)標(biāo)簽選擇器，權(quán)重為1+1=2

.warning{color:red}

：1個(gè)類選擇器，權(quán)重為10

#main{color:black}

：1個(gè)id選擇器，權(quán)重為100

p.note{color:grag}：

1個(gè)標(biāo)簽選擇器和1個(gè)類選擇器權(quán)重為1+10=11

2.CSS的繼承性、層疊性、優(yōu)先級(jí)優(yōu)先級(jí)知識(shí)儲(chǔ)備猜猜我是什么顏色<divclass="father"id="header"> <pclass="son">猜猜我是什么顏色</p></div>divp{color:black}/*權(quán)重為:1+1*/p.son{color:green;}/*權(quán)重為:1+10*/.fatherp{color:yellow}/*權(quán)重為:10+1*/div.fatherp{color:orange;}/*權(quán)重為:1+10+1*/div.father.son{color:chocolate;}/*權(quán)重為:1+10+10*/#headerp{color:pink;}/*權(quán)重為:100+1*/#headerp.son{color:red;}/*權(quán)重為:100+1+10*/對(duì)應(yīng)的權(quán)重值：2.CSS的繼承性、層疊性、優(yōu)先級(jí)優(yōu)先級(jí)知識(shí)導(dǎo)圖任務(wù)分析.orange任務(wù)要求：清除所有元素頁面邊距,使用通配符選擇器；設(shè)置整個(gè)盒子寬度為400px，文字水平方向居中對(duì)齊，可以使用id選擇器:#box；設(shè)置h1文字顏色為紅色，可以使用標(biāo)簽選擇器:h1；設(shè)置“孟郊”文字顏色為綠色，可以使用后代選擇器:

h3span；設(shè)置“慈母”和最后一行文字顏色為橘色，可以使用類選擇器:.orange；設(shè)置“慈母”文字大小30px，可以使用標(biāo)簽指定選擇器

span.orange。練習(xí)CSS基礎(chǔ)選擇器的使用方法<h1><h3><p><span>div#box任務(wù)實(shí)施任務(wù)實(shí)施3任務(wù)2.3制作“中國剪紙”頁面效果展示制作“中國剪紙”頁面，效果如所示。知識(shí)儲(chǔ)備font-family@font-facefont-sizefont-stylefontfont-weight1.CSS設(shè)置字體樣式知識(shí)儲(chǔ)備font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等。1.font-family1.CSS設(shè)置字體樣式知識(shí)儲(chǔ)備font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長度單位，也可以使用絕對(duì)長度單位，具體如下表所示：2.font-size相對(duì)長度單位說明em相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸px像素，最常用，推薦使用絕對(duì)長度單位說明in英寸cm厘米mm毫米pt點(diǎn)1.CSS設(shè)置字體樣式知識(shí)儲(chǔ)備font-weight屬性用于定義字體的粗細(xì)，其可用屬性值如下表所示：3.font-weight值描述normal默認(rèn)值。定義標(biāo)準(zhǔn)的字符。bold定義粗體字符。bolder定義更粗的字符。lighter定義更細(xì)的字符。100~900（100的整數(shù)倍）定義由細(xì)到粗的字符。其中400等同于normal，700等同于bold，值越大字體越粗。1.CSS設(shè)置字體樣式知識(shí)儲(chǔ)備font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：4.font-stylenormal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式;italic：瀏覽器會(huì)顯示斜體的字體樣式;oblique：瀏覽器會(huì)顯示傾斜的字體樣式;1.CSS設(shè)置字體樣式font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，定義的順序如下，其中至少要指定字體大小和字體類型，所有屬性值用空格分隔。語法格式如下：5.font知識(shí)儲(chǔ)備選擇器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}1.CSS設(shè)置字體樣式知識(shí)儲(chǔ)備1.CSS設(shè)置字體樣式@font-face屬性是CSS3的新增屬性，用于定義服務(wù)器字體。通過@font-face屬性，開發(fā)者可以在用戶計(jì)算機(jī)未安裝字體時(shí)，使用任何喜歡的字體。6.@font-face@font-face{ font-family:字體名稱; src:字體路徑; }在使用字體的地方，使用font-family屬性設(shè)置定義的字體名稱。字體下載：/ziti/知識(shí)儲(chǔ)備colorletter-spacingword-spacingline-heighttext-transformtext-decorationtext-aligntext-indentword-wraptext-shadowtext-overflowwhite-space2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備color屬性用于定義文本的顏色，其取值方式有如下3種：color注意:如果使用RGB代碼的百分比顏色值，取值為0時(shí)也不能省略百分號(hào)，必須寫為0%。預(yù)定義的顏色值，如red，green，blue等。十六進(jìn)制，如#FF0000，#FF6600，#29D794等。實(shí)際工作中，常用十六進(jìn)制。RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。CSS3新增：rgba(r,g,b,<opacity>）。opacity是透明度，取0～1之間的數(shù)字。2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備十六進(jìn)制顏色值的縮寫十六進(jìn)制顏色值是由#開頭的6位十六進(jìn)制數(shù)值組成，每2位為一個(gè)顏色分量，分別表示顏色的紅、綠、藍(lán)3個(gè)分量。當(dāng)3個(gè)分量的2位十六進(jìn)制數(shù)都相同時(shí)，可使用CSS縮寫。例如，#FF6600可縮寫為#F60，#FF0000可縮寫為#F00，#FFFFFF可縮寫為#FFF。多學(xué)一招:2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備line-height屬性用于設(shè)置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱為行高。

line-heightline-height常用的屬性值單位有三種，分別為像素px，相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px。2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備text-align屬性用于設(shè)置文本內(nèi)容水平對(duì)齊方式。text-align其可用屬性值如下：left：左對(duì)齊（默認(rèn)值）right：右對(duì)齊。center：居中對(duì)齊。注意：如果需要對(duì)圖像設(shè)置水平對(duì)齊，可以為圖像添加一個(gè)父標(biāo)簽如<p>或<div>，然后對(duì)父標(biāo)簽應(yīng)用text-align屬性，即可實(shí)現(xiàn)圖像的水平對(duì)齊。2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備text-indent屬性用于設(shè)置首行文本的縮進(jìn)，常用于設(shè)置段落的首行縮進(jìn)。text-indent其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值,建議使用em作為設(shè)置單位。

text-indent:2em;/*表示段落首行向后縮進(jìn)兩個(gè)字的距離*/

2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備text-transform屬性用于控制英文字符的大小寫轉(zhuǎn)換。text-transform其可用屬性值如下：none：不轉(zhuǎn)換（默認(rèn)值）。capitalize：首字母大寫。uppercase：全部字符轉(zhuǎn)換為大寫。lowercase：全部字符轉(zhuǎn)換為小寫。2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備text-decoration屬性用于設(shè)置文本的下劃線，上劃線，刪除線等裝飾效果。text-decoration其可用屬性值如下：none：沒有裝飾（正常文本默認(rèn)值）。underline：下劃線。overline：上劃線。line-through：刪除線。2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備letter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。letter-spacingletter-spacing屬性，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。該屬性的設(shè)置多用于中文文本中。2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備word-spacing屬性用于定義英文單詞之間的間距，對(duì)中文字符無效。word-spacingword-spacing屬性用于定義英文單詞之間的間距，和letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。單詞間距的設(shè)置多用于英文文本中。2.CSS設(shè)置文本外觀樣式知識(shí)儲(chǔ)備text-shadow屬性可以為頁面中的文本添加陰影效果。用法：text-shadow:h-shadowv-shadowblurcolor;text-shadowh-shadow:用于設(shè)置水平陰影的距離，必需，允許負(fù)值。v-shadow:用于設(shè)置垂直陰影的距離，必需，允許負(fù)值。blur:用于設(shè)置模糊半徑，可選，省略的值為0。color:用于設(shè)置陰影的顏色，可選，無則為黑色。2.CSS設(shè)置文本外觀樣式知識(shí)導(dǎo)圖知識(shí)導(dǎo)圖任務(wù)分析具體樣式：標(biāo)題“中國剪紙”采用服務(wù)器字體，文字顏色為紅色#A52A2A、大小50px，用陰影描邊，字間距20px，文本居中對(duì)齊；“英文標(biāo)題“ChinesePaperCutting”文字顏紅色#A52A2A、文本居中對(duì)齊、單詞間距10px、首字母大寫；正文中“導(dǎo)語”和“【詳情】”文字顏色

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(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)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論