`

学习《精彩绝伦的CSS》

 
阅读更多

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。

分享到:
评论

相关推荐

    精彩绝伦CSS2

    我们知道在CSS中边框的使用是非常重要的,我们这里就介绍一下CSS的边框属性( border)如何使用。边框是围绕在内容和内边距之间的一条或多条线。内容的内边距和外间距之间的间隙是留给边框的,CSS可以用边框属性来定义...

    精彩绝伦CSS随书源代码

    精彩绝伦CSS书本的随书源代码,里面的例子还不错呢

    精彩绝伦的CSS

    精彩绝伦的css,适合中高级学者。ISBN 978-7-115-28479-2 精彩绝伦的CSS_13038327_北京市:人民邮电出版社_2012.07_(美)迈耶著_Pg226.pdf

    精彩绝伦的CSS.

    精彩绝伦的CSS 详细讲述css的内容 对入门的同学很有帮助 精彩绝伦的CSS 详细讲述css的内容 对入门的同学很有帮助

    精彩绝伦的CSS PDF版本下载.txt

    精彩绝伦的CSS PDF版本下载

    精彩绝伦的CSS(Smashing CSS: Professional Techniques for Modern Layout)

    精彩绝伦的CSS 英文原版pdf CSS专家Eric A. Meyer新作 全面解说CSS现代技巧和最佳实践 Smashing杂志专业策划 本书是国际知名CSS 大师写就的实用教程,分为3 部分。第一部分介绍了CSS 基础知识,对一些常用工具和...

    精彩绝伦的CSS. 最新 最全

    精彩绝伦的CSS. 最新 最全

    精彩绝伦的css

    介绍css布局、标签等,pdf版很清楚,值得一看

    学习html+css.zip

    学习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.zip

    学习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.zip

    学习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.zip

    学习 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.zip

    学习HTML和css,主要是css学习HTML和css,主要是css学习HTML和css,主要是css 学习HTML和css,主要是css学习HTML和css,主要是css学习HTML和css,主要是css 学习HTML和css,主要是css学习HTML和css,主要是css学习...

    CSS学习笔记CSS学习笔记

    CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记

    学习html+css+js.zip

    学习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.zip

    学习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的代码.zip

    学习html和css的代码学习html和css的代码学习html和css的代码 学习html和css的代码学习html和css的代码学习html和css的代码 学习html和css的代码学习html和css的代码学习html和css的代码 学习html和css的代码学习...

Global site tag (gtag.js) - Google Analytics