項目四 CSS 基礎知識

04CSS基礎知識203任務1制作開心餐廳網(wǎng)頁任務2制作課程介紹網(wǎng)頁204制作開心餐廳網(wǎng)頁任務1205●1.掌握CSS的基本語法。●2.了解在html中引入CSS樣式表的方式?！?.熟悉CSS常用的選擇器。206本任務主要使用html定義網(wǎng)頁的結構，用CSS樣式來制作完成開心餐廳網(wǎng)頁。開心餐廳網(wǎng)頁效果如圖所示。207開心餐廳網(wǎng)頁效果208步驟一：在項目下新建html文件，在p標簽中加入4張圖片和文字內容，并使用width屬性和height屬性為圖片設置寬度和高度，p標簽內的文字內容需要換行的地方使用br標簽換行，標題文字使用h2標簽環(huán)繞，代碼如圖所示。209不加樣式開心餐廳網(wǎng)頁代碼210不加樣式開心餐廳網(wǎng)頁代碼211不加樣式開心餐廳網(wǎng)頁代碼212此時網(wǎng)頁效果如圖所示。不加樣式開心餐廳網(wǎng)頁效果213步驟二：接下來要新建一個CSS外部樣式表，對網(wǎng)頁的文字內容進行樣式設置。首先設置p標簽中的文字字體大小為12像素，接著設置h2標簽中的文字字體大小為18像素，顏色為紅色，然后使用類選擇器.green、.blue將其中兩個不同段落中的文字顏色分別設置為綠色和藍色，最后使用id選擇器#?rst將第一處標題文字設置為24像素，顏色為綠色。CSS代碼如圖所示。外部樣式表代碼214步驟三：開心餐廳網(wǎng)頁通過使用link標簽引入CSS外部樣式表，link標簽一般放置在網(wǎng)頁文檔的head標簽內，當前外部樣式表的文件命名為style.css。通過href屬性設置好文件路徑后，網(wǎng)頁文件就能夠成功引入CSS外部樣式表，代碼如圖所示。引入外部樣式表與標簽命名代碼215CSS（cascadingstylesheet）中文稱為層疊樣式表，其文件擴展名為.css。CSS是用于增強或控制網(wǎng)頁樣式，并允許將樣式信息與網(wǎng)頁內容分離的一種標記性語言。引用樣式表的目的是將“網(wǎng)頁結構代碼”和“網(wǎng)頁樣式風格代碼”分離開，從而使網(wǎng)頁設計者可以對網(wǎng)頁布局進行更多的控制。利用樣式表，可以將整個站點上的所有網(wǎng)頁都指向某個CSS文件，然后設計者只需要修改CSS文件中的某一行，整個網(wǎng)站上對應的樣式就都會隨之發(fā)生變化。216一、CSS樣式規(guī)則使用CSS對網(wǎng)頁進行修飾，首先需要了解CSS樣式規(guī)則，其基本語法格式如下。在上述樣式規(guī)則中，選擇器用于指定CSS樣式作用的html對象，大括號{}內是對該對象設置具體樣式。217初學者在書寫CSS樣式時，除了要遵循CSS樣式規(guī)則外，還需要注意以下幾個問題。1.CSS樣式中的選擇器嚴格區(qū)分大小寫，屬性和屬性值不區(qū)分大小寫，按照書寫習慣一般將選擇器、屬性和屬性值都采用小寫的形式。2.如果屬性值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態(tài)下的雙引號。3.為了提高代碼的可讀性，書寫CSS代碼時，通常會加上CSS注釋。4.在CSS代碼中，空格是不被解析的，大括號以及分號前后的空格可有可無。因此，可以使用空格鍵、Tab鍵、回車鍵等對樣式代碼進行排版，以提高代碼的可讀性。218二、引入CSS樣式表1.行內式行內式是通過標簽的style屬性設置元素的樣式，其基本語法格式如下。語法中style是標簽的屬性，實際上任何html標簽都擁有style屬性，用來設置行內式，其中屬性和屬性值的書寫規(guī)范與CSS樣式規(guī)則相同。行內式只對其所在的標簽及嵌套在其中的子標簽起作用。219下面通過一個案例來演示使用行內式引入CSS樣式的方法，如圖所示。在圖中，通過使用行內式CSS樣式，分別設置兩個p標簽的字號和顏色。行內式代碼220此時網(wǎng)頁效果如圖所示。通過上圖可以看出，行內式也是通過標簽的style屬性來控制樣式的，并沒有做到結構與表現(xiàn)的分離，所以一般很少使用。通常，只有在樣式規(guī)則較少且只在該元素上使用一次，或者需要臨時修改某個樣式規(guī)則時使用。行內式網(wǎng)頁效果2212.內嵌式內嵌式是將CSS代碼集中寫在html文檔的head頭部標簽中，并且用style標簽定義，其基本語法格式如圖所示。在該語法中，style標簽一般位于head標簽中的title標簽之后，也可以把它放在html文檔的任何地方。內嵌式代碼222下面通過一個案例來演示內嵌式CSS樣式的用法，如圖所示。內嵌式代碼223此時網(wǎng)頁效果如圖所示。內嵌式CSS樣式只對其所在的html頁面產(chǎn)生作用，因此，當網(wǎng)站是一個單網(wǎng)頁時，使用內嵌式是個不錯的選擇。當網(wǎng)站是由多個網(wǎng)頁組成時，不建議使用這種方式，因為此時采用內嵌式會使CSS代碼產(chǎn)生大量冗余。內嵌式網(wǎng)頁效果2243.外部式外部式是將所有的樣式放在一個或多個以“CSS”為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件引入到html文檔中，其基本語法格式如下。225在該語法中，link標簽需要放在頭部標簽head中，同時設置link標簽的相關屬性，具體如下。（1）href：定義外部樣式表文件的URL。（2）type：定義所鏈接文檔的類型，指定為“text/css”，表示鏈接的外部文件為CSS樣式表。（3）rel：定義當前文檔與被鏈接文檔之間的關系，指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。226三、CSS常用的選擇器根據(jù)選擇器類型不同，CSS選擇器可分為基礎選擇器和復合選擇器?；A選擇器是由單個選擇器組成的，包括標簽選擇器、類選擇器、多類名選擇器、id選擇器和通配符選擇器。而復合選擇器可以更準確、更高效地選擇目標元素（標簽）。復合選擇器是由兩個或多個基礎選擇器通過不同的方式組合而成的。常用的復合選擇器包括交集選擇器、并集選擇器、后代選擇器、偽類選擇器等。2271.標簽選擇器標簽選擇器是指用html標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統(tǒng)一的CSS樣式。其基本語法格式如下。該語法中，所有的html標簽名都可以作為標簽選擇器，例如body、h1、p、strong等。用標簽選擇器定義的樣式對頁面中該類型的所有標簽都產(chǎn)生效果。2282.類選擇器類選擇器使用“.”（英文點號）表示，后面緊跟類名，其基本語法格式如下。該語法中類名即為html元素的class屬性值，大多數(shù)html元素都可以定義class屬性。類選擇器最大的優(yōu)勢是可以為網(wǎng)頁元素對象定義單獨或相同的樣式。229下面通過一個案例來學習類選擇器的應用，如圖所示。類選擇器代碼230在上圖中，對h2標題標簽應用class="red"，通過類選擇器設置文本顏色為紅色。對第一個p段落標簽應用class="green"，將其文本顏色設置為綠色。對第二個p段落標簽應用class="font22"，通過類選擇器設置文本字號為22像素。此時網(wǎng)頁效果如圖所示。類選擇器效果2313.多類名選擇器在多類名選擇器中，一個標簽的class值中可能包含多個類名，每個類名之間用空格分開。在使用場景中通常把多個標簽相同的樣式放在一個類中定義，獨有的樣式用其他類分開定義，使用時將標簽的class值設置為多個類名組合來達到聚合不同樣式集的目的，其基本語法格式如下。232這里的語法格式是在標簽中的書寫，在CSS中跟類選擇器的寫法相似。多類選擇器代碼233在上圖中，對兩個p段落標簽分別進行了多個名字的命名，對類名red設置文本顏色為紅色，此時兩行文本變?yōu)榧t色。對類名font2設置上畫線，對類名bold設置下畫線，然后單獨將類名為redbold的文本設置字體加粗。此時頁面的顯示效果如圖所示。多類名選擇器效果2344.id選擇器id選擇器使用“#”表示，后面緊跟id名，其基本語法格式如下。該語法中，id名即為html元素的id屬性值，大多數(shù)html元素都可以定義id屬性，網(wǎng)頁元素的id值是唯一的，同一個網(wǎng)頁中的id值不能重復。235下面通過一個案例來學習id選擇器的使用，如圖所示。id選擇器代碼2365.交集選擇器交集選擇器就是在兩個標簽相交的部分，也就是交集修改格式。交集選擇器可以與id選擇器和類選擇器共同使用。其基本語法格式如下。6.并集選擇器如果某些選擇器定義的樣式完全相同或部分相同，就可以利用并集選擇器，并集選擇器是各選擇器通過英文逗號（,）連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分。其基本語法格式如下。2377.通配符選擇器通配符選擇器用“*”號表示，它是作用范圍最廣的選擇器，能匹配頁面中所有元素。其基本語法格式如下。8.后代選擇器后代選擇器用于選擇一個元素的后代元素，它使用空格分隔兩個元素。其基本語法格式如下。238除了上述講解到的標簽選擇器、類選擇器、多類名選擇器、id選擇器、交集選擇器、并集選擇器、通配符選擇器、后代選擇器之外，后面的項目中還會使用到偽類選擇器，待后面詳細講解。內嵌式選擇器的優(yōu)先級（1000）>id選擇器的優(yōu)先級（100）>類選擇器和偽類選擇器的優(yōu)先級（10）>元素選擇器的優(yōu)先級（1）>通配符選擇器的優(yōu)先級（0），即內嵌式選擇器優(yōu)先級最高，其次是id選擇器，以此類推，優(yōu)先級最小的為通配符選擇器。制作課程介紹網(wǎng)頁任務2

239●1.熟練掌握CSS字體樣式的設置?！?.熟練掌握CSS文本外觀的設置?！?.熟練掌握CSS背景顏色的設置?！?.熟練掌握div標簽和span標簽的用法。240學習html時，可以使用文本標簽及其屬性控制文本的顯示樣式，但是這種方式比較煩瑣且不利于代碼的共享和移植。為此，CSS提供了相應的文本樣式屬性，可以更輕松方便地控制文本樣式。241242本任務主要講解如何通過CSS字體樣式屬性、CSS文本外觀屬性、CSS背景顏色屬性對Android課程介紹網(wǎng)頁進行美化。本任務制作的Android課程介紹網(wǎng)頁使用了line-height屬性對文本的行間距進行設置，使用了color屬性對文本的顏色進行設置，使用了background-color屬性對該網(wǎng)頁中元素的背景顏色進行設置。Android課程介紹網(wǎng)頁效果如圖所示。Android課程介紹網(wǎng)頁效果243步驟一：在項目下新建html文件，在body中定義整個頁面的結構，一個div標簽中包含兩個p標簽和兩個子div標簽，兩個p標簽中分別放入兩個課程標題圖片，兩個div標簽中分別放入兩段課程文字內容，代碼如圖所示。244添加標簽并輸入內容245步驟二：給需要設置樣式的標簽設置id屬性值和class屬性值，注意取名字的時候盡量使用英文，且具有真實意義。代碼如圖所示。引入外部樣式表和標簽定義選擇器246引入外部樣式表和標簽定義選擇器247運行上圖中的代碼，效果如圖所示。設置相關屬性值248步驟三：在CSS文件中設置Android課程介紹網(wǎng)頁中元素的樣式屬性，這里多處用到了后代選擇器，后代選擇器可以選擇某元素下所有的子元素，在后代選擇器中，規(guī)則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。每個空格結合符可以解釋為“……作為……的后代”，但是要求必須從右向左讀選擇器。代碼如圖所示。249設置樣式屬性250設置樣式屬性251步驟四：在head標簽中使用“<linkhref="css/course.css"rel="stylesheet"type="text/css"/>”引入外部樣式表，運行html代碼，加入樣式屬性效果如圖所示。Android課程介紹網(wǎng)頁效果252一、CSS字體樣式屬性1.font-sizefont-size屬性用于設置字號，該屬性值可以使用相對長度單位，也可以使用絕對長度單位，具體見表。其中，相對長度單位比較常用，推薦使用像素單位px；絕對長度單位使用較少。253CSS長度單位及說明2542.font-familyfont-family屬性用于設置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如，將網(wǎng)頁中所有段落文本的字體設置為宋體，可以使用圖所示的CSS樣式代碼。設置字體255使用font-family設置字體時，需要注意以下幾點。（1）各種字體之間必須使用英文狀態(tài)下的逗號隔開。（2）中文字體需要加英文狀態(tài)下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前，如圖所示。（3）如果字體名中包含空格、#、￥等符號，則該字體必須加英文狀態(tài)下的單引號或雙引號，如圖所示。（4）盡量使用系統(tǒng)默認字體，以保證網(wǎng)頁在任何用戶的瀏覽器中都能正確顯示。256設置字體書寫方式加英文狀態(tài)引號2573.font-weightfont-weight屬性用于定義字體的粗細，其屬性值及其描述見表。在實際工作中，常用的font-weight屬性值為normal和bold。font-weight的屬性值及其描述2584.font-variantfont-variant屬性用于設置變體（字體變化），一般用于定義小型大寫字母，僅對英文字符有效。其可用屬性值如下。（1）normal：默認值，瀏覽器會顯示標準的字體。（2）small-caps：瀏覽器會顯示小型大寫的字體，即所有的小寫字母均會轉換為大寫。但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。2595.font-stylefont-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下。（1）normal：默認值，瀏覽器會顯示標準的字體樣式。（2）italic：瀏覽器會顯示斜體的字體樣式。（3）oblique：瀏覽器會顯示傾斜的字體樣式。其中italic和oblique都用于定義斜體，兩者在顯示效果上并沒有本質區(qū)別，但實際工作中常使用italic。2606.fontfont屬性用于對字體樣式進行綜合設置，其基本語法格式如下。使用font屬性時，必須按上面語法格式中的順序書寫，各個屬性以空格隔開，其應用示例如圖所示。綜合設置字體樣式261下面使用font屬性對字體樣式進行綜合設置，如圖所示。font屬性代碼262在上圖中定義了兩個段落，同時使用font屬性分別對它們進行相應的設置。其中，由于第二個段落省略了font-family屬性，這時font屬性不起作用。運行上圖中的代碼，效果如圖所示。使用font屬性綜合設置字體樣式263二、CSS文本外觀屬性1.colorcolor屬性用于定義文本的顏色，其取值方式有如下三種。（1）預定義的顏色值，如red、green、blue等。（2）十六進制，如#FF0000、#FF6600、#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。（3）RGB代碼，如紅色可以表示為rgb（255，0，0）或rgb（100%，0%，0%）。2642.letter-spacingletter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的值，允許使用負值，默認值為normal。3.line-heightline-height屬性用于設置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px、相對值em和百分比%，實際工作中使用最多的是像素px和相對值em。2654.text-transformtext-transform屬性用于轉換英文字符的大小寫，其可用屬性值如下。（1）none：不轉換（默認值）。（2）capitalize：首字母大寫。（3）uppercase：全部字符轉換為大寫。（4）lowercase：全部字符轉換為小寫。2665.text-decorationtext-decoration屬性用于設置文本的下畫線、上畫線、刪除線等裝飾效果，其可用屬性值如下。（1）none：沒有裝飾（正常文本默認值）。（2）underline：下畫線。（3）overline：上畫線。（4）line-through：刪除線。text-decoration后可以賦多個值，用于給文本添加多種顯示效果，例如，若需要文字同時有下畫線和刪除線效果，就可以將underline和line-through同時賦給text-decoration。2676.text-aligntext-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性。其可用屬性值如下。（1）left：左對齊（默認值）。（2）right：右對齊。（3）center：居中對齊。2687.text-indenttext-indent屬性用于設置首行文本的縮進，其屬性值可為不同單位的數(shù)值如像素值（px）、字符寬度的倍數(shù)（em）、相對于瀏覽器窗口寬度的百分比（%），允許使用負值，建議使用em作為設置單位。269下面來學習text-indent屬性的應用，如圖所示。首行縮進代碼270首行縮進代碼271三、CSS背景顏色屬性在CSS中，網(wǎng)頁元素的背景顏色使用background-color屬性來設置，其屬性值與文本顏色的取值一樣，可使用預定義的顏色值、十六進制#RRGGBB或RGB代碼rgb（r,g,b）。background-color的默認值為transparent，即背景透明，這時子