仓酷云

标题: 来一发css对边框的属性把持和链接的伪类挑选器 [打印本页]

作者: 若天明 时间: 2015-1-16 00:10
标题: 来一发css对边框的属性把持和链接的伪类挑选器
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
原文：http://jorux.com/archives/property-3-if-you-love-css/
本篇次要先容css对边框(border)的属性把持和链接(link)的伪类选择器.
边框(border):css把持的边框属性包含border-width,border-color,border-style.
Border之以是让人很狐疑次要源于IE5扑朔迷离的BUG,因为IE5是一个“willsoonbedead”的扫瞄器,这里只例举一个最为出名的关于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;
宽度效果以下(注重分歧扫瞄器下的区分):
1px2pxthinmediumthick
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:blue2pxsolid;
border-bottom:blue2pxsolid;
体现以下:
宽2px,蓝色,款式为solid的边框

以下内容不再属于css属性,但临时回进属性篇中.
链接(link):在html里用<a></a>标明链接,在css里用a作为链接的选择器名.
css的弱点和它的长处一样分明,其最年夜的缺点就在于网页的静态体现不敷,在这一点上和Flash差异尤其凸起.
幸亏css仍是留了一手,那就是链接的伪类选择器,所谓伪类就是指依附于扫瞄器或是用户的形态.关于链接来说,存在link,hover,visited,active四种形态,即四种伪类选择器:a:link(存在链接,但无鼠标举措),a:visited(被点击或会见过),a:hover(鼠标悬停于链接上时的形态),a:active(鼠标点击与开释之间的形态).
css即是以这几个伪类选择器完成了其为数未几的静态效果.今朝最为经常使用的就是导航条和按钮的静态显现.以下用一个静态按钮的实例来讲明这四个伪类选择器.
1.起首筹办一副图片(button.png),以下图(160px*240px),其由四幅160px*60px的小图自上而下分列而成.

2.接着必要往你的当地调试文件夹(调试情况的创建办法参考属性(1)中的申明)的index.htm中写进html代码,以下:
<divid=”button”><ahref=”#”></a></div>
3.在style.css中写进以下代码:
body{background-color:#FFF;}
#buttona{
width:160px;
height:60px;
display:block;
background:url(../image/button.png)no-repeat00;
}
#buttona:link{background-position:00;}
#buttona:hover{background-position:0-60px;}
#buttona:active{background-position:0-120px;}
#buttona:visited{background-position:0-180px;}
能够看到如Example2的效果.
4.代码注释:
<divid=”button”><ahref=”#”></a></div>
在index.htm写进如上代码,目标在于拔出一个id名为”button”的盒子(div),且其内含有一个链接<ahref=”#”></a>.
#buttona{
width:160px;
height:60px;
display:block;
background:url(../image/button.png)no-repeat00;
}
在css文件中写进以上代码,目标在于把持盒子中链接的体现,经由过程名为”#buttona”的选择器来完成.链接的宽高为160px*60px,背景为图片button.png.
在这夸大一下display:block的感化.因为在html文件中,链接<ahref=”#”></a>中没有任何的内容(content)添补,假如没有声明”display:block”,那末即便声了然选择器”#buttona”的宽高,扫瞄器也会由于html文件中没有内容而没法显现链接.以是”display:block”在这里的感化就在于强迫扫瞄器显现没有内容添补的链接.
#buttona:link{background-position:00;}
用伪类选择器a:link声明链接的背景图片在左上角显现,即间隔右边和顶边分离0,0.但因为已在选择器“#buttona”中声了然图片地位,此代码无关紧要.
#buttona:hover{background-position:0-60px;}
#buttona:active{background-position:0-120px;}
#buttona:visited{background-position:0-180px;}
用伪类选择器a:hover声明鼠标悬停时,背景图片上移60px,而使排在第二位的绿色小图片显现出来;
用伪类选择器a:active声明在鼠标点击与开释之间的形态时,背景图片上移120px,而使排在第三位的白色小图片显现;
用伪类选择器a:visited声明在链接被点击或会见过期,背景图片上移180px,而使排在第四位的灰色小图片显现;
如今你基础懂得了css静态按钮的制造历程,但以上css代码还存在一个严峻的缺点,信任你会很快发明成绩地点——这个按钮竟然是一个”一次性按钮“,也就是说这个按钮在点击第一次后,就一向显现谁人灰色小图片,你能想出办理办法吗?请在留言中指出.
谜底会鄙人一篇文章中申明!下篇将会触及css的中心内容——盒子模子,margin和padding属性.(注释完)

符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

作者: 深爱那片海 时间: 2015-1-18 05:30
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: admin 时间: 2015-1-22 20:46
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 灵魂腐蚀 时间: 2015-1-31 14:24
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 只想知道 时间: 2015-2-6 20:14
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 简单生活 时间: 2015-3-6 08:16
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 小魔女 时间: 2015-3-13 00:02
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 爱飞 时间: 2015-3-20 06:51
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

欢迎光临仓酷云 (http://ckuyun.com/)