前端開發(fā)學習筆記(六)- Css 文字排版

一.文字排版--字體

我們可以使用CSS樣式為網(wǎng)頁中的文字設置字體,字號,顏色等樣式屬性。這里注意不要設置不常用的字體,因為如果用戶本電腦上如果沒有安裝你設置的字體,就會顯示瀏覽器默認的字體。(因為用戶是否可以看到你設置的字體樣式取決于用戶本地電腦上是否安裝你設置的字體.)現(xiàn)在一般網(wǎng)頁喜歡設置“微軟雅黑”.

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

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

P:第一種方法比第二種方法兼容性好一些。因為這種字體既美觀又可以在客戶端安全的顯示出來。

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

可以使用上面代碼設置網(wǎng)頁中文字的字號為12像素,并把字體顏色設置為#666(灰色);

p span{font-weight:bold;}

我們還可以使用CSS樣式來改變文字的樣式:粗體,斜體,下劃線,刪除線。上面代碼可以實現(xiàn)設置文字以粗體樣式顯示出來。

p a{font-style :italic};

上面代碼可以實現(xiàn)文字以斜體樣式在瀏覽器中顯示.

p a{text-decoration:underline;}

有些情況下想為文字設置下劃線樣式,這樣可以在視覺上強調(diào)文字。上面代碼實現(xiàn)了文字下劃線樣式

p a{text-decoration:line-through;}

刪除線樣式

二.段落排版

縮進:中文字體中的段前習慣兩個文字的空白,這個特殊的樣式可以用下面代碼實現(xiàn).

p{text-ident:2em};2em的意思就是文字的2倍大小

行間距(行高):line-height

p{line-height:1.5em};

中文字間:letter-spacing

h1{letter-spacing:50px;}這個樣式使用在英文單詞時,是設置字母與字母之間的間距

字母間距:word-spacing

h1{word-spacing:50px;}設置英文單詞之間的間距

對齊:text-align 為塊元素中的文本,圖片設置樣式

h1{text-align:center;}

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,217評論 1 4
  • CSS基礎 本文包括CSS基礎知識選擇器(重要?。。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,452評論 0 40
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,172評論 1 92
  • 第6章 開始學習CSS,為網(wǎng)頁添加樣式 1、認識CSS樣式CSS全稱為“層疊樣式表 (Cascading Styl...
    夏沫xx閱讀 1,113評論 1 11
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 2,074評論 0 6

友情鏈接更多精彩內(nèi)容