免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
6-23 CSS3中的文字與字體

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屬性一起使用

}

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
XML學(xué)習(xí)筆記之XML與CSS
第14章 使用CSS3設(shè)置元素樣式
WEB前端第十課——CSS字體、文本、列表屬性
CSS字體與段落屬性
CSS字體屬性與文本屬性
網(wǎng)頁|CSS字體介紹
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服