網頁設計師從入門到精通CSS選擇符詳解

2021-07-03 09:08:15 字數 1573 閱讀 1151

一、型別選擇符

什麼是型別選擇符?指以網頁中已有的標籤型別作為名稱的行徑符。body是網頁中的乙個標籤型別,div,p,span都是。

如下:body {}

div {}

p {}

span {}

二、群組選擇符

對於xhmtl物件,可以對一組同時進行了相同的樣式指派。

使用逗號對選擇符進行了分隔,這樣書寫的優點在於同樣的樣式只需要書寫一次即可,減少**量,改善css**結構。

使用時應該注意"逗號"是在半形模式下,並非中文全形模式。

如下:h1,h2,h6,p,span

三、包含選擇符

對某物件中的子物件進行樣式指點定,這樣選擇方式就發揮了作用。

需要注意的是,僅對此物件的子物件標籤有效,對於其它單獨存在或位於此物件以外的子物件,不應用此樣式設定。

這樣做的優點在於,幫我們避免過多的id、class設定,直接對所需的元素進行定義。

如下:h2 span

如下:body h1 span strong

四、id選擇符

根據dom文件物件模型原理所出現的選擇符,對於乙個xhtml檔案,其中的每乙個標籤都可以使用乙個id=""的形式進行乙個名稱指派,但需要注意,在乙個xhtml檔案中id是具有唯一性而不可以重複的。

在div css布局的網頁中,可以針對不同的用途進行命名,如頭部為header、底部為footer。

xhtml如下:

css如下:

#content

五、class選擇符

其實id是對於xhtml標籤的擴充套件,而class是對shtml多個標籤的一種組合,class直譯的意思是類或類別。

對於xhtml標籤使用class=""進行名稱指派。與id不同,class可以重複使用,對於多個樣式相同的元素,可以直接定義為乙個class。

使用class的優點已不言自明,它對css**重用性有良好的體現,眾多的標籤均可以使用乙個樣式來定義而不需要每乙個編寫乙個樣式**。

xhtml如下:

css如下:

.he六、標籤指定式的選擇符

如果想同時使用id和class,也想同時使用標籤選擇符,可以使用如下的方式:

h1#content {}

/*表示所有id為content的h1標籤*/

h1.p1 {}

/*表示所有class為p1的h1標籤*/

標籤指定式選擇符的精度介於標籤選擇符及id/class選擇符之間,是常用的選擇符之一。

七、組合選擇符

對於上面的所有選擇符而言,進行組合使用。如下:

h1 .p1 {}

/*表示h1下的所有class為p1的標籤*/

#content h1 {}

表示id為content的標籤下的所有h1標籤

h1 .p1,#content h1 {}

/*表示h1下的所有class為p1的標籤以及id為content的標籤下的所有h1標籤*/

h1#content h2{}

/*id為content的h1標籤下的h2標籤*/

css選擇符是非常自由與靈活的,可以根據頁面的需要,使用各種選擇符,盡量結構化與優化css檔案.

網頁設計師述職報告

尊敬的公司領導 20xx年5月進入優越城百貨以來,任職網頁設計。主要負責我公司 的更新維護,和程式設計工作,至今已有4個月的時間。初到公司一切都很陌生,我只有努力工作,不斷向身邊同事學習,熟悉業務,積極參加公司的各項集體活動,希望能夠得到大家的認同,盡快地融入到這個大家庭中來。作為乙個技術人員,我要...

網頁設計師的好幫手

如果你是web設計師,想設計一些東西,但苦於不到好的工具或者軟體。或者你想跳槽,不知道設計師如何才能找到適合的工作,怎麼辦?又或者你的設計工作太枯燥了,想偶爾娛樂一下,又該找誰?下面11個軟體或者 應該對你非常有用。1 cs6 creative cloud 這兩個軟體值得擁有,2 coda 2 fo...

網頁設計師和平面設計師的思維差別

網頁設計師與平面設計師都歸類為設計師,其實這兩個職業是跨行業的,雖然有很多設計師一直在跨行業工作著。這兩個職業的最大區別應該是在思維上,對於平面設計師來說,天馬行空般的創新思維很重要,他們需要的是在一張白紙上勾畫出符合客戶需求的絢麗創意 而對於網頁設計師來說,更多的是需要考慮創意在網路上實現的成本以...