說到CSS，筆者用的最多的還是它的排版和字型設計功能。因為網頁嘛，最終還是要做給人家看的，要傳遞信息給對方的，所以不管怎么說，這種傳遞形式非常重要，具體說來，也就是字的控制和版面的控制。另外一個很重要的原因就是中文相當難處理，Windows自帶的中文字庫很少，而中文的美術效果又很難做，遠不如英文那么隨隨便便寫幾個字就很舒服。所以借助CSS的幫助就更顯得有必要。好，廢話也不多說了。大家還是跟我一起看一看CSS到底對字能起些什么作用吧。
首先，給朋友們說說樣式表關于字型的一些功能?？偟恼f來，主要是字體(font)、大小(size)、字體粗細(Weight)、字體變形(Variant)、字體風格(Style)、修飾(Decoration)、Case(大小寫)等等。下面筆者向大家詳細介紹一下。請注意，本文所用的Style例子都是采用的調用外部文件的形式，且只是外部文件css1.css的內容，大家看的時候注意了。要是想使用它們，如上節所說的，在HTML文件的文件頭說明部分中加入< LINK REL=STYLESHEET HREF="CSS1.CSS">就可以了。
好，下面先給大家看一個例子:
P {
text-align: left;
font-size: 25pt;
font-family: "隸書", "宋體";
letter-spacing: 3px;
color:navy;
line-height:30pt;
text-indent: .5in;
border: solid 2pt;
}
鏈入網頁以后出來的效果如下圖：
現在就對上面這段代碼進行詳解。首先，P就是表示是對文件中的所有< p>< /p>容器中的內容進行的定義。大括號內就是對各項屬性所規定的值。對于一個定義的格式往往是:
屬性:值
中間以分號隔開。
Text-align:left表示段落是居左對齊，font-size:15pt，表示字體大小為15pt，font-family:隸書,宋體 表示所采用的字體。這里要說明一下，這里使用了幾種字體，并分別用逗號隔開，表示第一、第二、第三字體，也就是說如果客戶機的系統內有第一種字體的話就采用它，如果沒有再查看有沒有第二種，第三種，倘若都沒有則使用缺省字體。letter-spacing:3px就說明字間寬為3px.color:navy，則表示顏色為天藍色，line-height:12pt表示行高為12pt(這里的行高是連同字高一起計算的)。text-indent:.5in表示段落首行的縮進的多少，這里是.5in.border:solid 1pt表示邊框是寬度為1pt的實心邊框。
大家對照一下圖看看屬性與效果之間的關系?？纯磳慡tyle是不是很簡單呢?有關字體和排版的屬性還有幾項，下面就列表向大家說明。
字體參數(Font Properties):
|
參數 |
含義 |
舉例 |
|
Font-size |
字體大小 |
Small,midium |
|
Font-Style |
字體風格 |
Normal,italic |
|
Font-family |
選用字體 |
宋體,fantasy |
|
Font-weight |
字體粗細 |
Bold,bolder |
文本參數(Text Properties):
|
參數 |
含義 |
舉例 |
|
Line-Height |
行距 |
1.2,18pt |
|
Text-decoration |
文字裝飾 |
underline,none |
|
Text-transform |
大小寫轉換 |
Capitalize(單詞首字母大寫)
Uppercase(全部大寫)
Lowercase(全部小寫) |
|
Text-align |
文字對齊 |
Left,right,center,justify |
|
Text-indent |
文字縮進 |
長度值,百分比值 |
塊參數(Block-Level Formatting Properties)
|
參數 |
含義 |
舉例 |
|
Left-margin,right-margin |
留的空白 |
長度值,百分比值 |
|
Padding-top… |
內容邊框間距 |
長度值,百分比值 |
|
Border-width |
邊框寬度 |
長度值 |
|
Border-style |
邊框風格 |
Solid,double,groove |
|
Border-color |
邊框顏色 |
顏色值 |
|
Width |
寬度 |
長度值,百分比值 |
|
Float |
對齊 |
Left,right |
顏色參數(Color and Background Properties)
|
參數 |
含義 |
舉例 |
|
Color |
前景色彩 |
顏色值(red, #FF0000) |
|
Background-image |
背景文件 |
文件地址 |
|
Background-color |
背景顏色 |
顏色值 |
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
