對齊方式及其所用屬性「css字體間距的屬性」

CSS中有哪些字體屬性呢?

font:複合屬性。設置或檢索對象中的文本特徵。

font-style:設置或檢索對象中的字體樣式。用於定義字體的風格,如:斜體(italic)等等。

font-variant:設置或檢索對象中的文本是否為小型的大寫字母。

font-weight:設置或檢索對象中的文本字體的粗細。

font-size:設置或檢索對象中的字體尺寸,在開發中12px字體最常用。

font-family :設置或檢索用於對象中文本的字體名稱序列;用於定義字體的樣式,如黑體,宋體等等。

CSS有哪些好用的字體屬性?

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屬性的值。

CSS有哪些好用的字體屬性?

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

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-17 14:19
下一篇 2024-12-17 14:19

相關推薦

發表回復

登錄後才能評論