摘要:將內(nèi)容在邊界內(nèi)換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進行換行。個人感覺跟類似強行截斷英文單詞,達到詞內(nèi)換行效果。
CSS3文本 css字體類型屬性
font-family, font-style(normal、italic、oblique[傾斜]), font-weight,
font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持),
font-stretch(無瀏覽器支持), font-variant(定義字體大小寫,取值有:normal、small-caps)
這里提一下font-size-adjust:
這個屬性為某個元素規(guī)定一個 aspect 值,這樣就可以保持首選字體的 x-height。 aspect指字體的小寫字母 "x" 的高度與
"font-size" 高度之間的比率。
通常aspect值較高的字體具有較好的易讀性。在元素下定義了為多種字體定義相同的aspect值,可保證當(dāng)?shù)谝粋€字體不可用時,瀏覽器可以找出什么樣的font-size使用第二選擇字體顯示文字。
再提一下font-variant,當(dāng)其設(shè)定的值為small-caps(小寫型大寫字母)時,字體是這樣顯示的:
回到剛剛談的6個文本屬性,其中font-family是復(fù)合屬性中必不可少的屬性。此外還有一個復(fù)合屬性font。
font: font-style font-weight/line-height font-familycss文本類型屬性
word-spacing(詞間距)、letter-spacing(字符間距)、vertical-align、text-decoration、text-indent、text-align、line-height、
text-transform(定義文本大小寫,取值:none,uppercase,lowercase,capitalize)、
text-shadow、white-space(定義文本之間的空白符顯示與否)、direction
用法:
text-shadow: [color] x-offset y-offset blur-radius(只能是正值)
這個屬性的用法跟box-shadow挺相似的,都是需要定義顏色、x軸偏移、y軸偏移和模糊半徑。
但是box-shadow多了一個陰影擴展的屬性,位于模糊半徑后。
兼容性:
ie9+以及其他主流瀏覽器。
若想更好地兼容ie,可使用濾鏡屬性。
E: {filter:shadow(Color= 顏色值, Direction= 數(shù)值, Strength= 數(shù)值)} 其中Direction用于設(shè)定投影方向。css溢出文本屬性——text-overflow
語法:
text-overflow: clip || ellpisis
clip: 簡單裁切,不顯示省略標(biāo)記
ellpisis: 文本溢出時顯示省略(…)標(biāo)記
兼容性:
IE6+!!!!以及其他主流瀏覽器。
使用方法:
先來看clip的情況:
代碼:
.clip { width: 100px; border: 1px solid saddlebrown; text-overflow: clip; }
效果:
明顯看出text-overflow沒有起到任何裁切的效果。要想這個屬性生效,需要配合其他三個屬性使用,分別是 over-flow: hidden(定義超出隱藏)、white-space: nowrap(定義文本不換行)、width(元素寬度)。再來看看改進后的代碼:
.clip { width: 100px; border: 1px solid saddlebrown; text-overflow: clip; overflow: hidden; white-space: nowrap; }
效果:
現(xiàn)在來看看ellipsis的情況:
同上啦,都是需要配合width、overflow: hidden、white-space: nowrap使用的。
代碼:
.clip { width: 100px; border: 1px solid saddlebrown; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
效果:
看上去就比clip自然多了。并且這個時候文本輸出是完整的,只不過收到了元素容器大小限制無法全部顯示出來,這是就用"…"代替隱藏的部分。
css3文本換行在text-overflow的每個例子中都用到了white-space屬性,用來禁止文本換行。為了增強文本換行顯示的功能,css3中又添加了word-wrap和word-break屬性。
word-wrap在CSS3中,word-wrap可以實現(xiàn)長單詞和URL地址的自動換行。
語法:
word-wrap: normal | break-word
normal: 瀏覽器只在半角空格或連字符的地方進行換行。
break-word: 將內(nèi)容在邊界內(nèi)換行(不截斷英文單詞換行)
語法:
word-break: normal | break-all | keep-all
normal: 瀏覽器只在半角空格或連字符的地方進行換行。
keep-all: 不允許字斷開。如果是中文把前后標(biāo)點符號內(nèi)的一個漢字短語整個換行,英文單詞整個換行;如果出現(xiàn)某個英文字符長度超過容器邊界,后面的部分將撐破容器。(個人感覺跟normal類似)
break-all: 強行截斷英文單詞,達到詞內(nèi)換行效果。
這里比較一下word-wrap和word-break的區(qū)別:
/*這是測試word-wrap為break-word的box*/ .box { width: 200px; word-wrap: break-word; border: 1px solid sandybrown; } /*這是測試word-break為break-all的box*/ .box2 { width: 200px; word-break: break-all; border: 1px solid sandybrown; }
效果:
附加word-wrap為normal和word-break為keep-all的測試:
white-space這個屬性主要用來聲明建立布局過程中如何處理元素中的空白符。
語法:
white-space: normal | pre | nowrap | pre-line | pre-wrap | inherit
pre: 類似html中標(biāo)簽效果。
nowrap: 文本不會換行。直至遇到
pre-line: 合并空白符,但是保留換行符。意思是不能有空格,但可以換行。
pre-wrap: 保留空白符和換行符。
現(xiàn)在來測試一下:
html:
css:
white-space: nowrap;
white-space: pre;
white-space: pre-line;
white-space: pre-wrap;
css3新增的顏色定義屬性:
rgba(r,g,b,a)、hsl(h,s,l)、hsla(h,s,l,a)
其中a的值為0~1
瀏覽器兼容性為ie9+以及其他主流瀏覽器;
這里提一下rgba和opacity為元素設(shè)置透明度的區(qū)別:
opacity只能為元素的背景設(shè)置透明度,并且影響其后代元素,使其后代元素都將繼承其透明度。
rgba可以對元素任何具有顏色的屬性設(shè)置。并且對其后臺元素?zé)o影響。
因為hsl的使用頻率較少,這里就不詳細敘述了。可以看看這篇文章:Click here
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/111228.html
摘要:將保持背景的原始高度和寬度。對于平鋪的重復(fù)性背景圖像,確保背景圖像不會有截斷效果。解決屏幕雙倍像素下背景圖像模糊問題。將大圖縮小一倍使用鏈接或者列表元素的背景圖像能和文本一起進行縮放。內(nèi)聯(lián)元素背景圖像平鋪循環(huán)方式暫無文章多背景 CSS背景屬性 基本屬性 background-color: 默認值為transparent,可以以顏色名、rgb(css3新增rgba)、hls(css3中新...
摘要:選擇器統(tǒng)覽的選擇器及其對應(yīng)的瀏覽器兼容性前端觀察這篇文章已經(jīng)詳細總結(jié)了通過測試有如下更正或說明注下述瀏覽器兼容性以表示,表明以及以上版本。 CSS1、2、3選擇器統(tǒng)覽 css1、2、3的選擇器及其對應(yīng)的瀏覽器兼容性前端觀察這篇文章已經(jīng)詳細總結(jié)了:Click 通過測試:有如下更正或說明: 注:下述瀏覽器兼容性以x+表示,表明x以及x以上版本。 動態(tài)偽類選擇器E:active:若E為錨...
摘要:最近在看揭秘,于是寫了文章來作筆記,除此以外還會補充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號,那么同時需要調(diào)整行高。那么經(jīng)過修改后的代碼如下關(guān)于使用還是還是百分比,需要根據(jù)具體情況來決定。 最近在看《css揭秘》,于是寫了文章來作筆記,除此以外還會補充一些自己遇到的筆試題。希望大家都有所收獲。 css編碼技巧 盡量減少代碼重復(fù) 在實踐中,代碼可維護性的最大要...
摘要:在動畫過程中,您能夠多次改變這套樣式。以百分比來規(guī)定改變發(fā)生的時間,或者通過關(guān)鍵詞和,等價于和。為了獲得最佳的瀏覽器支持,您應(yīng)該始終定義和選擇器。注釋請使用動畫屬性來控制動畫的外觀,同時將動畫與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實用模塊包括: 背景和邊框 文本效果 2D/3D 轉(zhuǎn)換 動畫 多列布局 用戶界面 CSS3 邊框: 用于創(chuàng)建圓角 border...
摘要:但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看,在實際開發(fā)中很少來使用這個單位。由于基本都是一些實用性的技巧,我就不一一列舉了,建議自讀。很好很實用的一本書。 第一章 引言 css編碼技巧 在引言中,作者提到使用em與inherit來實現(xiàn)css代碼的簡潔與可維護性。但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看,在實際開發(fā)中很少來使用em這個單位。如何用以及何時去使用,還是要根據(jù)實際開發(fā)需求來定吧,畢竟這兩個屬性...
閱讀 3046·2023-04-26 02:27
閱讀 2763·2021-11-22 13:54
閱讀 901·2021-11-12 10:36
閱讀 3752·2021-10-09 09:44
閱讀 3177·2021-10-09 09:41
閱讀 1222·2021-09-22 10:02
閱讀 2833·2019-08-30 15:56
閱讀 3103·2019-08-30 11:02