用CSS 給網頁裝潢 3 構造文字

2021-07-15 03:59:12 字數 1408 閱讀 8297

1)文字縮排

2)文字對齊

3)文字行高

4)字間隔(單詞)

5)字母間隔

6)文字下劃線

7)字型

8)字型風格

9)字型大小

10)文字顏色

11)文字加粗

12)關於樣式繼承

css 對文字的處理特別方便,這一節課我們就來學習一下css 常用的對文字的設

置操作!

css 長度值得單位:

%——百分比

in——寸

cm——厘公尺

mm——公釐

pt——point,大約1/72 寸;

pc——pica,大約6pt,1/6 寸;

px——螢幕的乙個畫素點;

em——元素的font-size;

1. 文字縮排

text-indent:值;

值為數字,最常用的數值單位是px(畫素),也可以直接是百分比!

text-indent:100px;

text-indent:10%;

2. 文字對齊

text-align:對其方式;

可以的值為:left、center、right

3. 文字行高

line-height:值;

line-height:23px;

line-height:120%;

預設:normal

4. 字間隔(單詞)

word-spacing:10px;

預設值:normal

5. 字母間隔

letter-spacing:5px;

預設值:normal

6. 文字下劃線

text-decoration:none;

值:underline 或者none 等,常用值就這兩個

7. 字型

font-family:微軟雅黑;

多個字型用逗號隔開

font-family:"times new roman",georgia,serif;

font-family:字型1,字型2;

8. 字型風格

font-style:值;

normal

italic

oblique

9. 字型大小

font-size:數值;

數值單位為px

10. 文字顏色

color:顏色值;

顏色值可以為一些簡單的英語單詞

color:red;

實際工作中用的比較多的是顏色**

color:#111111;

11. 文字加粗

font-weight:值;

常用值:

normal

bold

12. 關於樣式繼承

樣式的繼承問題!

用CSS讓網頁文字豎排

1.writing mode 設定物件書寫方向 語法 writing mode lr tb tb rl 引數 lr tb 從左向右,從上往下 tb rl 從上往下,從右向左 示例 div 2.text align 設定物件中文字的對齊方式 語法 text align left right cente...

CSS3美化網頁文字

概述 1,字型樣式 網頁字型樣式包括字型型別,大小,顏色等基本效果,另外還包括一些特殊的樣式,如字型粗細,下劃線,斜體,大小等 1.1 定義字型型別 css使用font family屬性來定義字型型別,另外使用font屬性也可以定義字型型別。font family是字型專用型別專用屬性,用法如下 f...

用CSS3實現文字描邊

css3作為新興的前端技術可以實現很多複雜變化的效果,比如文字描邊。這裡主要用到text shadow屬性,顧名思義就是為文字加上陰影效果。例 text shadow 10px 5px 2px f60 各位置引數說明 text shadow x位移 y位移 模糊程度 顏色其中 x位移和y位移表示陰影...