資源簡介

(共78張PPT)
04CSS 基礎知識任務 1 制作開心餐廳網頁任務 2 制作課程介紹網頁制作開心餐廳網頁任務 1● 1. 掌握 CSS 的基本語法。● 2. 了解在 html 中引入 CSS 樣式表的方式。● 3. 熟悉 CSS 常用的選擇器。本任務主要使用 html 定義網頁的結構，用 CSS 樣式來制作完成開心餐廳網頁。開心餐廳網頁效果如圖所示。開心餐廳網頁效果步驟一：在項目下新建 html 文件，在 p 標簽中加入 4 張圖片和文字內容，并使用 width 屬性和height 屬性為圖片設置寬度和高度，p 標簽內的文字內容需要換行的地方使用 br 標簽換行，標題文字使用 h2 標簽環繞，代碼如圖所示。不加樣式開心餐廳網頁代碼不加樣式開心餐廳網頁代碼不加樣式開心餐廳網頁代碼此時網頁效果如圖所示。不加樣式開心餐廳網頁效果步驟二：接下來要新建一個 CSS 外部樣式表，對網頁的文字內容進行樣式設置。首先設置 p 標簽中的文字字體大小為 12 像素，接著設置 h2 標簽中的文字字體大小為 18 像素，顏色為紅色，然后使用類選擇器 .green、.blue 將其中兩個不同段落中的文字顏色分別設置為綠色和藍色，最后使用 id 選擇器 # rst 將第一處標題文字設置為 24 像素，顏色為綠色。CSS 代碼如圖所示。外部樣式表代碼步驟三：開心餐廳網頁通過使用 link 標簽引入 CSS 外部樣式表，link 標簽一般放置在網頁文檔的head 標簽內，當前外部樣式表的文件命名為 style.css。通過 href 屬性設置好文件路徑后，網頁文件就能夠成功引入 CSS 外部樣式表，代碼如圖所示。引入外部樣式表與標簽命名代碼CSS（cascading style sheet）中文稱為層疊樣式表，其文件擴展名為 .css。CSS 是用于增強或控制網頁樣式，并允許將樣式信息與網頁內容分離的一種標記性語言。引用樣式表的目的是將“網頁結構代碼”和“網頁樣式風格代碼”分離開，從而使網頁設計者可以對網頁布局進行更多的控制。利用樣式表，可以將整個站點上的所有網頁都指向某個 CSS 文件，然后設計者只需要修改 CSS 文件中的某一行，整個網站上對應的樣式就都會隨之發生變化。一、CSS 樣式規則使用 CSS 對網頁進行修飾，首先需要了解 CSS 樣式規則，其基本語法格式如下。在上述樣式規則中，選擇器用于指定 CSS 樣式作用的 html 對象，大括號 { } 內是對該對象設置具體樣式。初學者在書寫 CSS 樣式時，除了要遵循 CSS 樣式規則外，還需要注意以下幾個問題。1. CSS 樣式中的選擇器嚴格區分大小寫，屬性和屬性值不區分大小寫，按照書寫習慣一般將選擇器、屬性和屬性值都采用小寫的形式。2. 如果屬性值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態下的雙引號。3. 為了提高代碼的可讀性，書寫 CSS 代碼時，通常會加上 CSS 注釋。4. 在 CSS 代碼中，空格是不被解析的，大括號以及分號前后的空格可有可無。因此，可以使用空格鍵、Tab 鍵、回車鍵等對樣式代碼進行排版，以提高代碼的可讀性。二、引入 CSS 樣式表1. 行內式行內式是通過標簽的 style 屬性設置元素的樣式，其基本語法格式如下。語法中 style 是標簽的屬性，實際上任何 html 標簽都擁有 style 屬性，用來設置行內式，其中屬性和屬性值的書寫規范與 CSS 樣式規則相同。行內式只對其所在的標簽及嵌套在其中的子標簽起作用。下面通過一個案例來演示使用行內式引入 CSS 樣式的方法，如圖所示。在圖中，通過使用行內式 CSS 樣式，分別設置兩個 p 標簽的字號和顏色。行內式代碼此時網頁效果如圖所示。通過上圖可以看出，行內式也是通過標簽的 style 屬性來控制樣式的，并沒有做到結構與表現的分離，所以一般很少使用。通常，只有在樣式規則較少且只在該元素上使用一次，或者需要臨時修改某個樣式規則時使用。行內式網頁效果2. 內嵌式內嵌式是將 CSS 代碼集中寫在 html 文檔的 head 頭部標簽中，并且用 style 標簽定義，其基本語法格式如圖所示。在該語法中，style 標簽一般位于 head 標簽中的 title 標簽之后，也可以把它放在 html 文檔的任何地方。內嵌式代碼下面通過一個案例來演示內嵌式 CSS 樣式的用法，如圖所示。內嵌式代碼此時網頁效果如圖所示。內嵌式 CSS 樣式只對其所在的 html 頁面產生作用，因此，當網站是一個單網頁時，使用內嵌式是個不錯的選擇。當網站是由多個網頁組成時，不建議使用這種方式，因為此時采用內嵌式會使 CSS 代碼產生大量冗余。內嵌式網頁效果3. 外部式外部式是將所有的樣式放在一個或多個以“ CSS”為擴展名的外部樣式表文件中，通過link 標簽將外部樣式表文件引入到 html 文檔中，其基本語法格式如下。在該語法中，link 標簽需要放在頭部標簽 head 中，同時設置 link 標簽的相關屬性，具體如下。（1）href：定義外部樣式表文件的 URL。（2）type：定義所鏈接文檔的類型，指定為“ text/css”，表示鏈接的外部文件為 CSS 樣式表。（3）rel：定義當前文檔與被鏈接文檔之間的關系，指定為“ stylesheet”，表示被鏈接的文檔是一個樣式表文件。三、CSS 常用的選擇器根據選擇器類型不同，CSS 選擇器可分為基礎選擇器和復合選擇器。基礎選擇器是由單個選擇器組成的，包括標簽選擇器、類選擇器、多類名選擇器、id 選擇器和通配符選擇器。而復合選擇器可以更準確、更高效地選擇目標元素（標簽）。復合選擇器是由兩個或多個基礎選擇器通過不同的方式組合而成的。常用的復合選擇器包括交集選擇器、并集選擇器、后代選擇器、偽類選擇器等。1. 標簽選擇器標簽選擇器是指用 html 標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的 CSS 樣式。其基本語法格式如下。該語法中，所有的 html 標簽名都可以作為標簽選擇器，例如 body、h1、p、strong 等。用標簽選擇器定義的樣式對頁面中該類型的所有標簽都產生效果。2. 類選擇器類選擇器使用“.”（英文點號）表示，后面緊跟類名，其基本語法格式如下。該語法中類名即為 html 元素的 class 屬性值，大多數 html 元素都可以定義 class 屬性。類選擇器最大的優勢是可以為網頁元素對象定義單獨或相同的樣式。下面通過一個案例來學習類選擇器的應用，如圖所示。類選擇器代碼在上圖中，對 h2 標題標簽應用 class="red"，通過類選擇器設置文本顏色為紅色。對第一個 p 段落標簽應用 class="green"，將其文本顏色設置為綠色。對第二個 p 段落標簽應用 class="font22"，通過類選擇器設置文本字號為 22 像素。此時網頁效果如圖所示。類選擇器效果3. 多類名選擇器在多類名選擇器中，一個標簽的 class 值中可能包含多個類名，每個類名之間用空格分開。在使用場景中通常把多個標簽相同的樣式放在一個類中定義，獨有的樣式用其他類分開定義，使用時將標簽的 class 值設置為多個類名組合來達到聚合不同樣式集的目的，其基本語法格式如下。這里的語法格式是在標簽中的書寫，在 CSS 中跟類選擇器的寫法相似。多類選擇器代碼在上圖中，對兩個 p 段落標簽分別進行了多個名字的命名，對類名 red 設置文本顏色為紅色，此時兩行文本變為紅色。對類名 font2 設置上畫線，對類名 bold 設置下畫線，然后單獨將類名為 red bold 的文本設置字體加粗。此時頁面的顯示效果如圖所示。多類名選擇器效果4. id 選擇器id 選擇器使用“#”表示，后面緊跟 id 名，其基本語法格式如下。該語法中，id 名即為 html 元素的 id 屬性值，大多數 html 元素都可以定義 id 屬性，網頁元素的 id 值是唯一的，同一個網頁中的 id 值不能重復。下面通過一個案例來學習 id 選擇器的使用，如圖所示。id 選擇器代碼5. 交集選擇器交集選擇器就是在兩個標簽相交的部分，也就是交集修改格式。交集選擇器可以與 id選擇器和類選擇器共同使用。其基本語法格式如下。6. 并集選擇器如果某些選擇器定義的樣式完全相同或部分相同，就可以利用并集選擇器，并集選擇器是各選擇器通過英文逗號（,）連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分。其基本語法格式如下。7. 通配符選擇器通配符選擇器用“ *”號表示，它是作用范圍最廣的選擇器，能匹配頁面中所有元素。其基本語法格式如下。8. 后代選擇器后代選擇器用于選擇一個元素的后代元素，它使用空格分隔兩個元素。其基本語法格式如下。除了上述講解到的標簽選擇器、類選擇器、多類名選擇器、id 選擇器、交集選擇器、并集選擇器、通配符選擇器、后代選擇器之外，后面的項目中還會使用到偽類選擇器，待后面詳細講解。內嵌式選擇器的優先級（1 000）>id 選擇器的優先級（100）> 類選擇器和偽類選擇器的優先級（10）> 元素選擇器的優先級（1）> 通配符選擇器的優先級（0），即內嵌式選擇器優先級最高，其次是 id 選擇器，以此類推，優先級最小的為通配符選擇器。制作課程介紹網頁任務2● 1. 熟練掌握 CSS 字體樣式的設置。● 2. 熟練掌握 CSS 文本外觀的設置。● 3. 熟練掌握 CSS 背景顏色的設置。● 4. 熟練掌握 div 標簽和 span 標簽的用法。學習 html 時，可以使用文本標簽及其屬性控制文本的顯示樣式，但是這種方式比較煩瑣且不利于代碼的共享和移植。為此，CSS 提供了相應的文本樣式屬性，可以更輕松方便地控制文本樣式。本任務主要講解如何通過 CSS 字體樣式屬性、CSS 文本外觀屬性、CSS 背景顏色屬性對 Android 課程介紹網頁進行美化。本任務制作的 Android 課程介紹網頁使用了 line-height 屬性對文本的行間距進行設置，使用了 color 屬性對文本的顏色進行設置，使用了background-color 屬性對該網頁中元素的背景顏色進行設置。Android 課程介紹網頁效果如圖所示。Android 課程介紹網頁效果步驟一：在項目下新建 html 文件，在 body 中定義整個頁面的結構，一個 div 標簽中包含兩個 p標簽和兩個子 div 標簽，兩個 p 標簽中分別放入兩個課程標題圖片，兩個 div 標簽中分別放入兩段課程文字內容，代碼如圖所示。添加標簽并輸入內容步驟二：給需要設置樣式的標簽設置 id 屬性值和 class 屬性值，注意取名字的時候盡量使用英文，且具有真實意義。代碼如圖所示。引入外部樣式表和標簽定義選擇器引入外部樣式表和標簽定義選擇器運行上圖中的代碼，效果如圖所示。設置相關屬性值步驟三：在 CSS 文件中設置 Android 課程介紹網頁中元素的樣式屬性，這里多處用到了后代選擇器，后代選擇器可以選擇某元素下所有的子元素，在后代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。每個空格結合符可以解釋為“……作為……的后代”，但是要求必須從右向左讀選擇器。代碼如圖所示。設置樣式屬性設置樣式屬性步驟四：在 head 標簽中使用“ <link href="css/course.css" rel="stylesheet" type="text/css"/>”引入外部樣式表，運行 html 代碼，加入樣式屬性效果如圖所示。Android 課程介紹網頁效果一、CSS 字體樣式屬性1. font-sizefont-size 屬性用于設置字號，該屬性值可以使用相對長度單位，也可以使用絕對長度單位，具體見表。其中，相對長度單位比較常用，推薦使用像素單位 px；絕對長度單位使用較少。CSS 長度單位及說明2. font-familyfont-family 屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，例如，將網頁中所有段落文本的字體設置為宋體，可以使用圖所示的 CSS 樣式代碼。設置字體使用 font-family 設置字體時，需要注意以下幾點。（1）各種字體之間必須使用英文狀態下的逗號隔開。（2）中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前，如圖所示。（3）如果字體名中包含空格、#、 等符號，則該字體必須加英文狀態下的單引號或雙引號，如圖所示。（4）盡量使用系統默認字體，以保證網頁在任何用戶的瀏覽器中都能正確顯示。設置字體書寫方式加英文狀態引號3. font-weightfont-weight 屬性用于定義字體的粗細，其屬性值及其描述見表。在實際工作中，常用的 font-weight 屬性值為 normal 和 bold。font-weight 的屬性值及其描述4. font-variantfont-variant 屬性用于設置變體（字體變化），一般用于定義小型大寫字母，僅對英文字符有效。其可用屬性值如下。（1）normal：默認值，瀏覽器會顯示標準的字體。（2）small-caps：瀏覽器會顯示小型大寫的字體，即所有的小寫字母均會轉換為大寫。但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。5. font-stylefont-style 屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下。（1）normal：默認值，瀏覽器會顯示標準的字體樣式。（2）italic：瀏覽器會顯示斜體的字體樣式。（3）oblique：瀏覽器會顯示傾斜的字體樣式。其中 italic 和 oblique 都用于定義斜體，兩者在顯示效果上并沒有本質區別，但實際工作中常使用 italic。6. fontfont 屬性用于對字體樣式進行綜合設置，其基本語法格式如下。使用 font 屬性時，必須按上面語法格式中的順序書寫，各個屬性以空格隔開，其應用示例如圖所示。綜合設置字體樣式下面使用 font 屬性對字體樣式進行綜合設置，如圖所示。font 屬性代碼在上圖中定義了兩個段落，同時使用 font 屬性分別對它們進行相應的設置。其中，由于第二個段落省略了 font-family 屬性，這時 font 屬性不起作用。運行上圖中的代碼，效果如圖所示。使用 font 屬性綜合設置字體樣式二、CSS 文本外觀屬性1. colorcolor 屬性用于定義文本的顏色，其取值方式有如下三種。（1）預定義的顏色值，如 red、green、blue 等。（2）十六進制，如 #FF0000、#FF6600、#29D794 等。實際工作中，十六進制是最常用的定義顏色的方式。（3）RGB 代碼，如紅色可以表示為 rgb（255，0，0）或 rgb（100%，0%，0%）。2. letter-spacingletter-spacing 屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的值，允許使用負值，默認值為 normal。3. line-heightline-height 屬性用于設置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height 常用的屬性值單位有三種，分別為像素 px、相對值 em 和百分比 %，實際工作中使用最多的是像素 px 和相對值 em。4. text-transformtext-transform 屬性用于轉換英文字符的大小寫，其可用屬性值如下。（1）none：不轉換（默認值）。（2）capitalize：首字母大寫。（3）uppercase：全部字符轉換為大寫。（4）lowercase：全部字符轉換為小寫。5. text-decorationtext-decoration 屬性用于設置文本的下畫線、上畫線、刪除線等裝飾效果，其可用屬性值如下。（1）none：沒有裝飾（正常文本默認值）。（2）underline：下畫線。（3）overline：上畫線。（4）line-through：刪除線。text-decoration 后可以賦多個值，用于給文本添加多種顯示效果，例如，若需要文字同時有下畫線和刪除線效果，就可以將 underline 和 line-through 同時賦給 text-decoration。6. text-aligntext-align 屬性用于設置文本內容的水平對齊，相當于 html 中的 align 對齊屬性。其可用屬性值如下。（1）left：左對齊（默認值）。（2）right：右對齊。（3）center：居中對齊。7. text-indenttext-indent 屬性用于設置首行文本的縮進，其屬性值可為不同單位的數值如像素值（px）、字符寬度的倍數（em）、相對于瀏覽器窗口寬度的百分比（%），允許使用負值，建議使用 em 作為設置單位。下面來學習 text-indent 屬性的應用，如圖所示。首行縮進代碼首行縮進代碼三、CSS 背景顏色屬性在 CSS 中，網頁元素的背景顏色使用 background-color 屬性來設置，其屬性值與文本顏色的取值一樣，可使用預定義的顏色值、十六進制 #RRGGBB 或 RGB 代碼 rgb（r, g, b）。background-color 的默認值為 transparent，即背景透明，這時子元素會顯示父元素的背景。為了了解背景顏色屬性 background-color，下面來演示其用法，如圖所示。背景顏色代碼四、div 標簽和 span 標簽1. div 標簽div 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，且不使用任何格式與其關聯。div 元素是通用的塊元素，內部可以包含其他各種元素（包括其他 div 元素），并且可以通過 CSS 設置樣式來完成復雜的頁面布局。其語法形式如下。html 中的元素可分為兩種類型：塊級元素和行內元素。塊級元素顯示在一塊內，會自動換行，元素會從上到下垂直排列，各自占一行，如前面所講過的 p、h1、div 等標簽元素。行內元素在一行內水平排列，高度由元素的內容決定，height（高度）屬性不起作用，如后面要講的 span、a 等元素。下面通過一個案例來具體演示 div 標簽的使用，如圖所示。div 標簽的使用運行上圖中的代碼，效果如圖所示。div 標簽的使用效果2. span 標簽span 標簽用來組合文檔中的行內元素。span 標簽沒有固定的表現形式，當對它應用樣式時，它才會產生視覺上的變化。span 標簽可在行內定義區域，也就是一行可以被 span 劃分成多個區域，從而實現某種特定效果。span 標簽本身沒有任何屬性。其語法形式如下。span 標簽與 span 標簽之間只能包含文本和各種行內標簽。與 div 標簽相比，通常可以通俗地理解為 div 為大容器，span 為小容器，大容器內可以放置小容器。下面通過一個案例來具體演示 span 標簽的使用，如圖所示。span 標簽的使用span 標簽的使用在上圖中，在 div 標簽中嵌套多組 span 標簽，每組 span 標簽包含一些文字信息，然后使用 CSS 分別設置這些文字信息的樣式。運行上圖中的代碼，效果如圖所示。span 標簽的使用效果

展開更多......

收起↑