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属性

猜你喜欢

转载自blog.csdn.net/tjy1214/article/details/81258069