更改span標籤樣式 CSS 內嵌樣式

2021-10-11 23:13:24 字數 865 閱讀 7608

前面一節我們講了行內樣式,但是行內樣式的缺點就是樣式不能重用。例如當有好多個 標籤,我們希望所有的 標籤的樣式都一致,那麼需要在每個標籤中都寫一遍,這麼會很麻煩,也會增加很多**。

那麼為了解決這個問題,本節我們學一下內嵌樣式,也可以叫做內部樣式。

內嵌樣式就是將 css **寫在 html 頁面中的 標籤中的 標籤內。因為它與 html 內容位於同乙個檔案中,所以叫做內嵌樣式表。

示例:

例如下面這個例子就是使用了內嵌樣式:

css學習(9xkd.com)
人生若只如初見,何事秋風悲畫扇等閒變卻故人心,卻道故人心易變。驪山語罷清宵半,淚雨零鈴終不怨。何如薄倖錦衣郎,比翼連枝當日願。

在瀏覽器中的演示效果:

記得內嵌樣式必須寫在 標籤中,否則無效。

使用內嵌樣式來書寫 css 樣式,相較於行內樣式來說,明顯要更加方便,**量也更少。

但是內嵌樣式也有乙個缺點,就是它僅在同乙個頁面中才方便,對於多頁面開發來說,任然不利於頁面間共享復用**以及維護,對內容與樣式的分離也不夠徹底。所以內嵌樣式比較適合那些單頁面資訊具有獨特風格的頁面,不需要多個頁面共享。

在實際開發中,我們不可能只寫乙個頁面,所以內嵌樣式不滿足我們的需求,通常我們都會選擇使用外部樣式,下一節會講到。

CSS中的span樣式對齊

span元素為內聯元素,不具備寬度特性,設定text align屬性會沒有效果,因此需要將span元素的展示型別轉化為具有塊級特性。方法1 設定span的display屬性為block。text align center display block 方法2 設定span的display屬性為inli...

CSS樣式更改 文字Content

上篇文章主要講述了css樣式更改中的背景background,這篇文章我們來談談文字content內容的基礎用法 1 首行縮排文字 可以設定負數 也可使用百分數 畫素 2 文字對齊方式 left 左邊 right 右邊 center 中間 justify 兩端對齊 3 字間距 可以設定負數 也可使用...

CSS樣式更改篇 背景Background

上篇文章主要講述了css的基礎用法,講述了如何定義標頭檔案,匯入css檔案,id和class選擇器,元素選擇器,後代選擇器,子元素選擇器,兄弟選擇器,偽類選擇器等等,讓大家對css選擇器有個簡單的認識和了解。這篇接上篇文章,繼續講解css的基礎用法。背景可以設定很多,比如背景顏色,背景,背景定位,背...