CSS(2)---css字體、文本樣式屬性

時間 2019-11-06

標籤 css 字體文本樣式屬性欄目 CSS 简体版

原文原文鏈接

css字體、文本樣式屬性

這篇主要講CSS文本屬性中的：字體樣式屬性 和 文本樣式屬性。css

1、字體樣式屬性

CSS 字體屬性主要包括：字體設置(font-family)、字號大小(font-size)、字體粗細(font-weight)、字體風格(font-style)、字體顏色(color)。html

一、字體設置(font-family)

網頁中經常使用的字體有 宋體、微軟雅黑、黑體 等，例如將網頁中 全部p標籤的字體設置爲微軟雅黑，可使用以下CSS樣式代碼：瀏覽器

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

能夠同時指定多個字體，中間以逗號隔開，表示若是瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。學習

p {font-family:"微軟雅黑",「宋體」，arial;}

注意字體

一、英文字體不須要加雙引號，如：選擇器{font-family:arial;}code

二、如字體中包含特殊符號必須用雙引號括起來，如：選擇器{font-family:"Microsoft yahei";}orm

三、儘可能使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。htm

二、字號大小(font-size)

p {font-size:15px;}

該屬性的值可使用相對長度單位，也可使用絕對長度單位。較經常使用，推薦使用相對長度像素單位px。blog

建議教程

一、網頁通常使用14px以上的字體大小字體大小

二、儘可能使用雙數，由於單數狀況下ie6等老式瀏覽器可能會出bug

三、字體粗細(font-weight)

p {font-weight:bold;}

字體加粗除了用 b 和 strong 標籤以外，可使用CSS 來實現，可是CSS 是沒有語義的。

屬性值

bold：字體加粗 ( 700：等於bold，若是還想更粗就加大數值)
normal：字體正常  ( 400：等於normal，若是還想更細就減少數值)

四、字體風格(font-style)

p {font-style:normal;}

字體傾斜除了用 i 和 em 標籤以外，可使用CSS 來實現，可是CSS 是沒有語義的。

屬性值

normal：默認值，瀏覽器會顯示標準的字體樣式。
italic：瀏覽器會顯示斜體的字體樣式。

平時咱們不多給文字加斜體，反而喜歡給斜體標籤（em，i）改成普通模式。

五、文本顏色(color)

color屬性用於定義文本的顏色，其取值方式有以下3種：

1.預約義的顏色值: 如red，green，blue等。
2.十六進制: 如#FF0000，#FF6600，#29D794等。（經常使用)。
3.RGB代碼: 如紅色能夠表示爲rgb(255,0,0)或rgb(100%,0%,0%)。

六、綜合設置字體樣式(fort)

學過了上面的幾個屬性以後咱們發現若是一個標籤這些樣式都要設置的話寫起來會很繁瑣，代碼冗餘性太強，下面咱們來學習一下簡單的設置方式。

基本語法

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}

注意

一、使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。

二、其中不須要設置的屬性能夠省略（取默認值），但必須保留 font-size 和 font-family 屬性，不然font屬性將不起做用。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
    p {
        font: italic  20px "微軟雅黑";
    }
    </style>
</head>
<body>
    <p>字體連寫是有順序的</p> <!-- 字體分格傾斜 大小20px 微軟雅黑 -->
</body>
</html>

2、文本樣式屬性

CSS外觀屬性包含：行間距(line-height)、水平對齊方式(text-align)、首行縮進(text-indent)、文本的裝飾(text-decoration)

一、行間距(line-height)

p {line-height: 15px;}

line-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，通常稱爲行高。通常狀況下，行距比字號大7.8像素左右就能夠了。

二、text-align:水平對齊方式

p {text-align: center;}

text-align屬性用於設置文本內容的水平對齊，至關於html中的align對齊屬性。

屬性值

left：左對齊（默認值）
right：右對齊
center：居中對齊

提示：這個標籤只會對塊級元素或表元素居中，要經過在這些元素上適當地設置左、右外邊距來實現。

三、text-indent:首行縮進

p {text-indent: 2em;}

text-indent屬性用於設置首行文本的縮進，1em 就是一個字的寬度若是是漢字的段落， 1em 就是一個漢字的寬度

四、text-decoration 文本的裝飾

text-decoration 一般咱們用於給連接修改裝飾效果

五、總結

這裏針對這裏所講的作一個總結

參考

更多的能夠看w3school官方文檔: w3school-CSS 教程

你若是願意有所做爲，就必須善始善終。(4)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。