【第22期】观点:IT 行业加班,到底有没有价值?

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如何设置超链接样式

css设置超链接样式是通过伪类来实现的   (1) :link:设置a对象在未被访问前的样式表属性。 (2) :visited:设置a对象在其链接地址已被访问过时的样式表属性。 (3) :hover:...

CSS设置动态超链接

CSS设置动态超链接            HTML中,超链接是通过标记实现的,具体的地址使用标记的href属性。            ali的博客            默认的情况下,浏览中的...

HTML-CSS设置超链接颜色字体

我们可以用CSS控制超链接字体样式,下面先来看一段代码: #em a:link,#em a:visited{font-family:Segoe UI Light;font-size:24pt;colo...

CSS改变超链接字体样式

一 应用 网站中会有多种超链接,当我们将鼠标移动到某一超链接上时,超链接就会以不同的字体样式显示。 例如超链接的字体样式显示为斜体、粗体、下划线、删除线或粗斜体等。 本应用将通过JavaScri...

超链接CSS样式

1、a:link 设置a对象在未被访问前(未点击过和鼠标未经过)的样式表属性。也就是html a锚文本标签的内容初始样式。 2、a:hover 设置对象在其鼠标悬停时的样式表属性,也就是鼠标刚刚...

如何利用CSS给同一个网页中的超链接设置设置不同的样式?

转自文章 http://www.cnblogs.com/wuhuisheng/archive/2012/06/21/2557302.html 如何利用CSS给同一个网页中的超链接设置设置不同...

CSS干货系列(四)超链接和列表

1.链接a a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ----------...

超链接的样式设置(html+css+jsp)

1:html       超链接的样式                              td     {      font-size:9pt;    ...

CSS中用背景图片做为超链接的方法

Web2.0时代,在网页设计中用背景图片做为超链接已成为主流,通过CSS的控制,使鼠标移到图片上能有很好的变换效果,虽然用普通的插入图片的方法也能实现效果,但用CSS更为方便,再配合css sprit...
  • keyunq
  • keyunq
  • 2012-05-14 21:57
  • 4762

html--演示颜色——超链接,背景图片

演示颜色——超链接,背景图片 --> 开头 跳到中部 跳到底部 很多文字很多文字很多 文字很多文字很多文字 湖南城院 百度 横向合并单元格 姓名和年龄 ...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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