html5--6-59 其他常用CSS属性
生活随笔
收集整理的這篇文章主要介紹了
html5--6-59 其他常用CSS属性
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
html5--6-59 其他常用CSS屬性
實(shí)例
?
?
?
學(xué)習(xí)要點(diǎn)
- 了解opacity屬性：透明度設(shè)定
- 了解cursor屬性：自定義鼠標(biāo)樣式
- 了解CSS新單位rem和em的區(qū)別
- 了解輪廓outline的設(shè)置
- 掌握display 屬性常用屬性值：
opacity：透明度設(shè)定
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來(lái)設(shè)定透明度。opacity 屬性能夠設(shè)置的值從 0.0 到 1.0。值越小，越透明。
E8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。對(duì)于濾鏡本套課程不作講解。
opacity與通過(guò)rgba()設(shè)定透明度的區(qū)別：前者同時(shí)作用于元素的標(biāo)簽內(nèi)容，后者只是作用于元素本身
鼠標(biāo)的樣式 cursor：
我們可以通過(guò)cursor屬性改變?yōu)g覽器默認(rèn)的鼠標(biāo)樣式，可改變的樣式很多，這里僅僅列出幾種相對(duì)常用的
rem:根元素字體的大小
瀏覽器默認(rèn)字體大小為16px
em是以父元素字體為基準(zhǔn)的
rem是以根元素字體大小為基準(zhǔn)的
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>rem和em的區(qū)別</title> 6 <style type="text/css"> 7 p{ 8 font-size: 0.75em; 9 } 10 .span1{ 11 font-size: 2em; 12 } 13 .span2{ 14 font-size: 2rem; 15 } 16 </style> 17 </head> 18 <body> 19 我是瀏覽器默認(rèn)html字體大小為16px; 20 <p> 21 我是p標(biāo)簽字體，段落文字大小為0.75em即：12px(16*0.75);<br> 22 <span class="span1"> 23 我大小是2em，即24px，這里是相對(duì)父級(jí)字號(hào)(12px)*2的，而不是相對(duì)body里面的16px 24 </span><br> 25 <span class="span2"> 26 我大小是2rem，即32px，這里是相對(duì)根元素字號(hào)(16px)*2的，而不是相對(duì)p里面的12px 27 </span> 28 </p> 29 </body> 30 </html>?
?
輪廓（outline）
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
- outline-color 設(shè)置輪廓的顏色。
- outline-style 設(shè)置輪廓的樣式。
- outline-width 設(shè)置輪廓的寬度。
- outline-offset 設(shè)置輪廓到邊框的距離。 注：css新增屬性,不可以寫到符合屬性里。
display 屬性常用屬性值：
display的屬性值很多，有些目前支持度不好，有些會(huì)放到以后課程或綜合實(shí)例中講解，這里介紹幾種常用的情況。
- none 此元素不會(huì)被顯示。
- block 此元素將顯示為塊級(jí)元素。特征：換行，可設(shè)置寬高尺寸。
- inline 行內(nèi)元素，默認(rèn)。特征:大小自適應(yīng)；不換行。
- inline-block 行內(nèi)塊元素。特征:可以設(shè)置大小，但是不可以換行。
- 其他：list-item/table/inline-table/table-cell/table-caption......
?
總結(jié)
以上是生活随笔為你收集整理的html5--6-59 其他常用CSS属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Stereo Matching 立体匹配
- 下一篇： 【Nodejs篇一】Node js 简介