- 浏览: 532874 次
- 性别:
- 来自: 大连
文章分类
- 全部博客 (240)
- Java (25)
- Flex (46)
- Sybase (26)
- Sqlserver (7)
- .NET (1)
- .NET-Silverlight (11)
- Hibernate (5)
- Korn-shell (2)
- Perl (5)
- Unix & Linux (11)
- Ruby (3)
- SVN (2)
- Tomcat (1)
- CSS (5)
- Web (2)
- English (3)
- SQL (9)
- Qlikview (4)
- Spring (7)
- javascript (2)
- weblogic (5)
- iphone (1)
- 网络 (5)
- 随 (23)
- AutoSys (1)
- Hermes (2)
- RPM (2)
- CA (1)
- Operating System (1)
- SSIS (3)
- Windows (2)
- excel (1)
- SSRS (1)
- 活动 (23)
- Eclipse (2)
- Angular (0)
- Python (0)
- AWS (0)
- Android (0)
最新评论
-
devcang:
long t1 = System.nanoTime();
java中取得微秒级的时间 -
Sev7en_jun:
Sev7en_jun 写道 ExternalInterface ...
flex"页面跳转" -
Sev7en_jun:
ExternalInterface.call("fu ...
flex"页面跳转" -
lujinan858:
Incorrect syntax near 'fddActiv ...
Sybase alter 用法 -
Sev7en_jun:
Alter table TestItem drop COLUM ...
Sybase alter 用法
1.省略简写属性值的关键词时会发生什么?
当省略了部分简写属性值的时候,缺失的部分就会使用该属性的默认值。
2.如何使用颜色控制边框外观?
我们知道在CSS中边框的使用是非常重要的,我们这里就介绍一下CSS的边框属性(
border)如何使用。边框是围绕在内容和内边距之间的一条或多条线。内容的内边距和外间距之间的间隙是留给边框的,CSS可以用边框属性来定义它的样
式、颜色和宽度等。 在Html中人们用表格来制作文本周围的边框,但通过CSS来设置边框将有更出色的效果,而且可以应用于所有的元素。
边框分为上边框、右边框、下边框、左边框。
每个边框有3个方面:样式(或外观)、颜色、以及其宽度(粗细),下面我们分别重点解释这三项。
边框样式(border-style)
设置元素所有边框的样式,或者单独地为各边设置边框样式。它有10个属性值,分别是:
- none: 无样式;
- hidden: 同样是无样式,主要用于解决和表格的边框冲突;
- dotted: 点划线;
- dashed: 虚线;
- solid: 实线;
- double: 双线,两条线加上中间的空白等于border-width的取值;
- groove: 槽状;
- ridge: 脊状,和groove相反;
- inset: 凹陷;
- outset:凸出,和inset相反;
其中groove、ridge、inset、outset有些像3D效果,它的效果受border-color的影响。
border-style作用在四个方向时所用的方法和前面曾讲过的padding属性的书写方法相同,如果它书写四个参数值,将按照上-右-下-左
的顺序定义边框。如果只设置一个,将用于四个边框统一设置。如果设置两个值,第一个作用于上下,第二个则作用与左右。如果设置三个值,第一个作用于上边框,第二个作用于左右边框,第三个作用于下边框。
边框颜色(border-color)
这个属性用来定义所有边框颜色,或者为四个边分别设置颜色。它可以取颜色的值或被设置为透明(transparent)。示例:
.colorful {border-style:solid;border-color:gray;}
border-color属性值的个数与其所对应方向的边框效果的设置方法和border-style的设置方法相同,可参照border-style属性学习理解。
需要注意的是在border-color前最好先设置border-style,否则border-color可能会不显示。
边框宽度(border-width)
border-width可定义四个边框的宽度,即边框的粗细程度,它有四个可选属性值:
- medium (是缺省值,通常大约是2像素)
- thin(比medium细)
- thick(比medium粗)
- 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者相对长度单位 (em, ex, px)。
border-width属性值设置的个数与所对应方向产生的效果和border-style、border-color的设置方法相同,可参照border-style、border-color属性学习理解。
边框(border)
border是一个综合性写法,它设置的是四个边框的宽度、样式和颜色,不能对某一个边框单独设置。它的格式:
border: border-width border-style border-color;
示例:
.bk01 {border:3px solid #FF0000;}
单边边框的设置方法
除了以上介绍的几种属性,还有几种属性可以单独定义各方向的边框。下面对它们进行分类介绍。
设定上边框属性:
border-top,它的设置格式和border相同,依次设置宽度、样式、颜色:
border-top: border-width border-style border-color;
border-
top是将宽度、样式、颜色三种属性值放在一起设置的属性,如果要单独设置其中的任意一项也可以使用以下属性:border-top-width(单独设
置上边框宽度)、border-style(单独设置上边框样式)、border-color(单独设置上边框颜色)。
示例:
#sbk01 {
border-top-width:1px;
border-top-style:dashed;
border-top-color:#FF0000;
}
/*设置上边框为宽度1像素的红色虚线*/}
以上的效果如果用border-top来设置的话更简单一些,代码如下:
#sbk01 {
border-top:1px dashed #FF0000; }
设定右边框属性:
border-right,border-right-width,border-right-style,border-right-color,设置方法同border-top。
设定下边框属性:
border-bottom,
border-bottom-width,
border-bottom-style,
border-bottom-color,设置方法同border-top。
设定左边框属性:
border-left,border-left-width,border-left-style,border-left-color,设置方法同border-top。
发表评论
-
试读《3D打印:三维智能数字化创造》-超出我的想象
2014-04-14 10:41 11923D打印就在我们身边啊,刚刚看到一则新闻—— ... -
试读《了不起的Node.js 将JavaScript进行到底》
2013-12-09 15:43 1311试读提供 ... -
《大数据挑战与NoSQL数据库技术》 试读
2013-06-28 14:26 1260虽然一直知 ... -
《Scrum实战——敏捷软件项目管理与开发》试读
2013-05-29 16:03 1420浏览一下本书 ... -
《Android 4 高级编程(第3版)》试读
2013-05-14 11:21 1592之前读过一本 ... -
《云计算:大数据时代的系统工程》 试读
2013-01-25 10:01 32云计算是一个听起来很科幻的词,似乎云这种自然 ... -
《深入分析Java Web技术内幕》 试读
2013-01-24 09:44 31Java是一种 ... -
《项目中的.NET》试读
2012-11-12 15:56 1160SSO是Single Sign-On的缩写,即单点登录。 ... -
初探Android开发
2012-10-15 14:51 815大多数朋友用的3G手机都是基于Windows,IOS和 ... -
《代码阅读》 ——“Jolt大奖精选丛书”有奖征文
2012-08-31 16:28 1344不得不说这本书中提到 ... -
《面向对象分析与设计》 ——“Jolt大奖精选丛书”有奖征文
2012-08-31 14:48 924除了面向对象OO,还有面向过程和面向方面(切面)AO。 它们 ... -
《编写有效用例》 ——“Jolt大奖精选丛书”有奖征文
2012-08-31 10:57 944作者将测试用例分为业务用例和系统用例, 其实我认为这只是测试的 ... -
《灾难拯救:让软件项目重回轨道》 ——“Jolt大奖精选丛书”有奖征文
2012-08-30 15:19 1032软件项目管理知识(可 ... -
《持续集成:软件质量改进和风险降低之道》 ——“Jolt大奖精选丛书”有奖征文
2012-08-14 17:02 987包括单元测试、组件测 ... -
《代码质量》 ——“Jolt大奖精选丛书”有奖征文
2012-08-10 14:50 1078代码的质量决定着软件的质量,软件的质量体现于客户体验,客户虽然 ... -
试读《Unity 3D游戏开发》
2012-08-10 14:22 11301.GUI与GUILayout的区别。 ... -
试读《Node.js开发指南》
2012-08-10 14:02 13921.Node .js是什么? Node.js是一 ... -
鉴赏《敏捷武士:看敏捷高手交付卓越软件》
2012-08-09 17:07 13411.敏捷开发中的三条简 ... -
试读《人人都是产品经理version1.1》
2012-07-19 14:29 986不是每个人都能以产品经理为业,但在我看来,产品经理是一类人,他 ... -
试读《未雨绸缪:理解软件配置管理(第2版)》
2012-07-19 11:46 1202对于我们这些做软件开发的人来说,配置管理似乎是知道的,但要是自 ...
相关推荐
精彩绝伦的css,适合中高级学者。ISBN 978-7-115-28479-2 精彩绝伦的CSS_13038327_北京市:人民邮电出版社_2012.07_(美)迈耶著_Pg226.pdf
综上所述,“精彩绝伦的CSS PDF版本下载”不仅提供了一个学习CSS的好机会,还涵盖了CSS的基本概念、重要性和实际应用等方面的知识。对于网页开发者来说,熟练掌握CSS是必不可少的技能之一,能够极大地提升网站的质量...
精彩绝伦的CSS. 最新 最全
介绍css布局、标签等,pdf版很清楚,值得一看
### 精彩绝伦的CSS:Professional Techniques for Modern Layout #### 书籍概述 《精彩绝伦的CSS:Professional Techniques for Modern Layout》是一本由CSS领域著名专家Eric A. Meyer撰写的著作,该书深入浅出地...
学习html+css学习html+css学习html+css学习html+css 学习html+css学习html+css学习html+css学习html+css 学习html+css学习html+css学习html+css学习html+css 学习html+css学习html+css学习html+css学习html+css 学习...
学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习...
学习HTML、CSS学习HTML、CSS学习HTML、CSS学习HTML、CSS 学习HTML、CSS学习HTML、CSS学习HTML、CSS学习HTML、CSS 学习HTML、CSS学习HTML、CSS学习HTML、CSS学习HTML、CSS 学习HTML、CSS学习HTML、CSS学习HTML、CSS...
学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 ...
学习HTML和css,主要是css学习HTML和css,主要是css学习HTML和css,主要是css 学习HTML和css,主要是css学习HTML和css,主要是css学习HTML和css,主要是css 学习HTML和css,主要是css学习HTML和css,主要是css学习...
学习html+css+js学习html+css+js学习html+css+js学习html+css+js 学习html+css+js学习html+css+js学习html+css+js学习html+css+js 学习html+css+js学习html+css+js学习html+css+js学习html+css+js 学习html+css+js...
学习html、css以及js学习html、css以及js学习html、css以及js 学习html、css以及js学习html、css以及js学习html、css以及js 学习html、css以及js学习html、css以及js学习html、css以及js 学习html、css以及js学习...
学习html和css的代码学习html和css的代码学习html和css的代码 学习html和css的代码学习html和css的代码学习html和css的代码 学习html和css的代码学习html和css的代码学习html和css的代码 学习html和css的代码学习...
学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html...
学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习...
学习HTML与CSS相关知识学习HTML与CSS相关知识学习HTML与CSS相关知识 学习HTML与CSS相关知识学习HTML与CSS相关知识学习HTML与CSS相关知识 学习HTML与CSS相关知识学习HTML与CSS相关知识学习HTML与CSS相关知识 学习HTML...
学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML...
学习 html,css,javascript学习 html,css,javascript学习 html,css,javascript 学习 html,css,javascript学习 html,css,javascript学习 html,css,javascript 学习 html,css,javascript学习 html,css,javascript学习 ...