首頁  >  文章  >  web前端  >  中文排版CSS心得

中文排版CSS心得

WBOY
WBOY原創
2016-05-16 12:09:291473瀏覽

數月來學習web標準,並遵循標準設計和製作web頁面。一直想寫點什麼,整理一下自己的心得體會。寫這篇文章,主要是針對中文排版設計,英文排版因為很少做,所以不涉及。 

先介紹如何設定字體、顏色、大小、段落空白等比較簡單的應用,後面再介紹下例如首字下沉、首行縮排。最後講一些常用的web頁面中文排版,像是中文字的截斷、固定寬度字內折行(word-wrap和word-break)等等。因為只是寫一些應用方面的心得,如果需要完整的CSS屬性介紹,請參考CSS手冊。

1、如何設定文字字體、顏色、大小 - 使用font  

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屬性需要單獨寫): 

font: italic bold 12px/150% "Lucida Gr .Verdana,ArLucida, 50% -serif; 

2、如何控制段落排版 —— 使用margin,text-align


標籤,左右(相當於縮排)、段前段後的空白,都可以用margin。例如:


文字的對齊方式用text-align,比如:
p{ 
margin: 18px 6px 6px 18px; /*分别是上、右、下、左,十二点开始的顺时针方向*/ 
}


對齊方式還有left、right和justify(兩端對齊) 
p{ 
text-align: center; /*居中对齐*/ 
}

PS.談起margin,我習慣於在寫CSS的時候為所有的標籤定義margin: 0; 因為時而出現由於默認的margin值導致頁面排版問題,而自己找不到原因(特別注意的是ul/ol/p/dt/dd等標籤) 

3、垂直文字 - 使用writing-mode 

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


例如: 


可以結合direction排版。
p{ 
writing-mode: tb-rl; 
}

4、項目符號的問題 - 使用list-style 在CSS裡項目符號有disc(實心圓點)、circle (空心圓圈)、square(實心方塊)、decimal(阿拉伯數字)、lower-roman(小寫羅馬數字)、upper-roman(大寫羅馬數字)、lower-alpha(小寫英文字母)、upper-alpha(大寫英文字母)、none(無)。例如設定一個清單(ul或ol)的項目符號為方塊,如:


另外list-style還有一些值,例如可以採用一些小圖片作為項目符號,在list-style下直接寫url(“圖片地址”)就可以了。注意如果一個項目清單的左外補丁(margin-left)設為零的時候,list-style-position: outside(預設是outside)的項目符號不會顯示。可惜的是上述的項目符號似乎無法設定大小,圓點和方塊總是那麼點。且不能設定垂直方向上的對齊。
li{ 
list-style: square; 
}

5、首字下沉 —— 使用:first-letter 偽對象:first-letterfont-size、

偽對象:first-letterfont-size、

偽對象:first-letterfont-size、

偽對象:first-letterfont-size、
p:first-letter{ 
padding: 6px; 
font-size: 32pt; 
float: left; 
}

偽對象:first-letterfont-size、例如:

6、頭行縮排 —— 使用text-indent 

p{ 
text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/ 
}

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

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

7、關於漢字注音 —— 使用ruby標籤和ruby-align屬性 

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


8、固定寬度漢字截斷 - 使用text-overflow 用後台語言可以對從資料庫裡的欄位內容做截斷,比如說截12個漢字(之後用省略號)。但是有時還需要html標籤的過濾等,而用CSS來控制則沒有這個問題。例如對清單套用以下樣式:
li{ 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
}

不过只能处理文字在一行上的截断,不能处理多行。 

9、固定宽度汉字(词)折行 —— 使用word-break 

举个例子,比如说要在一个固定宽度容器里面显示很多地名(假设以空格分隔),为了避免地名中间断开(即一个字在上面而另一个字折断到下一行去了)。则可以使用word-break。比如:

南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海

值得注意的是里面的空格不能以 代替(最少要有一个软空格)。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn