這節我們來制作以下效果

我們先把四個段落的文字都寫出來，分別包含在p標簽里

現在看到的效果如下

我們來一點一點給它加入樣式

首先，來使文字水平居中并且加背景色

但是這樣顯示的效果有一些問題，直接加入文字背景會顯示背景頂著兩頭，導致背景太長

這時我們就需要一個屬性span

span只是一個容器，并不實際顯示

有了span，我們就可以給span來設置背景顏色控制大小

具體的使用如下

設置了背景色、字體顏色、字體大小后，顯示效果為

我們再來設置需要加粗的文字和改顏色的文字

效果如下

還有一些字體顏色和加粗的修改此處省略……

設置后效果如下

但是對比一下效果，我們可以看出整個文字的效果并不是純黑色，而是灰色，這時我們需要怎么設置呢？

有兩種方法：

1.設置每個p的color

2.給所有文字嵌套一個div標簽，來設置div標簽的color

我們肯定會選擇第二種方法，先來介紹一下div

具體的使用如下

效果會看到所有文字(除設置外的)都變成灰色

設置完字體的屬性樣式后，我們來考慮整個容器如何居中？

我們之前已經使用過文字居中是text-align:center；

容器的居中就要使用margin:auto；

但是注意，如果不設置容器的大小，那么默認撐滿整個屏幕，那么margin:auto;將沒有意義

效果如下

本節代碼：

我們來做一下總結

--- 筆記來自于【千鋒教育】視頻

- End –

?

總結

以上是生活随笔為你收集整理的div字体居中_div和span的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。