HTML5 CSS3網(wǎng)頁設(shè)計與制作 課件 （呂麥絲） 第3章 CSS基礎(chǔ)_第1頁
HTML5 CSS3網(wǎng)頁設(shè)計與制作 課件 （呂麥絲） 第3章 CSS基礎(chǔ)_第2頁
HTML5 CSS3網(wǎng)頁設(shè)計與制作 課件 （呂麥絲） 第3章 CSS基礎(chǔ)_第3頁
HTML5 CSS3網(wǎng)頁設(shè)計與制作 課件 （呂麥絲） 第3章 CSS基礎(chǔ)_第4頁
HTML5 CSS3網(wǎng)頁設(shè)計與制作 課件 （呂麥絲） 第3章 CSS基礎(chǔ)_第5頁
已閱讀5頁，還剩49頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第3章CSS基礎(chǔ)了解CSS的概念掌握CSS的語法掌握CSS選擇器的種類以及用各種選擇器的應(yīng)用學(xué)習(xí)目標010203本章任務(wù)任務(wù)1CSS的語法和用法任務(wù)2基本選擇器任務(wù)3復(fù)合選擇器任務(wù)4屬性選擇器任務(wù)5偽元素選擇器和偽類選擇器任務(wù)6案例實戰(zhàn)—再讀火焰山任務(wù)1CSS的語法和用法任務(wù)描述

本案例是應(yīng)用CSS樣式改變標題、段落中的文字大小和顏色，以及設(shè)置層的大小和背景顏色。圖4-1-1：設(shè)計元素顏色布局代碼樣式代碼任務(wù)分析1.用h標簽、p標簽、span標簽和div標簽添加網(wǎng)頁內(nèi)容。2.通過CSS樣式改變文本的大小和顏色、背景顏色。實現(xiàn)思路1.熟悉CSS顏色的多種表示方式以及設(shè)置字體大小的絕對單位和相對單位布局代碼樣式代碼CSS語法語法：選擇器{聲明1；聲明2；...聲明n}CSS規(guī)則由選擇器和聲明兩部分構(gòu)成，選擇器是指需要改變樣式的HTML元素；聲明使用花括號界定起來，用來設(shè)置元素的樣式，可以是一條或多條，使用多條聲明時用分號分隔，最后一個可不加分號。每條聲明由屬性和值組成。屬性是將要設(shè)置的樣式屬性，每個屬性有一個值，屬性和值用冒號分開。屬性值不加雙引號，但是當屬性值為若干個單詞時，需要加上雙引號。具體寫法如下所示：選擇器{屬性1:值1；屬性2:值2；...屬性n:值n；}示例：h1｛font-size:16px;color:red｝其中，font-size和color是屬性，分別表示設(shè)置文字的大小和顏色，red和14px是屬性值，分別表示將文字的大小設(shè)置為14px，顏色設(shè)置為紅色。書寫CSS樣式時是否包含空格不會影響CSS在瀏覽器在的解析效果，CSS對大小寫也不敏感，但是調(diào)用CSS的class和id時，對名稱的大小寫是敏感的。方式描述及優(yōu)缺點用英文單詞表示優(yōu)點：方便快捷而且特定顏色比較準確。缺點：表示顏色的數(shù)量有限，不容易記住，不支持透明度的表示。用十六進制表示以“#”開頭的六位十六進制數(shù)表示，前兩位表示紅色的比例，中間兩位表示綠色的比例，后兩位表示藍色的比例。優(yōu)點：方便快捷而且特定顏色比較準確缺點：表示顏色數(shù)量有限，英文不好的不容易記住，不支持透明度的表示用RGB表示語法格式為：rgb(num1,num2,num3)num1,num2,num3三個參數(shù)的取值范圍為0～255或0%～100%，其中num1表示紅色，num2表示綠色，num3表示藍色。顏色的表示方式方式描述及優(yōu)缺點用RGBA表示語法格式為：rgba(num1,num2,num3,num4)與rgb(num1,num2,num3)相比，多了一個參數(shù)表示顏色透明度的參數(shù)num4，取值范圍為0～1。用HSL表示語法格式為：hsl(num1,a%,b%)num1表示色調(diào)，取值范圍為0～360，取值0或360表示紅色，120表示綠色，240表示藍色；a%表示飽和度，取值范圍為0%～100%；b%表示亮度，取值范圍為0%～100%。HSLA表示語法格式為：hsla(num1,a%,b%,num2)與hsl(num1,a%,b%)相比，多了一個參數(shù)表示顏色透明度的參數(shù)num2，取值范圍為0～1。顏色的表示方式單位描述in英寸cm厘米mm毫米pt磅(1pt等于1/72英寸)pc12點活字(1pc等于12點)1.絕對單位CSS屬性中使用的度量單位絕對單位在網(wǎng)頁中很少使用，一般多用在傳統(tǒng)平面印刷中，但在特殊場合使用絕對單位還是很必要的。單位描述px像素，計算機屏幕上的一個點，根據(jù)顯示器屏幕分辨率而定。%百分比em1em等于當前的字體尺寸；2em等于當前字體尺寸的兩倍；例如，如果某元素以12pt顯示，那么2em是24pt。在CSS中，em是非常有用的單位，因為它可以自動適應(yīng)用戶所使用的字體。ex一個ex是一個字體的x-height。(x-height通常是字體尺寸的一半。)2.相對單位CSS屬性中使用的度量單位相對單位與絕對單位相比顯示大小不是固定的，它所設(shè)置的對象受屏幕分辨率、可視區(qū)域、瀏覽器設(shè)置以及相關(guān)元素的大小等多種因素影響。任務(wù)實現(xiàn)<body><h3>CSS規(guī)則由選擇器和聲明兩部分構(gòu)成。</h3><p>CSS屬性中使用的度量單位有<span>絕對單位(如：mm)和相對單位(如：px)</span></p><p>CSS表示顏色的方法有多種，英文單詞表示是方法之一。</p><div></div></body>布局參考代碼如下：任務(wù)描述任務(wù)分析任務(wù)實現(xiàn)<styletype="text/css">h3{font-size:20px;color:#ff0000;}p{font-size:16px;color:rgb(100,200,0);}CSS參考代碼如下：span{font-size:7mm;color:blue;}div{width:100px;height:100px;background:rgba(0,0,255,0.5);}</style>任務(wù)描述任務(wù)分析任務(wù)2基本選擇器任務(wù)描述本案例是將網(wǎng)頁頁面制作成信紙的樣式，信紙是粉紅色的，有橫線，左上角和右下角均有插圖。圖4-2-1：設(shè)計信稿任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路插入層，設(shè)置層的大小和邊框。將左上角、右下角、橫線的圖片設(shè)置成層的背景，調(diào)整圖片的大小與信紙相適應(yīng)。橫線和圖片包括4行，因此橫線圖片的高度設(shè)置成4倍文本的高度，讓每一行文字正好寫在橫線上。1.練習(xí)CSS外部文件樣式表的應(yīng)用任務(wù)實現(xiàn)1．通用選擇器基本選擇器“*”表示通用選擇器，適用于文檔中所有的元素。示例參考代碼如下：<styletype="text/css">*{color:red;}</style><body><h1>網(wǎng)頁設(shè)計與制作</h1><P>文本樣式</P><p>列表樣式</p></body>2.元素選擇器基本選擇器以HTML標簽作為選擇器，重新定義標簽的樣式。示例參考代碼如下：<styletype="text/css">h1{color:red;}p{color:pink;}</style><body><h1>文字顏色為紅色</h1><P>文字顏色為粉紅色</P><p>文字顏色為粉紅色</p></body>如下圖將h1標簽的文字顏色設(shè)置為紅色，p標簽的文字顏色設(shè)置為粉紅色。3.類別選擇器基本選擇器自定義的樣式，可以為不同元素多次套用。類別選擇器以“.”作為前綴，元素套用格式為class=“類別選擇器”。示例參考代碼如下：<styletype="text/css">.layout{font-family:"方正舒體";font-size:24px;color:red;}.layout11{font-size:36px;font-style:italic;color:blue;}</style><body><pclass="layout">套用layout樣式</p><h1class="layout">套用layout樣式</h1><h2class="layout11">套用layout1樣式</p></body>如下圖所示：類別選擇器layout分別被p標簽和h標簽套用，類別選擇器layout11被h2標簽套用。類別選擇器的命名規(guī)則：要以小寫字母開頭，不能以數(shù)字開頭，不能使用中文命名，要見名知意。4.ID選擇器基本選擇器為標有特定id的HTML元素指定特定的樣式，ID選擇器以“#”作為前綴。示例參考代碼如下：<styletype="text/css">#page{margin:0auto;width:1000px;height:100px;line-height:100px;text-align:center;border:3pxsolidblue;}</style><body><divid="page">盒子套用page樣式，在頁面居中，寬為1000px，高為1600px，1px藍色邊框</div></body>如下圖所示：ID選擇器page，被div標簽套用?；具x擇器不同點類別選擇器ID選擇器語法選擇器前綴為“.”選擇器前綴為“#”（棋盤號）使用方法用class屬性套用<h1class=“important”>用ID屬性套用<h1id=“important”>套用語法多個類別選擇器可以同時被套用語法：class=“選擇器1選擇器2”選擇器之間用空格分隔不能結(jié)合使用使用次數(shù)在一個HTML文檔中，可以多次使用ID選擇器一般使用一次何時使用同一個頁面要多次用到時使用在同一個頁面只會出現(xiàn)一次的，如網(wǎng)頁的頁頭、頁體、頁腳制作說明：類別選擇器和ID選擇器的區(qū)別表在文檔中的位置和調(diào)用方法擇器使用標簽的style屬性，將樣式表定義在<html>標簽內(nèi)。示例：<pstyle="font-family:Verdana;font-size:3;color:red;">行內(nèi)調(diào)用</p>1.行內(nèi)調(diào)用如果樣式表中只有少數(shù)幾行代碼，可以直接用<style>元素，放在頁面的<head>區(qū)段中，稱為內(nèi)嵌樣式表。示例：2.內(nèi)部調(diào)用內(nèi)部調(diào)用示例參考代碼如下：<styletype="text/css">p{color:red;font-size:16px;}h1{color:blue;}.style1{font-size:18px;color:#00f;}</style><body><p>網(wǎng)頁設(shè)計與與制作</p><pclass="style1">內(nèi)部調(diào)用</p></body>3.外部文件調(diào)用基本選擇器（1）外部樣式表調(diào)用方法外部樣式表用link語句調(diào)用。<link>必須放在<head>區(qū)段中指定，且必須有rel,type,href三個屬性。rel屬性指定文件的類型，type標示出連接文件的形式，href指向文件的位置。示例：（2）外部樣式表文件外部樣式表文件是將多個CSS樣式寫在一個擴展名為.css的文件中，可以用記事本等文本編輯器編寫，文件中不包含html的任何標簽。如右所示<linkrel=“stylesheet”type=“text/css”href=“example.css”>.mylayout{font-size:36px;color:#6699FF;}hr{color:#ff0000;height:5px;width:500;}.yy{font-size:36px;color:#6699FF;}任務(wù)實現(xiàn)布局代碼CSS代碼任務(wù)描述任務(wù)分析任務(wù)3復(fù)合選擇器任務(wù)描述本案例通過復(fù)合選擇器的應(yīng)用實現(xiàn)元素的樣式。圖4-3-1：設(shè)計元素樣式任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路不同級別的關(guān)系，選擇“空格”、“>”、“+”、“～”、“逗號”來實現(xiàn)元素的樣式。掌握復(fù)合選擇器的應(yīng)用實現(xiàn)元素的樣式任務(wù)實現(xiàn)知識點導(dǎo)入一、后代選擇器（包含選擇器）語法：元素之間添加空格功能：給元素的后代元素添加樣式示例：ulli{color:red;border:1pxsolidblue;}給ul所有的后代元素（包括孫元素）li添加樣式二、子元素選擇器語法：父元素和子元素之間用“>”聯(lián)接功能：給元素的直接后代添加樣式示例：ul>li{color:red}給ul的直接子元素li添加樣式，不包括孫元素（但是字體、顏色樣式會繼承）知識點導(dǎo)入三、相鄰選擇器語法：元素之間用“+”聯(lián)接功能：給緊貼在E元素后面的F元素添加樣式示例：h2+p{color:green}給緊跟在h2標簽后面的p元素添加樣式四、兄弟選擇器語法：元素之間用“～”聯(lián)接功能：給E元素所有后面的兄弟元素F添加樣式示例：h3～p{color:red}給h3標簽后面的同級p元素添加樣式五、并列選擇器語法：元素之間用“，”聯(lián)接功能：同時對多個元素添加樣式示例：h1,p,a{color:red}給h1、p、a元素同時添加樣式任務(wù)實現(xiàn)<body><p>不在盒子中的P</p><!--文字大小為30px--><divclass="sec1"><!--300*200，藍色邊框--><h3>在sec1盒子中的h3標題</h3><p>在sec1盒子中的p1</p><!--文字大小為25px--><p>在sec1盒子中的p2</p><!--文字大小為25px--><p>在sec1盒子中的p3</p><!--文字大小為25px--></div><divclass="sec2"><!--300*200，藍色邊框--><h3>在sec2盒子中的h3標題</h3><p>在sec2盒子中的p1</p><!--文字大小為20px--><p>在sec2盒子中的p2</p><!--文字大小為15px--><p>在sec2盒子中的p3</p><!--文字大小為20px--><divclass="sec21"><h3>在sec21盒子中的h3標題</h3><p>在sec21盒子中的p3</p><!--文字大小為15px--><p>在sec21盒子中的p2</p><!--文字大小為20px--></div></div>布局代碼<divclass="sec3"><!--300*200，藍色邊框--><h3>在sec3盒子中的h3標題</h3><p>在sec3盒子中的p1</p><!--文字大小為10px--><p>在sec3盒子中的p2</p><!--文字大小為10px--><p>在sec3盒子中的p3</p><!--文字大小為10px--><divclass="sec31"><h3>在sec31盒子中的h3標題</h3><p>在sec31盒子中的p3</p><!--文字大小為30px--><p>在sec31盒子中的p2</p><!--文字大小為30px--></div></div></body><styletype="text/css">.sec1,.sec2,.sec3{width:600px;height:250px;border:2pxsolidblue;}/*并列選擇器*/p{font-size:30px;line-height:0.6;}.sec1>p{font-size:25px;}/*子元素選擇器*/.sec2p{font-size:20px;}/*后代選擇器*/.sec2>h3+p{font-size:15px;}/*相鄰選擇器*/.sec3>h3~p{font-size:10px;;}/*兄弟選擇器*/</style>CSS代碼任務(wù)描述任務(wù)分析任務(wù)4屬性選擇器任務(wù)描述本案例通過屬性選擇器來設(shè)置表單控件、提交按鈕和重置按鈕的樣式。圖4-4-1：設(shè)計注冊信息表單任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路插入表單元素。用“input[type="submit"],input[type="reset"]”屬性選擇器寫按鈕的樣式。掌握通過屬性選擇器來設(shè)置表單控件、提交按鈕和重置按鈕的樣式任務(wù)實現(xiàn)一、element[attibute]知識點導(dǎo)入功能：給具有attibute屬性的element元素添加樣式。示例：給有value屬性或style屬性的input元素添加綠色的背景顏色input[value][style]{background:green}二、element[attibute=“val”]功能：給attibute屬性等于val的element元素添加樣式示例：給value=“vip”的E元素添加紅色的背景input[value=“vip1”]{background:red}三、element[attibute～=“val”]知識點導(dǎo)入功能：當attibute屬性有多個值時，給值等val的element元素添加樣式示例：當input元素的style有多個屬性值，只給style屬性值為15px的input元素添加藍色背景。input[style～=“15px”]{background:blue}四、element[attibute|=“val”]功能：當attibute屬性值中有“-”連接符時，給element元素添加樣式示例：如果html代碼為：<plang=“en-us”>，則給該P元素添加文字顏色為紅色的樣式p[lang|=“en”]{color:red}五、element[attibute^=“val”]知識點導(dǎo)入功能：給attibute屬性值以“val”開頭的element元素添加屬性示例：給val屬性值以vip開頭的input元素添加綠色背景input[value^=“vip”]{background:green}六、element[attibute$=“val”]功能：給attibute屬性值以“val“結(jié)尾的E元素添加屬性示例：給href屬性值以.cn結(jié)尾的a元素設(shè)置紅色字體a[href$=“.cn”]{color:red}知識點導(dǎo)入七、element[attibute*=“val”]功能：給attibute屬性值包含“val”的element元素添加屬性；示例：給val屬性值包含“vip”的input元素添加紅色背景input[value*=“vip”]{background:red}CSS代碼任務(wù)實現(xiàn)部分布局代碼任務(wù)描述任務(wù)分析任務(wù)5偽元素選擇器和

偽類選擇器任務(wù)描述本案例運用偽元素選擇器和偽類選擇器來進行頁面文字設(shè)置圖4-5-1：設(shè)計文字格式排版任務(wù)實現(xiàn)任務(wù)分析實現(xiàn)思路設(shè)計兩個div盒子，設(shè)置寬高。對兩個盒子分別放入文字“改革”和“開放”兩段內(nèi)容，標題用h2標簽，其余文字用p標簽“在堅持社會主義制度的前提下”用兩個p標簽里。對“改革”內(nèi)容使用偽類選擇器進行設(shè)置文字樣式，對“開放”內(nèi)容使用偽元素選擇器進行文字設(shè)置，如何使用偽類和偽元素選擇器，我們來看一下相關(guān)的知識點。任務(wù)實現(xiàn)偽元素選擇器設(shè)置元素內(nèi)容第一個字符的樣式語法：示例：設(shè)置元素內(nèi)容第一行字符的樣式語法：示例：在每個element元素的內(nèi)容之前插入內(nèi)容，用來和content屬性一起使用語法：示例：element：first-letter/element：：first-letter；element：first-line/element：：first-line；p::first-line{color:green}element：before/element：：beforea::before{content:"點擊"

}p::first-letter{font-size:50px}偽元素選擇器在每個element元素的內(nèi)容之后插入內(nèi)容，用來和content屬性一起使用語法：示例：在a元素之后插入圖片設(shè)置對象被選擇時的樣式語法：示例：設(shè)置段落被選擇時的背景顏色element：after/element：：afterelement：：selectiona::after{

content:url(../img/ss.png)}p::selection{background:red}1.結(jié)構(gòu)偽類選擇器偽類選擇器（1）給父元素的第一個子元素element設(shè)置樣式語法：element：first-child（2）給父元素的最后一個子元素element設(shè)置樣式語法：element：last-child（3）給僅有的一個子元素element設(shè)置樣式語法：element：only-child（4）給元素的第n個子元素element設(shè)置樣式語法：element:nth-child(n):說明：n可以數(shù)字、奇數(shù)（odd）、偶數(shù)(even)或者用公式（5）給倒數(shù)第n個子元素element設(shè)置樣式語法：element:nth-last-child(n)：tr:nth-child(3)表示第三行tr:nth-child(odd)表示奇數(shù)行tr:nth-child(even)表示偶數(shù)行tr:nth-child(2n)表示2的倍數(shù)行2.UI偽類選擇器偽類選擇器（1）向被激活的元素添加樣式語法：element：active（2）當鼠標懸浮在元素止方時，向元素添加樣式語法：element：hover（3）向未被訪問的鏈接添加樣式語法：element：link（4）向已被訪問的鏈接添加樣式語法：element：visited（5）向擁有鍵盤輸入焦點的元素添加樣式語法：element：focus（6）向帶有指定lang屬性的元素添加樣式語法：element：lang（7）選擇每個被選中的input元素時的樣式語法：input:checked（8）選擇每個禁用的input元素時的樣式語法：input:disabled（9）選擇每個啟用的input元素時的樣式語法：input:enabled（10）選擇當前活動的錨點元素的樣式語法：#E:target（11）選擇element元素之外的每個元素的樣式語法：:not(element)1.就近原則CSS樣式的優(yōu)先級離要修飾目標越近的樣式優(yōu)先級越高。如以下示例中，h1標簽套用了離它更近的htmlh1樣式，因而文字的顏色是紫色的。示例：示例參考代碼如下：<styletype="tex

溫馨提示

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

評論

0/150

提交評論