2015秋前端開(kāi)發(fā)課件css2呈現(xiàn)

1、2-CSS呈現(xiàn)如何創(chuàng)造閃光點(diǎn)？2015 Spring, 本章內(nèi)容 基于文本的屬性 邊框 背景 背景顏色 背景圖片 漸變背景 透明基于文本的屬性基于文本的CSS屬性 color 指定文本的顏色 font-size 字體大?。簒x-small, x-small, small, medium, large, x-large, xx-large, smaller, larger 或者數(shù)字值 font-family 逗號(hào)分隔了字體名字 示例：verdana, sans-serif, etc. 當(dāng)存在時(shí)，瀏覽器加載一次 應(yīng)當(dāng)至少有一種通用字體 font-weight 可以是normal, bold, bo

2、lder, lighter 或數(shù)字在范圍100 900內(nèi)字體的CSS規(guī)則 font-style 字體樣式 值：normal, italic, oblique text-decoration 文本裝飾 值：none, underline, line-trough, overline, blink text-align 定義文本或其他內(nèi)容的對(duì)齊 值： left, right, center, 字體屬性速記 font 速記規(guī)則能在同一時(shí)間設(shè)置多個(gè)字體屬性等同于：font:italic normal bold 12px/16px verdanafont-style: italic;font-varia

3、nt: normal;font-weight: bold;font-size: 12px;line-height: 16px;font-family: verdana;基于文本的屬性 演示字體更多字體嵌入 使用font-face來(lái)聲明字體 指向服務(wù)器端的字體文件 以font-family調(diào)用字體 IE并不支持 使用嵌入字體替代圖片font-face font-family: SketchRockwell;src: url(SketchRockwell-Bold.ttf);.my_CSS3_class font-family: SketchRockwell;font-size: 3.2em;文字

4、陰影 應(yīng)用陰影到文字 語(yǔ)法：text-shadow: ; 不要改變框的大小text-shadow: 2px 2px 7px #000000;文本溢出 指定當(dāng)文本從包含元素中溢出時(shí)應(yīng)發(fā)生什么 語(yǔ)法：text-overflow: ; 可能值： ellipsis 顯示省略號(hào)來(lái)表示結(jié)尾文字 clip 默認(rèn)值，剪去文本 目前Firefox和IE并不支持單詞換行 允許長(zhǎng)單詞能夠被打斷并轉(zhuǎn)至下一行 語(yǔ)法：word-wrap: ; 可能值： normal break-word 所有主流瀏覽器都支持字體更多 演示邊框邊框 border-width: thin, medium, thick 或者數(shù)字值 (如，10

5、px) border-color: 顏色名或RGB值 border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset 每個(gè)屬性可以按左，右，上，下分別定義 border-top-style, border-left-color, 邊框的速記屬性 border 可立即設(shè)置邊框?qū)傩缘乃儆浺?guī)則等同于： 通過(guò)速記規(guī)則，指定不同側(cè)的邊框：border-top, border-left, border-right, border-bottom border:none 或 border:0 ？bo

6、rder: 1px solid redborder-width:1px;border-color:red;border-style:solid;邊框 演示邊框顏色 允許你創(chuàng)建有顏色的邊框 只有Firefox支持這種類型的顏色border: 8px solid #000;-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-left-colors: #555 #666

7、 #777 #888 #999 #aaa #bbb #ccc;-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;盒陰影 允許簡(jiǎn)單的實(shí)現(xiàn)多個(gè)陰影（外部或內(nèi)部）在盒元素上 為顏色、大小、模糊度和偏移指定值 示例：-moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;圓角 圓角是CSS3的一部分 所有主流瀏覽器支持 Firefox, IE 9, Chrome, O

8、pera和Safari 用border-radius屬性完成 三種定義圓角的方法border-radius: |? border-radius: 15px;border-radius: 15px 20px;border-radius: 15px 15px 15px 10px;其他邊框樣式 演示背景屬性背景 background-image 圖片URL作為背景使用, 如： background-color 同時(shí)使用顏色和圖片 background-repeat repeat-x, repeat-y, repeat, no-repeat background-attachment fixed /

9、scrollbackground-image:url(back.gif);背景(2) background-position 指定背景圖片的豎直和水平位置 豎直位置：top, center, bottom 水平位置：left, center, right 能夠指定百分?jǐn)?shù)或其他數(shù)字值 示例：background-position: top left;background-position: -5px 50%;背景速記屬性 background 速記規(guī)則在同一時(shí)間設(shè)置背景屬性： 等同于 一些瀏覽器當(dāng)使用速記規(guī)則時(shí)，并不同時(shí)支持顏色和圖像background: #FFF0C0 url(back.gi

10、f) no-repeat fixed top;background-color: #FFF0C0;background-image: url(back.gif);background-repeat: no-repeat;background-attachment: fixed;background-position: top;背景圖片或？ 背景圖片允許你存儲(chǔ)從HTML存儲(chǔ)許多圖片標(biāo)簽 有更少的代碼 更多面向內(nèi)容的方法 所有并不是頁(yè)面內(nèi)容的一部分的圖片（只用于美觀的圖片）應(yīng)當(dāng)移動(dòng)到CSS背景樣式 演示漸變背景 漸變是在兩種或多種指定顏色間的平滑變換 使用CSS漸變能夠替換圖片并減少下載時(shí)間 網(wǎng)上

11、有大量的漸變生成器 創(chuàng)建更靈活布局，縮放時(shí)看上去更好 通過(guò)不同關(guān)鍵詞支持所有主流瀏覽器 仍然是實(shí)驗(yàn)特性漸變背景示例/* Firefox 3.6+ */background: -moz-linear-gradient(100% 100% 90deg, #FFFF00, #0000FF);/* Safari 4-5, Chrome 1-9 */background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0000FF), to(#FFFF00);/* Safari 5.1+, Chrome 10+ */background: -webkit-

12、linear-gradient(#FFFF00, #0000FF);/* Opera 11.10+ */background: -o-linear-gradient(#2F2727, #0000FF);漸變背景 演示多背景 CSS3允許多背景圖片 簡(jiǎn)單的逗號(hào)分隔的圖片列表 支持Firefox(3.6+), Chrome(1.0/1.3+), Opera(10.5+)和Internet Explorer(9.0+) 其他屬性的逗號(hào)分隔列表background-image: url(sheep.png), url(grass.png);多背景 演示透明度透明 opacity 指定元素的透明度 從0到1的浮點(diǎn)數(shù) 老版本Firefox瀏覽器使用moz-opacity IE使用filter:alpha(opacity=value)值為0到