html&css基礎_頁面常見文字設定

weixin_33866037發表於2017-12-27
HTMLCSS

<style>
        #box{
            width: 500px;
            height: 300px;
            border: 1px solid red;
            padding: 10px;
            margin: 90px auto;
            background-color: antiquewhite;
            font-size: 12px;
        }
</style>
...
<div id="box">
    文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定文字設定。
</div>
1197462-8f643bcf556c348e.png
圖片.png

注意：我們設定盒子裡面的字型屬性，在盒子的style中設定。
規範：在web中不能使用中文文字比12px更小的單位。文字大小都是偶數。

font-size: 12px;    # 文字大小
font-family: 微軟雅黑,airal;   # 字型  （宋體是所有瀏覽器都相容的，常規使用的字型有：微軟雅黑，宋體，airal）（多個引數，前面的字型不解析，那麼就解析後面的字型）
color: red;  # 控制字型顏色 ( 顏色的設定有三種方式： 1.#a51a3b;  2. red;  3. rgb(255,255,255);  常用的是第一種16進位制色彩值)
line-height: 30px;  # 行高  (行高的理解：我們所寫的文字是在行高的上下居中，文字與行高的上面的間隙和文字與行高下面的間隙的數值是一樣的，相等的。)
text-align:center;  # 文字左右方向的設定，left,right,center。  （text-align:center; 文字左右居中）
1197462-7df706c3cab16ccb.png
行高30_文字大小18_那麼上下的間隔都是6.png

我們也可以將文字在div中的展示理解為div是一張紙，那麼每行的間隔線就是寫字本的那個線，我們把每行文字寫在每行的上下居中的地方。
如果只有一行文字，想要文字在div的上下居中，那麼可以設定line-height等於盒子的高度。

1197462-f305b2518e61d069.png
line-height等於盒子高度.png

如果還想要文字的左右對齊，那麼就需要使用到text-align:center;

text-indent:32px;  # 首行縮排  （文字大小是16px的話，那麼首行縮排2*16px）（縮排這裡一般使用em，1em代表一個字, 2em代表2個字，就不怕文字大小的調節而又必須改變text-intent了。）
1197462-5413e9c8af18b34c.png
text-indent:2em; .png

會自動檢索文字大小，並且縮排相應字數。

font-weight:bold;   # 文字著重   (bold：粗體, normal:正常, 還可以輸入數值 )（改變的話，每個文字的相對位置是不會改變的）
font-style:italic;  # 文字樣式   （italic:斜體，normal:正常）
text-decoration:underline; # 文字修飾  (underline:文字，也就是所有文字下面都有下劃線，overline:上邊線, line-through:中劃線, none:沒有修飾)

上面是常用的,下面是不常用的。

letter-padding:10px;  # 文字間距
word-spacing: 10px;  # 單詞間距  （是以空格為解析單位，認為空格的前後就是2個單詞，不管是中文還是英文，還是其他語言。）

相關文章