CSS初級教程文本_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
你可以用大量的屬性來改變文本的大小和形態,概括如下:
字體font-family
這是字體本身的名稱,如“Times News Roman”,“Arial”或者“Verdana”(又如“宋體”等中文字體名稱--譯者著)。
你指定的字體必須存在在用戶的電腦上,所以在CSS使用字體會存在某種程度上的不確定性。有少量“安全”的字體(最常用的是Arial,Verdana和Times New Roman)。但你可以指定不止一種字體,只要用半角英文逗號,隔開就行。這樣做的目的是假如用戶的電腦上沒有你指定的第一個字體,瀏覽器會逐遍尋找羅列的字體直到找到電腦上安裝有的字體為止。這很有用因為不同的電腦有時侯有不同的安裝字體。所以,例子font-family: arial, helvetica的目的就是用在PC(一般情況下有arial字體而沒有helvetica字體)和Apple Mac上(一般有helvetica字體而沒有arial字體)。
注重:假如一個字體的名稱超過一個單詞,它應該用英文雙引號括起來,如:font-family: "Times New Roman"。
字體尺寸font-size
定義字體的尺寸。必須小心──像標題一樣的文本不應該是段落中的大字體而已,你應該使用標題標簽(h1,h2 等)。甚至,在練習中,你可以使段落文本字體尺寸大于標題(不推薦使用,假如你明智的話)。
字體加粗font-weight
這用來聲明文本粗細與否。實際應用中一般只有兩種形式:font-weight: bold(粗體)和font-weight: normal(普通)。在理論上,它們的值有bolder(更粗),lighter(更細),100,200,300,400,500,600,700,800或者900,但許多瀏覽器會搖搖頭,說:“我不認為這樣”,所以使用bold和normal是比較安全的。
字體樣式font-style
這定義文本正斜與否。可以這樣使用 font-style: italic(傾斜)或者font-style: normal(正常)。
文本裝飾text-decoration
這用來聲明文本是否有劃線。可以這樣使用:
text-decoration: overline──文本上面的劃線。
text-decoration: line-through──穿過文本的刪除線。
text-decoration: underline──這應該只使用在連接中,因為用戶一般認為連接才有下劃線。
這個屬性通常用來裝飾連接,而 text-decoration: none則是表示沒有任何劃線。
文本轉換text-transform
這可以轉換文本的大小寫。
text-transform: capitalize把每個單詞的首字母轉換成大寫。
text-transform: uppercase把所有的字母都轉換成大寫。
text-transform: lowercase把所有的字母都轉換成小寫。
text-transform: none?你自己試一試啦。
文本間距
字母間隔letter-spacing和文本間隔 word-spacing屬性分別用在字母間和單詞間的距離。它們的值可以是長度或者默認的普通normal。
line-height屬性為比如段落等元素設置行高,它并不改變字體的尺寸。它的值可以是長度,百分比或者默認的normal。
文本水平對齊text-align屬性將對元素里的文本向左、右、中間或者兩端對齊,自然,它們的值分別left(左)、 right(右)、center(中間)或者 justify(兩端)。
文本縮進text-indent屬性依據你設置的長度或者百分比值對文本段落的第一行進行縮進。在印刷中經常會用到這樣的格式,然而在像網頁這樣的電子媒體中并不常用。
字體font-family
這是字體本身的名稱,如“Times News Roman”,“Arial”或者“Verdana”(又如“宋體”等中文字體名稱--譯者著)。
你指定的字體必須存在在用戶的電腦上,所以在CSS使用字體會存在某種程度上的不確定性。有少量“安全”的字體(最常用的是Arial,Verdana和Times New Roman)。但你可以指定不止一種字體,只要用半角英文逗號,隔開就行。這樣做的目的是假如用戶的電腦上沒有你指定的第一個字體,瀏覽器會逐遍尋找羅列的字體直到找到電腦上安裝有的字體為止。這很有用因為不同的電腦有時侯有不同的安裝字體。所以,例子font-family: arial, helvetica的目的就是用在PC(一般情況下有arial字體而沒有helvetica字體)和Apple Mac上(一般有helvetica字體而沒有arial字體)。
注重:假如一個字體的名稱超過一個單詞,它應該用英文雙引號括起來,如:font-family: "Times New Roman"。
字體尺寸font-size
定義字體的尺寸。必須小心──像標題一樣的文本不應該是段落中的大字體而已,你應該使用標題標簽(h1,h2 等)。甚至,在練習中,你可以使段落文本字體尺寸大于標題(不推薦使用,假如你明智的話)。
字體加粗font-weight
這用來聲明文本粗細與否。實際應用中一般只有兩種形式:font-weight: bold(粗體)和font-weight: normal(普通)。在理論上,它們的值有bolder(更粗),lighter(更細),100,200,300,400,500,600,700,800或者900,但許多瀏覽器會搖搖頭,說:“我不認為這樣”,所以使用bold和normal是比較安全的。
字體樣式font-style
這定義文本正斜與否。可以這樣使用 font-style: italic(傾斜)或者font-style: normal(正常)。
文本裝飾text-decoration
這用來聲明文本是否有劃線。可以這樣使用:
text-decoration: overline──文本上面的劃線。
text-decoration: line-through──穿過文本的刪除線。
text-decoration: underline──這應該只使用在連接中,因為用戶一般認為連接才有下劃線。
這個屬性通常用來裝飾連接,而 text-decoration: none則是表示沒有任何劃線。
文本轉換text-transform
這可以轉換文本的大小寫。
text-transform: capitalize把每個單詞的首字母轉換成大寫。
text-transform: uppercase把所有的字母都轉換成大寫。
text-transform: lowercase把所有的字母都轉換成小寫。
text-transform: none?你自己試一試啦。
示例代碼 [www.wf0088.com]
body {
font-family: arial, helvetica, serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
font-family: arial, helvetica, serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
文本間距
字母間隔letter-spacing和文本間隔 word-spacing屬性分別用在字母間和單詞間的距離。它們的值可以是長度或者默認的普通normal。
line-height屬性為比如段落等元素設置行高,它并不改變字體的尺寸。它的值可以是長度,百分比或者默認的normal。
文本水平對齊text-align屬性將對元素里的文本向左、右、中間或者兩端對齊,自然,它們的值分別left(左)、 right(右)、center(中間)或者 justify(兩端)。
文本縮進text-indent屬性依據你設置的長度或者百分比值對文本段落的第一行進行縮進。在印刷中經常會用到這樣的格式,然而在像網頁這樣的電子媒體中并不常用。
示例代碼 [www.wf0088.com]
p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5em;
text-align: center;
}
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5em;
text-align: center;
}
相關CSS教程:
- 相關鏈接:
- 教程說明:
CSS教程-CSS初級教程文本。