說到CSS,筆者用的最多的還是它的排版和字型設計功能。因為網頁嘛,最終還是要做給人家看的,要傳遞信息給對方的,所以不管怎么說,這種傳遞形式非常重要,具體說來,也就是字的控制和版面的控制。另外一個很重要的原因就是中文相當難處理,Windows自帶的中文字庫很少,而中文的美術效果又很難做,遠不如英文那么隨隨便便寫幾個字就很舒服。所以借助CSS的幫助就更顯得有必要。好,廢話也不多說了。大家還是跟我一起看一看CSS到底對字能起些什么作用吧。
首先,給朋友們說說樣式表關于字型的一些功能。總的說來,主要是字體(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 | 背景顏色 | 顏色值 |
|
新聞熱點
疑難解答