HTML+CSS+JavaScript項目3 “網上花店”專題頁制作_0519_lianrui.ppt

1 CSS定義背景顏色 任務3-2知識拓展 1、CSS定義背景顏色 在CSS中，網頁元素的背景顏色使用background-color屬性來設置，其屬性值與文本顏色的取值一樣，可使用預定義的顏色值、十六進制#RRGGBB或RGB代碼rgb(r,g,b)。background-color的默認值為transparent，即背景透明，這時子元素會顯示其父元素的背景。 任務3-2知識拓展 需求分析 僅僅學習CSS基礎選擇器、CSS控制文本樣式，並不能良好地控制網頁中元素的顯示樣式。想要使用CSS實現結構與表現的分離，解決工作中出現的CSS調試問題，就需要學習CSS高級特性。下面，本節將對CSS複合選擇器、CSS層疊性與繼承性以及CSS優先級進行詳細講解。 任務3-3CSS高級特性 1 2 CSS層疊性與繼承性 CSS複合選擇器 3 CSS優先級 任務3-3知識儲備 1、CSS複合選擇器 複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，具體如下： (1)標簽指定式選擇器 標簽指定式選擇器又稱交集選擇器，由兩個選擇器構成，其中第一個為標記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如h3.special或p#one。 (2)後代選擇器 後代選擇器用來選擇元素或元素組的後代，其寫法就是把外層標記寫在前面，內層標記寫在後面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的後代。 任務3-3知識點講解 1、CSS複合選擇器 (3)並集選擇器 並集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器(包括標記選擇器、class類選擇器id選擇器等)，都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器為它們定義相同的CSS樣式。 任務3-3知識點講解 * 項目3 “網上花店”專題頁制作 · CSS選擇器 · CSS高級特性 · CSS核心基礎 · CSS文本相關樣式 HTML 任務3-1 CSS核心基礎 任務3-2 CSS控制文本樣式 任務3-3 CSS高級特性 任務3-4 制作“網上花店”專題頁 ? 目錄 需求分析 使用HTML修飾頁面時，存在很大的局限和不足，例如維護困難、不利於代碼的閱讀等。如果希望網頁升級輕松、維護方便，就需要使用CSS實現結構與表現的分離。CSS核心基礎是學習CSS的關鍵，下面將對CSS樣式規則、引入CSS樣式表、CSS基礎選擇器進行詳細講解。 任務3-1CSS核心基礎 1 2 引入CSS樣式表 3 CSS基礎選擇器 CSS樣式規則 任務3-1知識儲備 1、CSS樣式規則 使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，其基本語法格式如下： 上述樣式規則中，選擇器用於指定CSS樣式作用的HTML對象，花括號{}內是對該對象設置的具體樣式。其中，屬性和屬性值以“鍵值對”的形式出現，屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。屬性和屬性值之間用英文“:”連接，多個“鍵值對”之間用英文“;”進行區分。 選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;} 任務3-1知識點講解 初學者在書寫CSS樣式時，除了要遵循CSS樣式規則，還必須注意CSS代碼結構中的幾個特點，具體如下： CSS樣式中的選擇器嚴格區分大小寫，屬性和值不區分大小寫，按照書寫習慣一般將“選擇器、屬性和值”都采用小寫的方式。 如果屬性的值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態下的引號。 為了提高代碼的可讀性，書寫CSS代碼時，通常會加上CSS注釋。 在CSS代碼中空格是不被解析的，花括號以及分號前後的空格可有可無。因此，可以使用空格鍵、Tab鍵、回車鍵等對樣式代碼進行排版，提高代碼的可讀性。 屬性的值和單位之間是不允許出現空格的。 任務3-1知識點講解 2、引入CSS樣式表 (1)行內式 行內式是通過標記的style屬性來設置元素的樣式，其基本語法格式如下： 該語法中style是標記的屬性，實際上任何HTML標記都擁有style屬性，用來設置行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標記及嵌套在其中的子標記起作用。 內容 標記名> 任務3-1知識點講解 2、引入CSS樣式表 (2)內嵌式 內嵌式是將CSS代碼集中寫在HTML文檔的
頭部標記中，並且用