CSS中常用的字體屬性設(shè)置
·font-size 規(guī)定文本的字體尺寸
?通常使用px,百分比,em來設(shè)置字體的大小
■em是css中的相對單位,是相對于當(dāng)前對象內(nèi)的字體尺寸,若沒有制定文字大小尺寸,則為瀏覽器默認(rèn)字體大小
?xx-small、x-small、small、medium、large、x-large、xx-large把字體的尺寸設(shè)置為不同的尺寸,默認(rèn)值:medium。
?smaller 把 font-size 設(shè)置為比父元素更小的尺寸。
?arger 把 font-size 設(shè)置為比父元素更大的尺寸。
·font-variant:規(guī)定是否以小型大寫字母的字體顯示文本。
?normal 默認(rèn)值。瀏覽器會顯示一個標(biāo)準(zhǔn)的字體。
?small-caps 瀏覽器會顯示小型大寫字母的字體。
·font-style:規(guī)定文本的字體樣式。
?normal 默認(rèn)值。瀏覽器會顯示一個標(biāo)準(zhǔn)的字體。
?italic 瀏覽器會顯示一個斜體的字體樣式。
?oblique 瀏覽器會顯示一個傾斜的字體樣式。暫時不作講解,了解即可
·font-weight:規(guī)定字體的粗細(xì)。
?normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。
?bold 定義粗體字符。
?bolder 定義更粗的字符。lighter 定義更細(xì)的字符。
?100-900;定義由粗到細(xì)的字符。400 等同于 normal,而 700 等同于 bold。
·font-family:規(guī)定文本的字體系列。
·font:在一個聲明中設(shè)置所有字體屬性。
?這個簡寫屬性用于一次設(shè)置元素字體的兩個或更多方面。
?至少要指定字體大小和字體系列
?可以按順序設(shè)置如下屬性:font-style/font-variant/font-weight/font-size/font-family
·@font-face:嵌入字體
·注:字體的設(shè)置還有其他幾個很少的用到的屬性,比如font-size-adjust為元素規(guī)定 aspect 值;font-stretch 收縮或拉伸當(dāng)前的字體系列。都很少用到或者多數(shù)瀏覽器不支持,就不作講解
CSS中常用的文本屬性設(shè)置
溫馨提示:對于一些目前瀏覽器支持度不是太好或者極不常用屬性不進(jìn)行講解
掌握
·color 設(shè)置文本顏色
·text-align 規(guī)定元素中的文本的水平對齊方式。
?left 默認(rèn)值/right/center/justify兩端對齊
?CSS3中新增了start和end屬性值,在通常情況下,start相當(dāng)于left,end相當(dāng)于right
·line-height 設(shè)置行高。
?normal/數(shù)字/百分比/px/em
·text-indent 設(shè)置文本的首行縮進(jìn)
?常用單位像素/百分比/em
·text-decoration 向文本添加修飾。
?none 默認(rèn)值。顯示標(biāo)準(zhǔn)的文本。
?underline 定義文本下劃線。
?overline 定義文本上劃線。
?line-through 定義穿過文本下的一條線。
?blink 定義閃爍的文本。
?CSS3中還有一些新增加的屬性值但是目前瀏覽器多不支持,不再介紹
·letter-spacing 設(shè)置字符間距。
?定義字符間的固定空間
?normal 默認(rèn)。/像素:(允許使用負(fù)值)
·word-spacing 設(shè)置字/單詞間距。
?增加或減少單詞間的空白
?normal 就等同于設(shè)置為 0。/如果指定為長度值,會調(diào)整字之間的通常間隔;(允許使用負(fù)值)。
·text-transform 設(shè)置對象中的文本的大小寫
?none默認(rèn)。標(biāo)準(zhǔn)的文本。/capitalize每個單詞以大寫字母開頭。/uppercase 轉(zhuǎn)換為大寫字母。/lowercase轉(zhuǎn)換為小寫字母
·text-shadow 向文本添加陰影。
熟悉
·white-space 設(shè)置元素中空白的處理方式。
?normal 默認(rèn)。空白會被瀏覽器忽略
?pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的pre標(biāo)簽。
?nowrap 文本不會換行,文本會在在同一行上繼續(xù),直到遇到br標(biāo)簽為止。
?pre-wrap 保留空白符,但是正常地進(jìn)行換行。
?pre-line 合并空白符,但是正常地進(jìn)行換行。
·direction 設(shè)置文本方向
?ltr默認(rèn)。文本方向從左到右。/rtl 文本方向從右到左。
·word-wrap 允許對長的不可分割的單詞進(jìn)行分割并換行到下一行。
?normal默認(rèn)值/break-word:在長單詞或 URL 地址進(jìn)行換行。
·word-break 規(guī)定非中日韓文本的換行規(guī)則。
?normal默認(rèn)值/break-all:允許在單詞內(nèi)換行。/keep-all 只能在半角空格或連字符處換行。
·text-fill-color 文本填充顏色,指定文字填充部分的顏色.目前多數(shù)瀏覽器不支持,暫不講解。
·text-stroke 文本邊框顏色,指定文字描邊部分的顏色。目前多數(shù)瀏覽器不支持,暫不講解。
?text-stroke-width文字的描邊寬度
?text-stroke-color文字的描邊顏色
?備注:使用該屬性需要使用瀏覽器私有前綴
·text-overflow 設(shè)置是否使用一個省略標(biāo)記(...)標(biāo)示對象內(nèi)文本的溢出
?clip: 默認(rèn)值當(dāng)對象內(nèi)文本溢出時不顯示省略標(biāo)記(...),而是將 溢出的部分裁切掉。
?ellipsis:當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...)。
?溫馨提示:該屬性需要和over-flow:hidden屬性、white-space:nowrap配合使用,放到后邊章節(jié)再講解
了解
·text-outline 規(guī)定文本的輪廓
·text-justify 規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時所使用的對齊方法。
·text-align-last 設(shè)置如何對齊最后一行或緊挨著強(qiáng)制換行符之前的行。
·text-emphasis 向元素的文本應(yīng)用重點標(biāo)記以及重點標(biāo)記的前景色。
·unicode-bidi 用于同一個頁面里存在從不同方向讀進(jìn)的文本顯示。與direction屬性一起使用
?normal/embed/bidi-override
?不常用,了解即可
·hanging-punctuation 規(guī)定標(biāo)點字符是否位于線框之外。
·punctuation-trim 規(guī)定是否對標(biāo)點字符進(jìn)行修剪。
·tab-size:設(shè)定一個tab在頁面中的顯示長度
·text-wrap 規(guī)定文本的換行規(guī)則。注釋:目前主流瀏覽器都不支持 text-wrap 屬性。
#div1{font-size: 50px}
#div2{font-size: 100%}
#div3{font-size:x-large}
#div4{font-variant: small-caps;}
#div5{font-style: italic;}
#div6{font-family:黑體;font-size: 50px}
#div7{font:italic bold small-caps 60px 楷體;}
text-align: left;/ 文本方向
line-height: 2; 字體高度
text-indent: 30px; 設(shè)置文本的首行縮進(jìn)
text-decoration:none; 向文本添加修飾。
letter-spacing:1em; 設(shè)置字符間距。
word-spacing:1em; 設(shè)置字/單詞間距。
a{text-decoration:none;}
white-space:pre; 設(shè)置元素中空白的處理方式
#p1{
direction:rtl;
unicode-bidi:bidi-override; 用于同一個頁面里存在從不同方向讀進(jìn)的文本顯示。與direction屬性一起使用
}