一、文字排版--字體 我們可以使用css樣式為網頁中的文字設置字體、字型大小、顏色等樣式屬性。 下麵我們來看一個例子,下麵代碼實現:為網頁中的文字設置字體為宋體。 這裡註意不要設置不常用的字體,因為如果用戶本地電腦上如果沒有安裝你設置的字體, 就會顯示瀏覽器預設的字體。(因為用戶是否可以看到你設置的字體 ...
一、文字排版--字體
文字排版--字體我們可以使用css樣式為網頁中的文字設置字體、字型大小、顏色等樣式屬性。
下麵我們來看一個例子,下麵代碼實現:為網頁中的文字設置字體為宋體。
body{font-family:"宋體";}
這裡註意不要設置不常用的字體,因為如果用戶本地電腦上如果沒有安裝你設置的字體,
就會顯示瀏覽器預設的字體。(因為用戶是否可以看到你設置的字體樣式取決於用戶本地電腦上是否安裝你設置的字體。)
現在一般網頁喜歡設置“微軟雅黑”,如下代碼:
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微軟雅黑";}
註意:第一種方法比第二種方法相容性更好一些。
因為這種字體即美觀又可以在客戶端安全的顯示出來(用戶本地一般都是預設安裝的)。
來試試,為段落文字設置字體為“微軟雅黑”
在編輯器的第7行,輸入:
body{font-family:"Microsoft Yahei";}
"Mcrosoft Yahei"必須首字母大寫
二、文字排版--字型大小、顏色
文字排版--字型大小、顏色可以使用下麵代碼設置網頁中文字的字型大小為12像素,並把字體顏色設置為#666(灰色):
body{font-size:12px;color:#666}
來試一試:為第一段中的“膽小如鼠”設置字型大小為:20px,字體顏色為:red。
你是否輸入像下麵的代碼:
.stress{font-size:20px;color:red;}
三、文字排版--粗體
文字排版--粗體我們還可以使用css樣式來改變文字的樣式:粗體、斜體、下劃線、刪除線,
可以使用下麵代碼實現設置文字以粗體樣式顯示出來。
p span{font-weight:bold;}
在這裡大家可以看到,如果想為文字設置粗體是有單獨的css樣式來實現的,
再不用為了實現粗體樣式而使用h1-h6或strong標簽了。
來試試,為a標簽設置粗體樣式
1.在編輯器的第8行,輸入:
a{font-weight:bold;}
四、文字排版--斜體
文字排版--斜體以下代碼可以實現文字以斜體樣式在瀏覽器中顯示:
p a{font-style:italic;} <p>三年級時,我還是一個<a>膽小如鼠</a>的小女孩。</p>
來試試,把段落中的文字全部設置為斜體樣式
- 你是否在第9行輸入像下麵一樣的代碼:
- p{font-style:italic;}
- font-style:normal/oblique/italic/inherit
五、文字排版--下劃線
文字排版--下劃線有些情況下想為文字設置為下劃線樣式,這樣可以在視覺上強調文字,可以使用下麵代碼來實現:
p a{text-decoration:underline;} <p>三年級時,我還是一個<a>膽小如鼠</a>的小女孩。</p>
來試試,為第一段中的“三年級”文字設置為下劃線樣式
1、在代碼編輯器的第14行插入下麵span標簽代碼:
<span>三年級</span>
2、在代碼編輯器的第10行輸入下麵代碼:
span{text-decoration:underline;}
none;預設 無效果
underline; 底部橫線
overline;頂部橫線
line-through;中間橫線
blink;文字閃爍(有的瀏覽器不支持)
inherit;(和父節點一致)
【複習】
Css的字體屬性常用的有:
font-family: 字體系列
font-size: 字體尺寸
font-style: 字體樣式
font-weight: 字體粗細
font-weight是字體粗細,有可用值normal(預設)、bold(粗)、bolder(更粗)、lighter(更細),
甚至可以用數值來表示粗細(normal=400)。
註意:這裡是有“細”的,“weight”並不是“粗”的意思!!!
font-style中的可用值:italic(斜體)、oblique(傾斜)
所以粗體和斜體只是不同字體屬性的某個可用值。
font-family:設置字體;
font-size:字體大小;
font-weight:bold:設置為粗體樣式;
font-style:italic:設置為斜體樣式;
text-decoration:underline:文字設置下劃線;
text-decoration:line-through:刪除線;
text-indent:2em:縮進;(註意:2em的意思就是文字的2倍大小。)
line-height:2em:行高;
word-spacing:50px:單詞間距;
letter-spacing:20px:字母間距;
text-align:center:水平居中對齊;
a:hover{font-weight:bold;color:red;}//滑鼠移到後變紅色
ext-decoration:none; 加段這個代碼就可以去掉下劃線了