`

学习《精彩绝伦的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。

分享到:
评论

相关推荐

    精彩绝伦的CSS

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

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

    综上所述,“精彩绝伦的CSS PDF版本下载”不仅提供了一个学习CSS的好机会,还涵盖了CSS的基本概念、重要性和实际应用等方面的知识。对于网页开发者来说,熟练掌握CSS是必不可少的技能之一,能够极大地提升网站的质量...

    精彩绝伦的CSS. 最新 最全

    精彩绝伦的CSS. 最新 最全

    精彩绝伦的css

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

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

    ### 精彩绝伦的CSS:Professional Techniques for Modern Layout #### 书籍概述 《精彩绝伦的CSS:Professional Techniques for Modern Layout》是一本由CSS领域著名专家Eric A. Meyer撰写的著作,该书深入浅出地...

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

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

    学习html和css的练习.zip

    学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html...

    学习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相关知识.zip

    学习HTML与CSS相关知识学习HTML与CSS相关知识学习HTML与CSS相关知识 学习HTML与CSS相关知识学习HTML与CSS相关知识学习HTML与CSS相关知识 学习HTML与CSS相关知识学习HTML与CSS相关知识学习HTML与CSS相关知识 学习HTML...

    学习HTML、CSS阶段练习.zip

    学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML...

    学习 html,css,javascript.zip

    学习 html,css,javascript学习 html,css,javascript学习 html,css,javascript 学习 html,css,javascript学习 html,css,javascript学习 html,css,javascript 学习 html,css,javascript学习 html,css,javascript学习 ...

Global site tag (gtag.js) - Google Analytics