CSS美化超级链接和鼠标

一、超级链接

对于超级链接的修饰，通常可以采用CSS伪类。

伪类是一种特殊的选择符，能被浏览器自动识别，其最大的用处是在不同状态下可以对超级链接定义不同的样式效果。

伪类	用途
a:link	定义a对象在未被访问前的样式
a:hover	定义a对象在其鼠标悬停时的样式
a:active	定义a对象被用户激活时的样式（在鼠标单击与释放之间发生的事件）
a:visited	定义a对象在其链接地址已被访问过时的样式

1.超级链接背景图设置

background-image

2.超级链接按钮效果

实现一种凹陷的效果。其实现方式通常是利用CSS中的a:hover，当鼠标经过链接时，将链接向下、向右各移动一个像素，这样显示效果就像按钮被按下的效果。

二、鼠标

控制鼠标箭头 Cursor

属性值	含义	属性值	含义
auto	自动，按照默认状态自行改变	s-resize	箭头朝下双向
crosshair	精确定位十字	w-resize	箭头朝左双向
default	默认鼠标指针	e-resize	箭头朝右双向
hand	手形	ne-resize	箭头朝右上双向
move	移动	se-resize	箭头朝右下双向
help	帮助	nw-resize	箭头朝左上双向
wait	等待	sw-resize	箭头朝左下双向
text	文本	pointer	指示
n-resize	箭头朝上双向	url(url)	自定义鼠标指针

一、背景

1.背景颜色background-color

{background-color: transparent | color}

不仅可以设置整个网页的背景颜色，还可以设置指定HTML元素的背景色

2.背景图片background-image

background-image: none | url(url)

3.背景图片重复background-repeat

属性值	含义
repeat	背景图片水平和垂直方向都重复平铺
repeat-x	背景图片水平方向重复平铺
repeat-y	背景图片垂直方向重复平铺
no-repeat	背景图片不重复平铺

4.背景图片显示background-attachment

设定背景图片是否随文档一起滚动，使背景图片始终处于视野范围内，以避免出现因页面滚动而消失的情况。

属性值	含义
scroll	默认值，当页面滚动时，背景图片随页面一起滚动
fixed	背景图片固定在页面的可见区域

5.背景图片位置background-position

属性值	含义
length	设置图片与边距水平与垂直方向的距离长度，后跟长度单位
percentage	以页面元素框的宽度或高度的百分比放置图片
top	背景图片顶部居中显示
center	背景图片居中显示
bottom	背景图片底部居中显示
left	背景图片左部居中显示
right	背景图片右部居中显示

6.背景图片大小background-size 

属性值	含义
	由浮点数字和单位标识符组成的长度值，不可为负值
>	取值范围为0%—100%，不可为负值
cover	保持背景图片本身的宽高比例，将图片缩放到正好完全覆盖所定义的背景区域
contain	保持背景图片本身的宽高比例，将图片缩放到宽度或高度正好适应所定义的背景区域。

二、边框

1.边框样式：border-style

几种边框样式可以定义在一个边框中，从上边框开始按照顺时针的方向分别定义边框的上、右、下、左边框样式，从而形成多样式边框。

P{border-style:dotted solid dashed groove}

属性值	含义
none	无边框，无论边框宽度设为多大
dotted	点线式边框
dashed	破折线式边框
solid	直线式边框
double	双线式边框
groove	槽线式边框
ridge	脊线式边框
inset	内嵌效果的边框
outset	突起效果的边框

2.边框颜色：border-color 

3.边框线宽：border-width

属性值	含义
medium	默认值，中等宽度
thin	比medium细
thick	比medium粗
length	自定义宽度

4.边框复合属性

  {border: border-width | border-style | border-color}

这3个属性顺序可以自由调换

5.圆角边框border-radius

可以包含两个参数值

●    第一个参数表示圆角的水平半径

●    第二个参数表示圆角的垂直半径

●    两个参数用斜线隔开

可以包含2-4个属性值

●    如直接赋值4个，这4个值将按照top-left,top- right,bottom-right,bottom-left的顺序来设置。