CSS美化超级链接和鼠标

转载 2016年06月02日 09:57:22
一、超级链接
对于超级链接的修饰,通常可以采用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的顺序来设置。

CSS学习笔记12:伪类和超链接的美化

一、伪类伪类用于向某些选择器添加特殊的效果。类就是工程师加的,比如div属于box类,很明确,就是属于box类。但是a属于什么类?不明确。因为要看用户有没有点击、有没有触碰。所以,就叫做“伪类”,同一...
  • sinat_34647836
  • sinat_34647836
  • 2017年02月15日 13:38
  • 638

纯CSS3美化radio和checkbox

如题,主要通过CSS3来实现将radio和checkbox美化的效果,但是兼容性并不是很好,PC端只支持chrome浏览器(IE和Firefox测试不行,其他没有更多测试)。然后微信端和QQ端访问也是...
  • u010571913
  • u010571913
  • 2015年07月20日 15:48
  • 2506

CSS定义鼠标移上图片链接,出现边框效果

一个比较适合网站友情链接用的CSS图片链接和文字链接样式定义代码,图片样式简洁,鼠标移上后,图片链接出现边框,文字链接去掉了下划线,比较中庸,但放在网页上既简洁,又漂亮,特别是用在网站底部的时候,我觉...
  • life66881
  • life66881
  • 2015年06月15日 12:58
  • 1328

css美化下拉框select

我们老是在想着怎么提升自己的水平,但是实际上的行动却很少,大师都说是要每天码一点点代码的,那么要怎么做到动手实践码代码呢??我就想有时候我们自己在欣赏别人的网站的时候,是不是就会想说看到某个模块非常的...
  • eadio
  • eadio
  • 2014年05月13日 15:41
  • 4604

CSS表单-文本输入框美化CSS教程

CSS表单-文本输入框美化CSS教程 [code]昨天我做了一个表单模板给大家看,眩目漂亮的时尚表单模板,今天我就来仔细分解一下文本输入框的美化步骤,高手就飘过了。 css美化其实就是一个原理的问题,...
  • hxp42
  • hxp42
  • 2010年10月15日 14:11
  • 12489

纯CSS 实现radio checkbox样式美化

我们知道CSS 是不能直接定义radio 标签和checkbox 标签的样式,但是默认的实在是太丑了,总要想办法来美化美化这货的。强大的CSS选择器可以帮助我们来实现美化。 首先我们看我们美化过...
  • Jessica_hhh
  • Jessica_hhh
  • 2016年08月22日 14:51
  • 4627

表单美化css

表单美化 input,img,span,textarea{vertical-align:middle}/*文本框与图片垂直居中对齐*/
  • quweiie
  • quweiie
  • 2016年03月08日 22:28
  • 608

CSS美化的漂亮搜索框(二)

效果如下图所示: HTML Code: CSS美化的漂亮搜索框 body{ font: normal 100% 'Arial','Helve...
  • kalision
  • kalision
  • 2012年02月28日 16:39
  • 6710

css input上传按钮美化

css input[type=file] 样式美化,input上传按钮美化 我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox...
  • json_ligege
  • json_ligege
  • 2016年11月21日 19:01
  • 1487

巧用css美化select下拉列表 更换下拉箭头

巧用css美化select下拉列表 更换下拉箭头 所属栏目:常用CSS技巧 时间:2014-05-23 来源:网络 作者:不详 点击: 9912 ...
  • ncqqbesny
  • ncqqbesny
  • 2015年10月10日 15:09
  • 8043
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS美化超级链接和鼠标
举报原因:
原因补充:

(最多只允许输入30个字)