點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

CSS的代碼格式化

來源：懂視網責編：小采時間：2020-11-27 18:50:21

CSS的代碼格式化

CSS的代碼格式化:文字排版– – 字體我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子，下面代碼實現：為網頁中的文字設置字體為宋體。body{font-family:"宋體";}1這里注意不要設置不常用的字體，因為如果用戶本地電腦上如

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS的代碼格式化:文字排版– – 字體我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子，下面代碼實現：為網頁中的文字設置字體為宋體。body{font-family:"宋體";}1這里注意不要設置不常用的字體，因為如果用戶本地電腦上如

文字排版– – 字體

我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子，下面代碼實現：為網頁中的文字設置字體為宋體。

body{font-family:"宋體";}1

這里注意不要設置不常用的字體，因為如果用戶本地電腦上如果沒有安裝你設置的字體，就會顯示瀏覽器默認的字體。（因為用戶是否可以看到你設置的字體樣式取決于用戶本地電腦上是否安裝你設置的字體。）
現在一般網頁喜歡設置“微軟雅黑”，如下代碼：

body{font-family:"Microsoft Yahei";}1

或

body{font-family:"微軟雅黑";}1

注意：第一種方法比第二種方法兼容性更好一些。

因為這種字體即美觀又可以在客戶端安全的顯示出來（用戶本地一般都是默認安裝的）。

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>認識html標簽</title><style type="text/css">body{ font-family:"Microsoft Yahei";}span{ font-family:"宋體";}</style></head><body> <h1>三年級</h1> <p>三年級<span id="stress">三年級</span>三年級</p> <p>三年級</p></body></html>1234567891011121314151617181920

文字排版– – 字號、顏色

可以使用下面代碼設置網頁中文字的字號為12像素，并把字體顏色設置為#666(灰色)：

body{font-size:12px;color:#666}1

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字號、顏色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body> <h1>三年級</h1> <p>三年級<span class="stress">三年級</span>三年級</p> <p>三年級<span>三年級</span>三年級</p></body></html>12345678910111213141516

文字排版– – 粗體

我們還可以使用css樣式來改變文字的樣式：粗體、斜體、下劃線、刪除線，可以使用下面代碼實現設置文字以粗體樣式顯示出來。

p span{font-weight:bold;}1

在這里大家可以看到，如果想為文字設置粗體是有單獨的css樣式來實現的，再不用為了實現粗體樣式而使用h1-h6或strong標簽了。

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗體簽</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body> <h1>三年級時</h1> <p>三年級時<span class="stress">三年級時</span>三年級時<a href="http://www.imooc.com">三年級時</a>三年級時</p> <p>三年級時</p></body></html>12345678910111213141516

文字排版– – 斜體

以下代碼可以實現文字以斜體樣式在瀏覽器中顯示：

 p a{font-style:italic;}<p> 三年級 <a> 四年級 </a> 五年級 </p>12

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜體樣式</title><style type="text/css">p{ font-style:italic; 
}a{ font-weight: bold; color: red; font-style: normal;}</style></head><body><p>三年級<a>三年級</a>三年級</p> </body></html>1234567891011121314151617181920

文字排版– – 下劃線

有些情況下想為文字設置為下劃線樣式，這樣可以在視覺上強調文字，可以使用下面代碼來實現：

p a{text-decoration:underline;}<p> 三年級 <a> 四年級 </a> 五年級 </p>12

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>下劃線樣式</title><style type="text/css">a { text-decoration:underline; 
}span { text-decoration:underline;}</style></head><body><p><span>三年級</span><a> 四年級 </a> 五年級 </p></body></html>123456789101112131415161718

文字排版– – 刪除線

如果想在網頁上設置刪除線怎么辦，這個樣式在電商網站上常會見到：
這里寫圖片描述

上圖中的原價上的刪除線使用下面代碼就可以實現：

 .oldPrice{text-decoration:line-through;}1

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>刪除樣式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原價：<span class="oldPrice">300</span>元 現價：230 元</p> </body></html>12345678910111213

段落排版– – 縮進

中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現：

p{text-indent:2em;}<p>1922年的春天，一個想要成名名叫尼克卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>12

注意：2em的意思就是文字的2倍大小。

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>縮進樣式</title><style type="text/css">p{text-indent:2em;};</style></head><body> <h1>尼克?卡拉威</h1> <p>1922年的春天，一個想要成名名叫尼克?卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p> 
 <p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p></body></html>123456789101112131415

段落排版– – 行間距（行高）

這一小節我們來學習一下另一個在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實現設置段落行間距為1.5倍。

p{line-height:1.5em;}<p>菲茨杰拉德，二十世紀美國文學巨擘之一。</p>12

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>行間距</title><style type="text/css">p{line-height:2em;}</style></head><body><p>菲茨杰拉德，二十世紀美國文學巨擘之一。</p></body></html>12345678910111213

段落排版– – 中文字間距、字母間距

中文字間隔、字母間隔設置：

如果想在網頁排版中設置文字間隔或者字母間隔就可以使用 letter-spacing 來實現，如下面代碼：

h1{
 letter-spacing:50px;
}...<h1>了不起的喬布斯</h1>12345

注意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距。

單詞間距設置：

如果我想設置英文單詞之間的間距呢？可以使用 word-spacing 來實現。如下代碼：

h1{
 word-spacing:50px;
}...<h1>welcome to iOS!</h1>12345

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字間距</title><style type="text/css">h1{ letter-spacing:20px;}</style></head><body><h1>hello world!你好！</h1></body></html>123456789101112131415

注意
當設置元素為英文時，letter-spacing 設置不是英文單詞的間隔，而是字母間的間隔。

段落排版– – 對齊

想為塊狀元素中的文本、圖片設置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現文本居中顯示。

h1{
 text-align:center/left/right;
}<h1>了不起的喬布斯</h1>1234

示例

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>對齊</title><style type="text/css">div{ text-align:center;}</style></head><body><div><img src="http://img.com/2000200.jpg" ></div></body></html>123456789101112131415

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com