- 浏览: 534022 次
- 性别:
- 来自: 大连
文章分类
- 全部博客 (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 1315试读提供 ... -
《大数据挑战与NoSQL数据库技术》 试读
2013-06-28 14:26 1262虽然一直知 ... -
《Scrum实战——敏捷软件项目管理与开发》试读
2013-05-29 16:03 1421浏览一下本书 ... -
《Android 4 高级编程(第3版)》试读
2013-05-14 11:21 1593之前读过一本 ... -
《云计算:大数据时代的系统工程》 试读
2013-01-25 10:01 32云计算是一个听起来很科幻的词,似乎云这种自然 ... -
《深入分析Java Web技术内幕》 试读
2013-01-24 09:44 31Java是一种 ... -
《项目中的.NET》试读
2012-11-12 15:56 1163SSO是Single Sign-On的缩写,即单点登录。 ... -
初探Android开发
2012-10-15 14:51 819大多数朋友用的3G手机都是基于Windows,IOS和 ... -
《代码阅读》 ——“Jolt大奖精选丛书”有奖征文
2012-08-31 16:28 1349不得不说这本书中提到 ... -
《面向对象分析与设计》 ——“Jolt大奖精选丛书”有奖征文
2012-08-31 14:48 926除了面向对象OO,还有面向过程和面向方面(切面)AO。 它们 ... -
《编写有效用例》 ——“Jolt大奖精选丛书”有奖征文
2012-08-31 10:57 947作者将测试用例分为业务用例和系统用例, 其实我认为这只是测试的 ... -
《灾难拯救:让软件项目重回轨道》 ——“Jolt大奖精选丛书”有奖征文
2012-08-30 15:19 1038软件项目管理知识(可 ... -
《持续集成:软件质量改进和风险降低之道》 ——“Jolt大奖精选丛书”有奖征文
2012-08-14 17:02 991包括单元测试、组件测 ... -
《代码质量》 ——“Jolt大奖精选丛书”有奖征文
2012-08-10 14:50 1083代码的质量决定着软件的质量,软件的质量体现于客户体验,客户虽然 ... -
试读《Unity 3D游戏开发》
2012-08-10 14:22 11361.GUI与GUILayout的区别。 ... -
试读《Node.js开发指南》
2012-08-10 14:02 13971.Node .js是什么? Node.js是一 ... -
鉴赏《敏捷武士:看敏捷高手交付卓越软件》
2012-08-09 17:07 13461.敏捷开发中的三条简 ... -
试读《人人都是产品经理version1.1》
2012-07-19 14:29 988不是每个人都能以产品经理为业,但在我看来,产品经理是一类人,他 ... -
试读《未雨绸缪:理解软件配置管理(第2版)》
2012-07-19 11:46 1205对于我们这些做软件开发的人来说,配置管理似乎是知道的,但要是自 ...
相关推荐
"精彩绝伦CSS随书源代码"显然是一本关于CSS技术的书籍所附带的实践示例代码,这些代码实例通常用于辅助读者理解和应用书中讲解的CSS概念。 通过这个压缩包,我们可以期待获得一系列的CSS实践案例,每个案例可能对应...
精彩绝伦的CSS 详细讲述css的内容 对入门的同学很有帮助 精彩绝伦的CSS 详细讲述css的内容 对入门的同学很有帮助
《精彩绝伦的CSS》这本书深入探讨了CSS(层叠样式表)这一强大的网页设计工具。CSS是网页设计的核心技术之一,它允许我们控制网页的布局、颜色、字体、间距等视觉元素,使得网页设计既美观又具有良好的用户体验。...
综上所述,“精彩绝伦的CSS PDF版本下载”不仅提供了一个学习CSS的好机会,还涵盖了CSS的基本概念、重要性和实际应用等方面的知识。对于网页开发者来说,熟练掌握CSS是必不可少的技能之一,能够极大地提升网站的质量...
介绍css布局、标签等,pdf版很清楚,值得一看
学习 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+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...
学习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学习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,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+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 学习...