電子課件單元4 CSS3概述與基本語法

1、 內(nèi)容可修改電子課件單元4 CSS3概述與基本語法CSS3概述與基本語法CSS3概述一個(gè)布局美觀的頁面以及高訪問量的網(wǎng)站，是網(wǎng)頁設(shè)計(jì)者的追求。CSS3可以對(duì)頁面布局、字體、顏色、背景和其他圖文效果的實(shí)現(xiàn)提供更加精確的控制。僅有HTML定義的網(wǎng)頁添加樣式美化后的頁面CSS3概述CSS 全稱 Cascading Style Sheet ，稱為層疊樣式表，也可以稱為CSS樣式表或樣式表，其文件擴(kuò)展名為.css。CSS是用于增強(qiáng)或控制網(wǎng)頁樣式，并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。使用 CSS3 最大優(yōu)勢(shì)是，在后期維護(hù)中如果一些外觀樣式需要修改 ，只需要修改相應(yīng)的代碼即可。CSS3概述CSS

2、3是CSS的升級(jí)版本，3只是版本號(hào)，它在CSS的基礎(chǔ)上增加了很多強(qiáng)大的新功能。CSS3配合HTML5標(biāo)準(zhǔn)，可以實(shí)現(xiàn)原來必須使用圖片或JavaScript才能完成的效果，大大提高了網(wǎng)頁開發(fā)的效率。CSS3的基本語法CSS樣式表由若干條樣式規(guī)則組成，這些樣式規(guī)則可以應(yīng)用到不同的元素或文檔中來定義它們的顯示效果。每一條樣式規(guī)則由三部分構(gòu)成：選擇器（selector）、屬性（property）和屬性值（value）?；靖袷饺缦拢?selector property : value; p color:red; 示例：屬性值選擇器CSS3的基本語法如果要定義選擇器的多個(gè)屬性，則屬性和屬性值為一組，組與組

3、之間用“；”隔開。p font-family: 楷體; color:red; font-size:50px; font-weight :bold; 示例：CSS3語法規(guī)范 1CSS樣式中選擇器嚴(yán)格區(qū)分大小寫，屬性和值不區(qū)分大小寫，但按照書寫規(guī)范，一般都使用小寫。樣式代碼中的標(biāo)點(diǎn)符號(hào)，必須用英文狀態(tài)下的符號(hào)。多個(gè)屬性間必須用分號(hào)間隔開，最后一個(gè)屬性后的分號(hào)可以省略，但建議保留。 2 3在編寫CSS代碼時(shí)，為了提高代碼的可讀性，可以加上CSS注釋。如果屬性的值由多個(gè)單詞組成或中間包含空格，必須為這個(gè)屬性值加上引號(hào)。CSS3語法規(guī)范p font-family: 楷體; /* 定義字體 */ colo

4、r: red; /* 定義文本顏色 */示例：示例：pfont-family: arial black; 4樣式規(guī)則中不同屬性建議換行寫，可讀性更好。 5 6CSS 樣式代碼插入的形式CSS樣式能很好地控制頁面顯示，分離網(wǎng)頁內(nèi)容和樣式代碼，它控制HTML5頁面效果的方式包括行內(nèi)樣式、內(nèi)嵌樣式 、鏈接樣式和導(dǎo)入樣式。如何插入樣式表 不以規(guī)矩，不能成方圓。行內(nèi)樣式是所有樣式中比較簡單、直觀的方法。他直接把CSS代碼添加到HTML文件中，是作為HTML的標(biāo)簽屬性呈現(xiàn)的。通過這種方法，可以很簡單地對(duì)某個(gè)元素單獨(dú)定義樣式。行內(nèi)樣式的使用方法是直接在HTML標(biāo)簽中使用style屬性，該屬性的內(nèi)容就是CSS

5、的屬性和值。示例： 行內(nèi)樣式頁面標(biāo)題pcolor:#FF00FF;font-size:25px;內(nèi)嵌樣式就是將CSS樣式代碼添加到與之間，并且用和標(biāo)簽進(jìn)行聲明。示例： 內(nèi)嵌樣式鏈接樣式是指在外部定義CSS樣式表并形成以.css為擴(kuò)展名的文件，然后在HTML頁面中通過標(biāo)簽鏈接該CSS樣式表。該鏈接語句必須放在頁面的與之間。頁面標(biāo)題 示例：鏈接樣式使用導(dǎo)入樣式時(shí)，在HTML文件初始化時(shí)，樣式會(huì)被導(dǎo)入到HTML文件內(nèi)，作為文件的一部分，類似于內(nèi)嵌效果。導(dǎo)入樣式表的方法是在內(nèi)嵌樣式表的標(biāo)簽中，使用import導(dǎo)入一個(gè)外部的CSS文件。 import url(style4-3.css); 示例：導(dǎo)入樣式

6、導(dǎo)入樣式與鏈接樣式雖然很類似，但在實(shí)際開發(fā)中，極少用到。大家更傾向于使用link方式（鏈接樣式）。因?yàn)閕mport方式先加載HTML，后加載CSS，如果網(wǎng)速不好，頁面是沒有樣式的，而使用鏈接樣式表，HTML和CSS同時(shí)加載，用戶體驗(yàn)更好。導(dǎo)入樣式基本選擇器想要把CSS樣式應(yīng)用于特定的HTML元素，首先需要通過選擇器找到該目標(biāo)元素。所有網(wǎng)頁元素都是通過不同的CSS選擇器進(jìn)行控制的?；A(chǔ)選擇器主要包括四種:標(biāo)簽選擇器類選擇器id選擇器通配符選擇器引入p color: red; font-size: 20px; h2 color: blue; font-size: 30px; 標(biāo)簽選擇器就是通過標(biāo)簽

7、的名字來選擇 HTML 元素修改css樣式。示例： 標(biāo)簽選擇器 標(biāo)簽選擇器基本語法格式如下所示: selector property:value; 標(biāo)簽選擇器通常用于設(shè)置在整個(gè)網(wǎng)站都會(huì)出現(xiàn)的基本樣式。通過聲明一個(gè)具體標(biāo)簽，可以對(duì)文檔里這個(gè)標(biāo)簽出現(xiàn)的每一個(gè)地方應(yīng)用樣式規(guī)則。標(biāo)簽選擇器通配符選擇器用“*”表示，用于選擇頁面上的所有的HTML元素。示例： * margin: 0;padding: 0;通配符選擇器類選擇器用來為一系列標(biāo)簽定義相同的呈現(xiàn)方式，基本語法格式如下所示： .classValue property : value; 示例：.cl color:red; .fs font-size

8、: 20px; 類選擇器類選擇器定義的樣式不會(huì)立即呈現(xiàn)出來，需要在標(biāo)簽中通過class屬性調(diào)用該樣式。示例：CSS代碼 .cl color:red; 當(dāng)要給一個(gè)元素設(shè)定多個(gè)類樣式，即class同時(shí)設(shè)置多個(gè)值時(shí)，每個(gè)值要用空格間隔開。示例：HTML代碼 class選擇器的使用CSS代碼 .cl color:red; .fs font-size: 20px; HTML代碼 class選擇器的使用 類選擇器id選擇器和類選擇器類似，都是針對(duì)特定屬性的屬性值進(jìn)行匹配。但是id屬性具有唯一性，一個(gè)網(wǎng)頁文件中只能有一個(gè)標(biāo)簽使用某一id的屬性值。定義id選擇器的基本語法格式如下所示： #idValue pr

9、operty: value;示例：CSS代碼 #fscolor:red;font-size:25px;HTML代嗎 id選擇器的使用id 選擇器類選擇器與id選擇器主要有以下兩種區(qū)別： 1類選擇器可以給任意數(shù)量的標(biāo)簽定義樣式，但id選擇器只能使用一次。id選擇器比類選擇器具有更高的優(yōu)先級(jí)。 2id 選擇器復(fù)合選擇器復(fù)合選擇器將多種選擇器進(jìn)行搭配，可以構(gòu)成一種復(fù)合選擇器，也稱為組合選擇器，也就是將標(biāo)簽選擇器、類選擇器和id選擇器組合起來使用。組合方式很多，可以是：（1） 標(biāo)簽選擇器和標(biāo)簽選擇器組合 （2）標(biāo)簽選擇器和類選擇器組合（3）標(biāo)簽選擇器和id選擇器組合后代選擇器 后代選擇器用于選擇某個(gè)父

10、元素下面所有的元素，例如把作為h1元素后代的em元素的文本變?yōu)榧t色，而其他元素后代的em元素則不受控制。h1 em color:red;代碼寫法是一級(jí)子元素選擇器 一級(jí)子元素選擇器用于 。后代選擇器是選擇父元素的所有子孫元素，一級(jí)子元素選擇器只選擇第一級(jí)子元素，不會(huì)再向下查找元素。選擇某個(gè)父元素的直接子元素示例把作為p元素一級(jí)子元素的 em 元素的文本變?yōu)榧t色。p em color:red;寫法是交集選擇器交集選擇器由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格。示例設(shè)置類名為one的p元素文本顏色為紅色。p.one color:red;寫法是并集

11、選擇器 并集選擇器是多個(gè)選擇器具有同一種樣式，中間用逗號(hào)隔開，標(biāo)簽選擇器，類選擇器，id選擇器都可以。并集選擇器又叫分組選擇器，逗號(hào)表示分組。示例要把所有h2元素、em元素和類名為bt的元素設(shè)置相同樣式文本顏色為紅色。h2,em,.btcolor: red;寫法是偽類選擇器偽類選擇器偽類選擇器是在CSS中已經(jīng)定義好的選擇器,不能隨便命名定義。偽類選擇器可以分為UI元素狀態(tài)偽類選擇器和結(jié)構(gòu)偽類選擇器兩種。UI元素狀態(tài)偽類選擇器的使用方法UI元素狀態(tài)偽類選擇器的特點(diǎn)是：指定的樣式只有當(dāng)元素處于某種狀態(tài)下時(shí)才起作用，在默認(rèn)狀態(tài)下不起作用。UI元素狀態(tài)包括：選中、未選中、獲取焦點(diǎn)、失去焦點(diǎn)等。常用的U

12、I元素狀態(tài)偽類選擇器選擇器功能描述:link用于設(shè)置超鏈接未被訪問時(shí)的樣式:visited用于設(shè)置超鏈接已經(jīng)被訪問過的樣式:hover用于設(shè)置元素被激活時(shí) （鼠標(biāo)在元素上點(diǎn)擊沒有松開的狀態(tài)）的樣式:active選擇父元素下僅有的一個(gè)子元素:focus 用于設(shè)置元素獲得焦點(diǎn)時(shí)的樣式:checked 用于設(shè)置表單中復(fù)選按鈕或者單選按鈕被選中狀態(tài)時(shí)的樣式常用的UI元素狀態(tài)偽類選擇器示例：超鏈接四種狀態(tài)的樣式a:link color:black; text-decoration:none; a:visited color:black; text-decoration:none; a:hover col

13、or:red; text-decoration:underline; a:active color:purple; text-decoration:underline; 注意：標(biāo)簽的這四種偽類選擇器要按a:link、a:visited、a:hover、a:active的順序定義，否則會(huì)導(dǎo)致其中某個(gè)樣式無法顯示。結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器，可以根據(jù)元素在文檔中所處的位置，來動(dòng)態(tài)選擇元素，從而減少HTML文檔對(duì)ID或類的依賴，有助于保持代碼干凈整潔。選擇器功能描述:first-child選擇父元素的第一個(gè)子元素:last-child選擇父元素的最后一個(gè)子元素:nth-child(n)選擇父元素的

14、第n個(gè)位置的子元素，參數(shù)n可以是數(shù)字、關(guān)鍵字（odd、even）、公式（2n、2n+3），參數(shù)的索引從1開始計(jì)算:only-child選擇父元素下僅有的一個(gè)子元素偽元素選擇器偽元素是不存在的元素或是一種特殊的頁面元素，表示一個(gè)特殊的位置。CSS中有四種偽元素選擇器，如下表所示。選擇器功能描述:first-line為某個(gè)元素的第一行文字使用樣式，只能應(yīng)用于塊級(jí)元素:first-letter為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式，只能應(yīng)用于塊級(jí)元素:before在某個(gè)元素之前插入一些內(nèi)容，需要與content屬性配合使用:after在某個(gè)元素之后插入一些內(nèi)容，需要與content屬性配合使用

15、注意在 CSS3 中偽元素選擇器用雙冒號(hào)表示法，以區(qū)分偽類選擇器。但是在 CSS2 和 CSS1 中，偽類和偽元素都使用了單冒號(hào)語法。因此目前瀏覽器為了兼容CSS2 和 CSS1 偽元素可接受單冒號(hào)語法。樣式的層疊與繼承樣式的層疊與繼承CSS是層疊樣式表的簡稱，其基本特征是層疊性和繼承性。對(duì)于網(wǎng)頁開發(fā)者來說，需要深刻理解并靈活使用這兩個(gè)概念。CSS層疊性文檔中的一個(gè)元素可能同時(shí)被多個(gè)CSS選擇器選中，每個(gè)選擇器都有一些樣式規(guī)則，即多個(gè)選擇器的作用發(fā)生了疊加，這就是層疊性。CSS繼承性繼承性是指定義CSS樣式時(shí)，子元素會(huì)繼承父元素的某些樣式，如字體、字號(hào)和文本顏色。CSS繼承性繼承性非常有用，能

16、使網(wǎng)頁開發(fā)者不必在元素的每個(gè)后代上添加相同的樣式。如果設(shè)置的屬性是一個(gè)可繼承的屬性，只需將其應(yīng)用于父元素即可。示例div,p,ul,o1,h1,h2,h3,licolor:black;把頁面上的div p ul ol 標(biāo)題h1 h2 h3 和所有的列表項(xiàng)li 都變成黑色功能可以簡單的寫成 body color:black; 第二種寫法可以達(dá)到相同的控制效果，且代碼更簡潔。CSS繼承性恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。但是，如果在網(wǎng)頁中所有的元素都大量繼承樣式，那么判斷樣式的來源就會(huì)很困難，所以對(duì)于字體、文本屬性等網(wǎng)頁中通用的樣式可以使用繼承。這里還要注意，不是所有的CSS屬性

17、都可以繼承的。顏色屬性、文本相關(guān)屬性、列表相關(guān)屬性等。有繼承性的CSS屬性包括：寬度（width）、高度（height）、邊框（border）、邊距（margin）、背景（background）等。無繼承性的CSS屬性包括：CSS優(yōu)先級(jí)CSS具有層疊性和繼承性，那么文檔中的一個(gè)元素繼承來的樣式或多個(gè)選擇器疊加的樣式發(fā)生沖突時(shí)，這時(shí)就會(huì)出現(xiàn)CSS優(yōu)先級(jí)的問題。CSS優(yōu)先級(jí)權(quán)重計(jì)算方式樣式名權(quán)重繼承0.1標(biāo)簽選擇器1class選擇器10id選擇器100行內(nèi)樣式1000!important最高級(jí)別!important擁有最高級(jí)別權(quán)重, 段落文本最終顯示顏色為“blue”藍(lán)色。!important擁有最高級(jí)別權(quán)重, 段落文本最終顯示顏色為“blue”藍(lán)色。CSS優(yōu)先級(jí)如果只是簡單計(jì)算選擇器的權(quán)重，#p1是id選擇器權(quán)重為100，p選擇器權(quán)重為1