精通CSS+DIV:用CSS设置页面和浏览器的元素

一、超链接
1,动态超链接
a:link {
  color: #005799;
  text-decoration: none;
}
a:visited {
  color: #000000;
  text-decoration: none;
}
a:hover {
  color: #FFFF00;
  text0decoration: underline;
}

2,按钮式超链接
a:link, a:visited {
  color: #A62020;
  padding: 4px 10px 4px 10px;
  background-color: #ecd8db;
  text-decoration: none;
  border-top: 1px solid #EEEEEE;
  border-left: 1px solid #EEEEEE;
  border-bottom: 1px solid #717171;
  border-right: 1px solid #717171;
}

a:hover {
  color: #821818;
  padding: 5px 8px 3px 12px;
  background-color: #e2c4c9;
  border-top: 1px solid #717171;
  border-left: 1px solid #717171;
  border-bottom: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
}

3,浮雕式超链接
table.links {
  background:url(button1_bg.jpg) repeat-x;
  font-size: 12px;
  width: 100%;
}
a {
  width: 80px;
  height: 32px;
  text-decoration: none;
  text-align: center;
  background:url(button1.jpg) no-repeat;
}
a:link, a:visited { color: #654300; }
a:hover {
  color: #FFFFFF;
  text-decoration: none;
  background:url(button2.jpg) no-repeat;
}

FireFox下显示效果不是很理想,因为FireFox不支持直接设置a标签的高度和宽度,可以采用ul和li
二、鼠标
1,鼠标箭头
body {
  cursor: pointer;
}
auto
crosshair
default
e-resize
ne-resize
n-resize
w-resize
nw-resize
se-resize
s-resize
sw-resize
col-resize
row-resize
help
move
all-scroll
no-drop
progress
vertical-text
text
wait
hand
not-allowed

2,鼠标变幻的超链接
a.help:hover {
  cursor: help;
}

三、页面滚动条
body {
  scrollbar-base-color: #FF0000;
  scrollbar-3dlight-color: #B0C4DE;
  scrollbar-highlight-color: #FFFFFF;
  scrollbar-shadow-color: #5380BA;
  scrollbar-darkshadow-color: #1D4272;
  scrollbar-arrow-color: #34547E;
  scrollbar-face-color: #CFDFF4;
}

该效果仅支持IE

你可能感兴趣的:(css,浏览器,IE,firefox)