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

首頁

web前端

css教學

CSS的程式碼格式化

巴扎黑

Aug 09, 2017 pm 03:48 PM

css格式化

文字排版– – 字體

我們可以使用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 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/imghwm/default1.png"  data-src="http://img.com/2000200.jpg"  class="lazy"    alt="CSS的程式碼格式化" ></div></body></html>123456789101112131415

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

陳述

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