CSS中有哪些字體屬性呢?
font:複合屬性。設置或檢索對象中的文本特徵。
font-style:設置或檢索對象中的字體樣式。用於定義字體的風格,如:斜體(italic)等等。
font-variant:設置或檢索對象中的文本是否為小型的大寫字母。
font-weight:設置或檢索對象中的文本字體的粗細。
font-size:設置或檢索對象中的字體尺寸,在開發中12px字體最常用。
font-family :設置或檢索用於對象中文本的字體名稱序列;用於定義字體的樣式,如黑體,宋體等等。

1.color規定文本的顏色
定義元素內文字顏色
語法:color:顏色名|十六進位|RGB
1>預定義的顏色值,如red,green,blue等。
2>十六進位,如#FF0000,#FF6600等。實際工作中,十六進位是最常用的定義顏色的方式。
3>RGB代碼,如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%).
如:
div{color:red;}
div{color:#ff0000;}
div{color:rgb(255,0,0);}
div{color:rgba(255,0,0,.5);}
2.font-style 指定文本的字體樣式(正常、斜體)
該屬性設置使用斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個單獨的字體。理論上講,用戶代理可以根據正常字體計算一個斜體字體。
默認值 normal
normal 正常字體
italic 斜體字
p{font-style:italic;}
3.font-size 指定文本字體大小
通過像素來指定字體大小 1px=1像素
font-size:絕對單位|相對單位分別為:px像素|em/%
p{font-size:12px;}
4.font-family定義文本使用某個字體
默認值 由瀏覽器確定
示例:
font-family:Microsoft YaHei;
font-family:「Microsoft YaHei”,”Simsun」,「SimHei”;
5.font-weight 指定文本的粗細
字體加粗除了用b和strong標籤之外,可以使用CSS來實現。
normal:默認值。定義標準的字元。
bold:定義粗體字元
bolder:定義更粗的字元
lighter:定義更細的字元
100~900:定義由粗到細的字元。400等同於normal,而700等同於 old 。
inherit:規定應該從父元素繼承字體的粗細。
設置三個段落的字體的粗細:
p.nomal{font-weight:normal;}
p.thick{font-weight:bold;}
p.thicker{font-weight:900;}
6.letter-spacing
設置字的間距(增加或減少)
該屬性定義了在文本字元框之間插入多少空間。由於字元字形通常比其字元要窄,指定長度值時,會調整字母之間通常的間隔。因此,normal就相當於值為0.
如:div{letter-spacing:2px;}
normal:默認。規定字元間沒有額外的空間。
length:定義字元間的固定空間(允許使用負值)。
inherit:規定應該從父元素繼承letter-spacing屬性的值。

7.opacity
設置顏色的透明度,整個元素都會透明
默認值1,取值為0-1
1為不透明,0為完全透明
示例:
p{opacity:0;}
隱藏一個元素,完全不顯示,但是會佔空間,只是看不到
p{opacity:1;}
顯示一個元素 它和rgba中的」a「作用一樣
8.overflow:hidden|auto|scroll
當內容溢出元素框時隱藏|自動|顯示滾動條
visible:默認值。內容不會被修剪,會呈現在元素框之外。
hidden:內容會被修剪,並且其餘內容是不可見的。
scroll:內容會被修剪,但是瀏覽器會顯示滾動條以便查看其餘的內容。
auto:如果內容被修剪,則瀏覽器會顯示滾動條以便查看其餘內容。
inherit:規定應該從父元素繼承overflow屬性的值。
設置overflow屬性代碼:
div
{
width:150px;
height:150px;
overflow:scroll;
}
9.text-overflow
讓溢出的文字以省略號顯示
p{height:20px; width:100px;background:#ddd;}
width-space:nowrap; 讓文字在同一行顯示,不換行
overflow:hidden; 溢出部分隱藏
text-overflow:ellipsis; 文字一處部分省略號顯示,另外一個值為clip
原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/275129.html
微信掃一掃
支付寶掃一掃