css基础教程属性篇之二
作者:Jorux 来源:jorux.com 发布时间:2008-07-25 19:23:00
阅读上一篇:css基础教程属性篇
本篇主要介绍css对边框(border)的属性控制和链接(link)的伪类选择器.
边框(border): css控制的边框属性包括border-width, border-color, border-style.
Border之所以让人很困惑主要源于IE5错综复杂的BUG, 由于IE5是一个“will soon be dead” 的浏览器, 这里只例举一个最为知名的关于border-width的BUG, 让大家更好的理解border的含义, 先看下图:
如上图所示, 对象A(白色矩形)周围有蓝色边框B, 可以看出A的实际宽度为ef, 而IE5不这么认为, 它把cd的长度定义为对象A的宽度, 这个bug在边框的宽度小时几乎察觉不到, 但在边框与对象宽度相差不大时显得尤为明显.
现在, 结合以上说明, 可以看出border是独立于对象之外, 位于magin与padding之间(后说明), 具有固定宽度, 颜色和样式的区域.
1. border-width: 其可有具体数值(如1px, 2px等)或是描述性(thin, medium, thick)的属性值. 由于浏览器及个人设置的不同导致thin, medium, thick这些属性值的表现不一, 不推荐使用. css代码如下:
border-width: 1px;
border-width: 2px;
border-width: thin;
border-width: medium;
border-width: thick;
宽度效果如下(注意不同浏览器下的区别):
1px 2px thin medium thick
2. border-style: 边框样式包括solid, dashed, dotted, double, groove, ridge, inset, outset等, 代码如下:
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
样式效果如下(你可能需要Firefox或是Opera才能看到后四种效果):
solid
dashed
dotted
double
groove
ridge
inset
outset
3. border-color: 边框颜色属性和一般颜色属性是一样的, 可以参看属性篇(1).
Summary: 以上例举的都是四边相同样式的情况, 其实可以分别设置border-top, border-right, border-bottom, border-left四边的属性, 比方说想要表现一个宽2px, 蓝色(blue), 样式为solid的上下边框, 代码如下:
border-top-width: 2px;
border-top-color: blue;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom-style: solid;
简写为:
border-top: blue 2px solid;
border-bottom: blue 2px solid;
表现如下:
宽2px,蓝色,样式为solid的边框
猜你喜欢
- 一个很简单的画像素画的小工具,有意思的地方在于可以把画的图案保存成数组,以方便之后快速还原出原图..<!DOCTYPE html PU
- 如果要得到返回值,需要用Command的方法。 首先说明,返回值有两种。一种是在存储过程中直接return一个值,就象C和VB的函数返回值那
- ASP编写完整的一个IP所在地搜索类的修正文稿修正了查询方法,查询的方法和追捕的一致;只是追捕会自动更正IP。还有个函数的书写错误,也已经修
- 问:怎样解决MySQL 5.0.16的乱码问题?答:MySQL 5.0.16的乱码问题可以用下面的方法解决:1.设置phpMyAdminLa
- 利用空闲几天把《JavaScript权威指南》安静的读了一篇。真是一本好书呀!呵呵,这句话见的太多了。好在什么地方呢?听我慢慢道来。从开始接
- sysdate+(5/24/60/60) 在系统时间基础上延迟5秒 sysdate+5/24/60 在系统时间基础上延迟5分钟 sysdat
- 有时候很多朋友访问自己的asp或php等程序页面时出现一些错误,就是页面无法显示也没有详细的错误信息,就算iis中开启了显示详细的错误也不能
- 写了网址规范化后,尚奇公司的柳先生建议再深入讨论一下301转向/重定向。下面就谈谈我所了解的301转向在搜索引擎优化方面的应用。什么是301
- 我设了个排卖的起始时间然后设了一个结束时间现在要精确到小时比如提示 “离到期时间:1天XX小时”大家有什么想法吗?我就是在小时总是不能实现,
- 前言:1、上几次讨论右键禁止等问题的时候,有网友问那里有键值表KeyCode,我今天写了一个javascript,以飨各位有需要者。2、适用
- Introduction简介So what is POSH? No, it's not just some new clothing
- 上个月,我写了一篇关于微软如何在向jQuery贡献代码的文章,也谈到了在第一批贡献的代码中的一些功能:jQuery模板和数据链接支持.今天,
- 如何在寸土寸金的首页上使页面的价值最大化,是每个网站设计者最关心的话题。用户关注的页面长度、宽度都是有限的。宽度自不必说,一般网站都会根据自
- 作为一位不懂代码的业余网页制 * 好者,常常羡慕专业程序人员在浏览器中编制出的效果超酷的一些多媒体作品。唉,无奈程序那东东,酶涩南学,非一日之
- 以前看到 andy的关于“Quiet Structure”觉的很不错,于是今天到她的个人站点上逛逛,发现不少好的文章,今天介绍的是
- 其中 offset and fetch 最重要的新特性是 用来 分页,既然要分析 分页,就肯定要和之前的分页方式来比较了,特别是 Row_N
- 在实际的应用中,Access做应用程序时,经常会做成"数据"和"程序"两个数据库,"数据&
- 当管理SQL Server内在的帐户和密码时,我们很容易认为这一切都相当的安全。毕竟,你的SQL Server系统被保护在防火墙里,而且还有
- 使用css2.1实现多重背景、多重边框效果在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种
- 关于建立索引的几个准则:1、合理的建立索引能够加速数据读取效率,不合理的建立索引反而会拖慢数据库的响应速度。2、索引越多,更新数据的速度越慢