class屬性多個樣式的用法

2022-05-26 21:57:13 字數 1505 閱讀 3248

今天看到乙個非常好用的樣式用法,給已經在睡夢中甦醒的你們來一段**頭腦風暴。

大家都知道現在div+css布局的使用已經不是可以用潮流來概括的了,換個詞應該是:普及。

以前的**布局現在是少之極少,因為**布局會產生太多的字元數,而且**版面沒有div+css樣式來得簡潔明瞭。

很多設計員應該都知道乙個樣式對應乙個class,那麼反過來呢,是不是也是一對一的關係?我想不是的,css樣式不會侷限於此,這就是css樣式的強大之一了。

接下來看下class對應多個樣式究竟怎麼寫?為了方便大家檢視**,我就直接複製**下來了,方便講解。

大家把目標鎖定在加粗的部分,稍微懂一點**的人都應該可以發現我最後乙個div的class是這樣的class="bottom content",注意這個bottom和content之間的空格。這樣的樣式應用是什麼意思呢?

這就是我今天要分享的。這種就是樣式的交叉應用,也可以稱為樣式疊加法。

當兩個樣式之和是你要的第三個樣式的時候,你就沒有必要在去書寫第三個樣式了,直接使用樣式的交叉使用方法,這樣可以省去你很多編寫樣式的時間。

>無標題文件

title

>

head

>

<

style

type

="text/css"

>

.top

.content

.bottom

.yanse

style

>

<

body

>

<

div

class

="top"

>

這裡單獨設定字型加粗!

div>

<

div

class

="content"

>

這裡單獨設定字型的顏色!

div>

<

div

class

="bottom"

>

設定的是字型的大小!

div>

<

div

class

="bottom content"

>

設定字型的大小和背景顏色!

div>

body

>

html

>

CSS 綜合樣式屬性,邊框樣式屬性的用法詳解

border樣式屬性用於設定元素的邊框,屬於綜合屬性,可以單獨設定邊框的某一類樣式也可以進行綜合設定 邊框的樣式組成 通過border width border style border color都是統一設定元素的四條邊框的樣式,無法單獨設定某一條邊框 邊框簡寫 上述邊框樣式可以進行簡寫 綜合設定...

CSS 常見字型樣式屬性的用法詳解

css 字型屬性 font font size font size 16px font 字型 size 大小 用於設定文字的大小 值為數值型,單位有絕對長度單位也有相對長度單位 相對長度單位 單位說明 px畫素,是乙個確定的長度單位,大小為固定的值,常用的單位 em相對於父級元素的字型大小倍數,例如...

vue中class的用法

最近學習了vue中class和class的用法,想來總結一下,也把我的知識提供給大家使用 首先來總結class的用法,vue中的class有4種寫法 class和style都屬於dom屬性,所以在vue中都用 class和 style表示 想給id為box的元素加上這些樣式 方法一 涼涼三生三世,為...