属性篇(3)—If you love 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的上下边框

以下内容不再属于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代码, 如下:

3. 在style.css中写入以下代码:

body {background-color: #FFF;}
#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
#button a:link { background-position:0 0;}
#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}

可以看到如Example2的效果.

4. 代码解释:

在index.htm写入如上代码, 目的在于插入一个id名为”button”的盒子(div),且其内含有一个链接<a href=”#”></a>.

#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}

在css文件中写入以上代码, 目的在于控制盒子中链接的表现, 通过名为”#button a”的选择器来实现. 链接的宽高为160px*60px, 背景为图片button.png.

在这强调一下display:block的作用. 由于在html文件中,链接<a href=”#”> </a>中没有任何的内容(content)填充, 如果没有声明”display:block”, 那么即使声明了选择器”#button a”的宽高, 浏览器也会因为html文件中没有内容而无法显示链接. 所以”display:block”在这里的作用就在于强制浏览器显示没有内容填充的链接.

#button a:link { background-position:0 0;}

用伪类选择器a:link声明链接的背景图片在左上角显示, 即距离左边和顶边分别0, 0. 但由于已经在选择器 “#button a”中声明了图片位置, 此代码可有可无.

#button a:hover { background-position:0 -60px;}
#button a:active { background-position:0 -120px;}
#button a:visited { background-position:0 -180px;}

用伪类选择器a:hover声明鼠标悬停时, 背景图片上移60px, 而使排在第二位的绿色小图片显示出来;

用伪类选择器a:active声明在鼠标点击与释放之间的状态时, 背景图片上移120px, 而使排在第三位的红色小图片显示;

用伪类选择器a:visited声明在链接被点击或访问过时, 背景图片上移180px, 而使排在第四位的灰色小图片显示;

现在你基本了解了css动态按钮的制作过程, 但以上css代码还存在一个严重的缺陷, 相信你会很快发现问题所在——这个按钮居然是一个”一次性按钮“, 也就是说这个按钮在点击第一次后, 就一直显示那个灰色小图片, 你能想出解决方法吗? 请在留言中指出.

答案会在下一篇文章中说明! 下篇将会涉及css的核心内容——盒子模型, margin和padding属性.(正文完)

属性篇(3)—If you love css …相关推荐

新手福音！最全面的易懂CSS总结，一篇博文让你了解CSS，动一动小手收藏吧
前言这是我学习了这个网站整理的笔记这是我的博客首页:https://blog.csdn.net/weixin_46654114?t=1 博客名:RodmaChen 如果写的不对的地方请告诉我,谢谢 ...
【面试篇】前端点滴（css/css3）
[面试篇]前端点滴(CSS/CSS3)---倾尽所有面试小问答 css基础 css盒模型 css选择器 BFC css(float) css(position/z-index) css(displa ...
VBS进阶-Wscript.Shell讲解之Environment属性篇
Wscript.Shell讲解之Environment属性篇如何创建一个Wscript.Shell对象 ' 创建一个Wscript.Shell对象 Set WshShell=Wscript.Crea ...
Jquery - 添加属性、添加class、添加Css
Jquery - 添加属性.添加class.添加Css 一.设置属性: 方式一 jQuery 代码: $("img").attr({ src: "test.jpg&qu ...
CSS 属性篇(七)：Display属性
一.display属性介绍 display 属性规定元素应该生成的框的类型. 以下是一些关于display比较常用的属性值: 值描述 none 元素不会显示 block 此元素将显示为块级元素,此元 ...
CSS 属性篇(四)：Flex弹性盒子
一.Flex介绍 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局: .box{disp ...
博客属性10个非常不错的CSS技巧
这几周个人几篇文章介绍了改博客属性的文章. 关联文章的地址在这里,妙巧的运用CSS的技能,可以让你不必修改HTML能就失掉很好的博客或者模板表面.我收集了一些非常用有的CSS技能让我们计设博客时更炫 ...
html页边距为负值,css中的padding属性可以为负值吗？css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧首先我们介绍的是第一个问题 ...
css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
css滤镜属性渐变 Officially, gradients can't yet be animated. However, using CSS filters, you can animate t ...
后端码农谈前端（CSS篇）第一课：CSS概述
一.从扮演浏览器开始扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可 ...

属性篇(3)—If you love css …

属性篇(3)—If you love css …相关推荐

最新文章

热门文章