前篇博客對CSS的選擇器進行了一些總結,本次博客對文本的設置進行一個小小的總結。文本的設置又包括了字體的設置和文本的一些屬性的設置,
字體的設置
字體的設置又包括設置字體樣式、設置字體大小、設置字體粗細一級文字的樣式(如斜體)等。
------》font-family:指定字體
font-family用於設置字體:例如宋體,楷體等等。語法格式如下:
p{
font-family:"微軟雅黑";
}
或者
p{
font-family:"Times New Roman",Georgia,Serif;
}
font-family 可以把多個字體名稱作爲一個“回退”系統來保存。如果瀏覽器不支持第一個字體,則會嘗試下一個。也就是說,font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。
注意:
- 各種字體之間必須使用英文狀態下的逗號隔開
- 一般情況下如果有空格隔開的多個單詞組成的字體加引號
- 儘量使用系統默認自帶字體,保證在任何用戶的瀏覽器中都能正確顯示
- 最常見的幾個字體: body [font-family,” Microsoft YaHei‘’;tahoma, arial," Hiragino Sans GB"};
------》font-size:指定字體大小
基本語法:
h1 {font-size:60px;}
h2 {font-size:40px;}
font-size 值可以是絕對或相對值。
絕對值:
- 將文本設置爲指定的大小
- 不允許用戶在所有瀏覽器中改變文本大小(不利於可用性)
- 絕對大小在確定了輸出的物理尺寸時很有用
相對大小:
- 相對於周圍的元素來設置大小
- 允許用戶在瀏覽器改變文本大小
注意:
如果您沒有規定字體大小,普通文本(比如段落)的默認大小是 16 像素 (16px=1em)。使用像素來設置字體大小。通過像素設置文本大小,可以對文本大小進行完全控制:
------》font-weight:指定加粗
語法格式:
p{font-weight:normal;}
p{font-weight:bold;}
p{font-weight:900;}
font-weight值得設定:font-weight設置爲400等同於設置爲normal,設置爲700等同於設置爲bold.
------》font-style
可用於對字體設置斜體等。語法格式:
p{font-style:normal;}
p{font-style:italic;}
p{font-style:oblique;}
------》font-variant
該屬性用於設置大寫字母的字體顯示。具體的語法格式如下:{ font-variant: normal 、small-caps、inherit: )其中的參數值分別表示默認值、顯示型大寫字母的字體、繼承
------》font複合屬性
用於一次性設置元素字體的兩個或者更多的方面,似的代碼更簡潔。但是此複合屬性的運用有一定的使用順序。
font-style---》font-variant----》font-weight----》font-size----》font-family
如果沒有設置值得話系統會使用默認值。
屬性 | 表示 | 注意點 |
font-size | 字號 | 常用單位px像素 |
font-fanily | 字體 | 按照設計約定來設置字體 |
font-weight | 字體粗細 | 注意:400是normal,700是bold,數字後面不跟單位 |
font-style | 字體樣式 | 傾斜是italic,不傾斜是normal,工作中常用normal |
font | 字體連寫 | 此用法是有順序的,不能隨意更換位置,並且字號和字體必須同時出現 |
文本的屬性
文本的屬性包括:文本顏色(color)、對齊文本(text-align)、裝飾文本(text-decoration)、文本縮進(text-indent)和行間距(line-height)。
------》color
/*預定義顏色值*/
body
{
color:red;
}
/*十六進制*/
h1
{
color:#00ff00;
}
/*RGB代碼*/
p
{
color:rgb(0,0,255);
}
------》對齊文本text-align(水平對齊)
此設置只能設置文本的水平對齊方式而不能設置垂直方向對齊,垂直方向設置對齊需要另外一個設置:那就是設置文字行高=盒子高【line-height=盒子高】
------》裝飾文本text-decoration
在設置鏈接下劃線的時候會涉及到這個屬性的使用。
語法格式:
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
取值用法:
------》文本縮進text-indent
經常用語設置文本的首航縮進字符的時候使用。
語法格式:
p
{
text-indent:2em;
}
em是一個相對單位,就是當前元素一個文字的大小,如果當前元素沒有設置大小,就默認按照父元素的一個文字大小。
------》行間距line-height
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差(在 CSS 中成爲“行間距”)分爲兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。