CSS課件CSS基本選擇器

在CSS沒有被引入之前，傳統(tǒng)的HTML語言要實(shí)現(xiàn)頁面美工設(shè)計(jì)是非常麻煩的。<h1><fontcolor=“#ff0000”face=“宋體”>CSS標(biāo)記</font></h1>重復(fù)、修改CSS應(yīng)運(yùn)而生??！學(xué)習(xí)目標(biāo)理解CSS的定義及優(yōu)點(diǎn)；理解CSS3的新特性；掌握CSS的基本語法；掌握CSS的三種基本選擇器；能利用CSS基本語法知識美化頁面。1.CSS即層疊樣式表（CascadingStyleSheet）。樣式就是對網(wǎng)頁中的元素屬性的整體概括，即描述所有網(wǎng)頁對象的顯示形式。層疊就是指當(dāng)HTML文件引用多個CSS文件時，若文件之間所定義的樣式發(fā)生了沖突，將依據(jù)層次的先后來處理其樣式對內(nèi)容的控制。一、CSS的理解1.CSS即層疊樣式表（CascadingStyleSheet）。CSS是用于控制網(wǎng)頁樣式并允許樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS最早是由W3C審核通過并推薦使用的。CSS的引入引發(fā)了網(wǎng)頁設(shè)計(jì)的一個又一個高潮，使用CSS設(shè)計(jì)的優(yōu)秀頁面層出不窮。一、CSS的理解1.CSS即層疊樣式表（CascadingStyleSheet）。HTML與CSS的關(guān)系就是“內(nèi)容結(jié)構(gòu)”與“表現(xiàn)形式”的關(guān)系，由HTML確定網(wǎng)頁的結(jié)構(gòu)內(nèi)容，而通過CSS來決定頁面的表現(xiàn)形式。一、CSS的理解2.CSS發(fā)展簡史一、CSS的理解自己查閱資料，整理概括！2.CSS發(fā)展簡史-CSS3CSS3是CSS當(dāng)前的最新版本，該版本提供了更加豐富且實(shí)用的規(guī)范，如列表模塊、超鏈接、語言模塊、背景和邊框、顏色、文字特效、多欄布局、動畫等。采用CSS3技術(shù)將會美化頁面，創(chuàng)造動畫效果顯著地提高用戶體驗(yàn)，同時能極大地提高程序的性能。一、CSS的理解3.CSS的優(yōu)勢表現(xiàn)與內(nèi)容相分離；增強(qiáng)了網(wǎng)頁的表現(xiàn)力；使整個網(wǎng)站顯示風(fēng)格趨于統(tǒng)一。一、CSS的理解3.CSS的優(yōu)勢表現(xiàn)與內(nèi)容相分離；增強(qiáng)了網(wǎng)頁的表現(xiàn)力；使整個網(wǎng)站顯示風(fēng)格趨于統(tǒng)一。一、CSS的理解二、CSS的構(gòu)成Selector{property:value;}選擇器

屬性

屬性值舉例：Body{background-color:#ff0000;font-size:12px;}

聲明聲明聲明中“屬性/屬性值”之間必須用“：”分隔；聲明中可以包含若干對“屬性/屬性值”；注意聲明在CSS中，有些屬性可以表示多個屬性的值。如關(guān)于文字的設(shè)置，有font-family、font-size、font-style，這些可以用一個屬性font來表示。注意聲明在CSS中，有些屬性可以設(shè)置多個屬性值，用逗號分隔，將按照先后順序優(yōu)先選擇。注意選擇器

選擇器是CSS中很重要的概念，所有HTML語言中的標(biāo)記樣式都是通過不同的CSS選擇器控制的。

用戶只需要通過選擇器對不同的HTML標(biāo)簽進(jìn)行選擇，并賦予各種樣式聲明，即可實(shí)現(xiàn)各種效果?；綜SS選擇器

在CSS中，有多種不同類型的選擇器。基本CSS選擇器主要有“標(biāo)記”選擇器、類別選擇器和ID選擇器。標(biāo)記選擇器1

一個HTML頁面由很多不同的標(biāo)記組成，而CSS標(biāo)記選擇器就是聲明哪些標(biāo)記采用哪種CSS樣式。

每一種HTML標(biāo)記的名稱都可以作為相應(yīng)的標(biāo)記選擇器的名稱。標(biāo)記選擇器1標(biāo)記選擇器P{color:red;border:2pxsolde#ffcc00;}舉例：h2{font-size:24px;line-weight:30px;}1

標(biāo)記選擇器定義的樣式會影響整個頁面中所有該元素的顯示；若想改變某個元素的默認(rèn)樣式時，可使用標(biāo)記選擇器；當(dāng)統(tǒng)一文檔某個元素的顯示效果時，可使用標(biāo)記選擇器；對于div、span等通用結(jié)構(gòu)元素，不建議使用標(biāo)記選擇器。注意標(biāo)記選擇器1類別選擇器2類別選擇器的名稱可以由用戶自定義，屬性和值跟標(biāo)記選擇器一樣，也必須符合CSS規(guī)范。舉例：定義如下：

.red{color:red;}

應(yīng)用時：

<h3class=“red”>...</h3>類別選擇器2

class可以把具有相同樣式的元素統(tǒng)一為一類；只有應(yīng)用了該class名稱的元素會受到影響；同一個類別可以應(yīng)用于多個標(biāo)記；

同一個標(biāo)記可以運(yùn)用多個類別；不要把每個元素都應(yīng)用一個class，會產(chǎn)生代碼冗余；命名時通俗易懂。注意類別選擇器2ID選擇器3

ID選擇器的使用方法和類別選擇器基本相同，不同之處在于ID選擇器只能在于HTML頁面中使用一次。舉例：

定義如下：#top{width:800px;height:150px;background-color:#ffcc00;}

應(yīng)用時：

<divid=“top”>...</div>ID選擇器3ID選擇器3

只有應(yīng)用了該id名稱的元素會受到影響；用來構(gòu)建整體框架的元素對象應(yīng)定義id屬性。在符合Web標(biāo)準(zhǔn)的設(shè)計(jì)中，每個id名稱只能使用一次<divid=“header”><divid=“l(fā)ogo”></div><divid=“banner”></div><divid=“nav”></div></div><divid=“main”><divid=“l(fā)eft”></div><divid=“right”></div></div><divid=“footer”></div>注意基本CSS選擇器類別選擇器和ID選擇器定義時前綴不同，前者使用“.”，后者使用“#”；在HTML使用時，前者用class屬性，后者用id屬性?；綜SS選擇器一個ID選擇器的樣式只能用于一個HTML元素，一個HTML元素只能使用一個ID選擇器。類別選擇器沒有這個限制?；綜SS選擇器（1）類選擇器可以給任意多的標(biāo)記定義樣式，但I(xiàn)D選擇器在頁面標(biāo)記中只能使用一次；（2）ID選擇器樣式比類選擇器樣式優(yōu)先級高。ID選擇器局限性大