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