css控制文字排版

2021-08-25 12:18:54 字數 1974 閱讀 8796

[b]一、如何設定文字字型、顏色、大小 — 使用font[/b]

font-style設定斜體,比如font-style: italic;

font-weight設定文字粗細,比如font-weight: bold;

font-size設定文字大小,比如font-size: 12px;(或者9pt,不同單位顯示問題參考css手冊)

line-height設定行距,比如line-height: 150%;

color設定文字顏色(注意不是font-color),比如color: red;

font-family設定字型,比如font-family : "lucida grande", verdana, lucida, arial, helvetica, 宋體,sans-serif;(這是通用的寫法)

以上都可以寫在一行font屬性裡[color=red](除了color屬性需要單獨寫)[/color]:

font: italic bold 12px/150% "lucida grande", verdana, lucida, arial, helvetica, 宋體,sans-serif;

[b]二、如何控制段落排版 — 使用margin,text-align [/b]

中文段落使用標籤,左右(相當於縮排)、段前段後的空白,都可以用margin。

文字的對齊方式用text-align: center、left、right和justify(兩端對齊) 。

[b]三、豎排文字 — 使用writing-mode [/b]

writing-mode屬性有兩個值lr-tb和tb-rl,前者是預設的左-右、上-下,後者是上-下、右-左。

可以結合direction排版。

[b]四、專案符號的問題 — 使用list-style [/b]

在css裡專案符號有disc(實心圓點)、circle(空心圓圈)、square(實心方塊)、decimal(阿拉伯數字)、lower-roman(小寫羅馬數字)、upper-roman(大寫羅馬數字)、lower-alpha(小寫英文本母)、upper-alpha(大寫英文本母)、none(無)。比如設定乙個列表(ul或ol)的專案符號為方塊。

[color=red]list-style-position: outside(預設是outside)的專案符號不會顯示。[/color]

[b]五、首字下沉 — 使用:first-letter [/b]

偽物件:first-letter配合font-size、float可以製作首字下沉效果。

比如: p:first-letter

[b]六、首行縮排 — 使用text-indent [/b]

text-indent可以使得容器內首行縮排一定單位。比如中文段落一般每段前空兩個漢字。可以這麼寫: p

如果font-size是12px的話,那麼text-indent: 2em則縮排24px。

[color=red]備註:小標題中標題的字型需要縮排,即可使用。盡量不要用padding或者margin,它們容易產生相容問題。

[/color]

[b]七、關於漢字注音 — 使用ruby標籤和ruby-align屬性 [/b]

比如說注音zhu yin

,可以利用ruby-align設定對齊方式。這是在css手冊裡面看到的,具體可以自行查閱ruby-align項。

[b]八、固定寬度漢字截斷 — 使用text-overflow [/b]

用後台語言可以對從資料庫裡的字段內容做截斷處理,比如說截12個漢字(之後用省略號)。但是有時還需要html標籤的過濾等,而用css來控制則沒有這個問題。比如對列表應用以下樣式: li

[color=red] 不過只能處理文字在一行上的截斷,不能處理多行[/color]。

[b]九、固定寬度漢字(詞)折行 — 使用word-break[/b]

比如說要在乙個固定寬度容器裡面顯示很多地名(假設以空格分隔),為了避免地名中間斷開(即乙個字在上面而另乙個字折斷到下一行去了)。則可以使用word-break。

CSS 文字排版

字型 我們可以使用css樣式為網頁中的文字設定字型 字型大小 顏色等樣式屬性。下面 實現 為網頁中的文字設定字型為宋體。body 這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定的字型樣式取決於使用者本地 電腦上是...

CSS 文字排版

在乙個table,div或input中,文字過長,一般都會擷取處理,然後後面拼接省略號,以前我是這麼做的,後端或者js擷取,今天看到css自身屬性就可以做到,內心無數省略號 效果圖 素胚勾勒出青花筆鋒濃轉淡 瓶身描繪的牡丹一如你初妝 冉冉檀香透過窗心事我了然 宣紙上走筆至此擱一半 釉色渲染仕女圖韻味...

CSS文字排版

1.文字排版 字型 我們可以使用css樣式為網頁中的文字設定字型 字型大小 顏色等樣式屬性。下面我們來看乙個例子,下面 實現 為網頁中的文字設定字型為宋體。body 這裡注意不要設定不常用的字型,因為如果使用者本地電腦上如果沒有安裝你設定的字型,就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定...