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