CSS網頁布局中ID與class的理解

2022-09-25 22:12:15 字數 1195 閱讀 1992

xhtml css網頁布局中id與class的理解應用:

要是xhtml與css能物件導向。。太陽應該從北邊公升起了。但是,凡事都應該帶著oo的思想來看問題,也勉強可以湊數拉。其實,早在零幾年就有人提出了oo-style,不過已找不到。

那要怎樣oo呢?現在大家都知道css是可以介樣寫滴:

.g_g

我們可以把它大約看乙個原型,或者說成類,-__-b 好像本來就是類的樣子,然後要在html裡「例項化」乙個物件,例如:

笨蛋嗷嗷

該元素會使用上css相應的定義,但僅僅對應的class還是不夠的,因為我們頁面可能會多處應用到這個class,為了處理好「私有」的關係,把剛才的**改成:

笨蛋嗷嗷

這樣的話,這個id為aoao的元素就會應用.g_g這個類的定義,而且可以用#aoao{}這樣的選擇符來進去私有效果的定義,這樣也不會影響到公共用的.g_g這個類,同時,#aoao定義的優先權會比.g_g高,符合私有定義比公共定義優先高的常理^^。

由於我使用了id這個具有唯一性的東東,對這種私有定義後的東西復用就成了問題(乙個id只能在乙個頁面上出現一次,不知道誰說的,反正是真理)。如果我們要實現多相同私有化的東東怎辦呢?那我們就必須來實現「多型」。挖哈哈。再改一下**:

笨蛋嗷嗷

乙個是「g_g」,另乙個是「o_o」,但是我們如果使用上.o_o{}也是可以定義到元素,假如css是這樣的話:

.g_g

gad**hp .o_o

元素將都被定義到,程式設計客棧而且由於定義不層疊,都會給應用。再假如**是這樣的話,不知道會不會更好理解。

不是笨蛋嗷嗷鳥

.layout

.color

接著,要來實現&ldquowww.cppcns.com;封裝」。子級選擇符大家應該常常用吧,換**:

笨蛋嗷嗷

雖然.bendan{}跟.g_g .bendan{}都可以定義,但是後者只能應用在class為「g_g」的元素,我們可以簡單把.bendan{}理解成全域性定義,把.g_g .bendan{}理解成區域性定義,這樣的話就有利於我們xhtml與css的模組化。^^傳說中的「封裝」出現了,再接著。

笨蛋嗷嗷

這樣的**就可以產生無數的變化了,還不明白的從頭看起。^^

深刻理解xhtml css網頁布局中id與class的應用!

本文標題: css網頁布局中id與class的理解

本文位址: /web/css/24608.html

CSS 網頁布局

一些布局 行布局 多列布局 聖杯布局 雙飛翼布局 會使用到 html和css基礎 會使用div css進行排版 熟悉 float屬性 position屬性。1 經典的行布局 基礎的行布局 行布局自適應 行布局自適應限制最大寬 行布局垂直水平居中 container 水平與垂直居中 container...

CSS 網頁布局

頭部區域位於整個網頁的頂部,一般用於設定網頁的標題或者網頁的 logo 鏈結鏈結 鏈結 重置瀏覽器大小檢視效果。鏈結鏈結 鏈結學的不僅是技術,更學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是學的不僅是技術,更是夢想 學的不僅是技術,更是夢想!學的不...

CSS網頁布局

本文作為個人筆記,內容大多從網上查閱 提到布局就不得不提一提標準文件流了 文件流指的是元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。並最終窗體自上而下分成一行行,並在每行中從左至右的順序排放元素。標準流的微觀現像 1.空白摺疊現象 多個空格會被合併成乙個空格顯示到瀏覽器頁面中。img標...