css的一些樣式

文本陰影

text-shadow: x軸的偏移量 y軸的偏移量 模糊距離 陰影顏色(x正方向向右,y正方向向下)

text-shadow: 10px 10px 10px black;

( -webkit-瀏覽器類型前綴)

文字的描邊

text-stroke:文本描邊的寬度 顏色*/

背景顏色

background-color: red;

背景圖片

(優先級高於背景顏色)(url:地址)

background-image: url("../../img/f3_Android1.png");

背景圖片的遍歷方式

no-repeat:不重複

repeat-x:只在x軸方向遍歷(x軸方向重複)

repeat-y:只在y方向遍歷(y軸方向重複)

background-size:背景圖片的大小

contain:圖片的寬高比例不變,直到較小的方向填滿,才停止縮放(圖片永遠不會溢出)

cover:圖片的寬高比例不變,直到較大的方向填滿,才停止縮放(圖片基本上都會溢出)

固定的大小:x軸的寬度  y軸的高度

百分比大小(用的較多):x軸的寬度百分比 y軸高度的百分比

雪碧圖
很多小的圖形在同一個圖片上,用到哪個位置就移動哪個

background-position: -82px 0px;

列表

(列表樣式,none取消)

list-style: none;

(浮動,讓列表橫向顯示,left左對齊)

float: left;

超鏈接的狀態

<style>

        /*順序不能亂 LVHA*/

Link鏈接

        a:link{

            color: black;

        }

Visited瀏覽以後

        a:visited{

            color: darkgrey;

        }

Hover設置當鼠標懸停時的樣式

        a:hover{

            color: yellow;

        }

Active按下鼠標的樣式

        a:active{

            color: red;

        }

</style>

圖片鏈接

<a href="http://www.baidu.com">

    <img src="../../img/f3_Android1.png" alt="">

</a>

title屬性:當鼠標懸浮在元素上方時,顯示title屬性

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章