CSS的程式碼格式化-css教學-PHP中文網

<!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 id="三年级">三年级</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 id="三年级">三年级</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 id="三年级时">三年级时</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

登入後複製

文字排版– – 刪除線

如果想在網頁上設定刪除線怎麼辦，這個樣式在電商網站上經常會見到：
CSS的程式碼格式化

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

 .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 id="尼克-卡拉威">尼克?卡拉威</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 id="了不起的乔布斯">了不起的乔布斯</h1>12345

登入後複製

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

單字間距設定：

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

h1{
    word-spacing:50px;
}...<h1 id="welcome-nbsp-to-nbsp-iOS">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 id="hello-nbsp-world-你好">hello world!你好！</h1></body></html>123456789101112131415

登入後複製

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

段落排版– – 對齊

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

h1{
    text-align:center/left/right;
}<h1 id="了不起的乔布斯">了不起的乔布斯</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="/static/imghw/default1.png"  data-src="http://img.com/2000200.jpg"  class="lazy"    alt="CSS的程式碼格式化" ></div></body></html>123456789101112131415

登入後複製

以上是CSS的程式碼格式化的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn