HTML基础总结–CSS样式的框模型(五)

继续接上篇HTML基础总结–CSS定义与应用(四)

常用的样式属性

方框属性

HTML基础总结--CSS样式的框模型(五)

边框样式

边框样式使用border属性,任何元素都具有四个边框,每个边框都可以单独定义粗细,颜色和样式。

HTML基础总结--CSS样式的框模型(五)

属性:

HTML基础总结--CSS样式的框模型(五)

这些属性和四个边框可以组合使用,即:

border-top-style、border-top-color、border-top-width

如:border-top-width:1px;

共形成12种边框属性.

也可以这样使用:

border-top:solid 1px red; //只设置上边框

border:solid red 1px;  //同时设置四个边框

即同时设置粗细、颜色、样式 ,并且不计顺序

内边距样式

内边距样式使用padding属性,它专门定义边框内的内容距边框的间距,也是四个。

HTML基础总结--CSS样式的框模型(五)

外边距样式

外边距样式使用margin属性,它专门定义元素距其他元素的距离,也是四个。

HTML基础总结--CSS样式的框模型(五)

网页颜色模型

网页中的颜色值可以是单词,比如red,black,但很多颜色不好记忆,如紫色的单词。所以网页颜色可以由#开头,后跟6位16进制数构成。如:#FF0000 #AC09DF #00002A

HTML基础总结--CSS样式的框模型(五)

其中R表示红色,G表示绿色,B表示蓝色.这种颜色模型称为RGB模式。

每一位都由0-9,A-F构成,所以一个R分量就有256种,G分量也B分量也有256种,总共能表示256x256x256种颜色。

常用单位

1、表示长度或间距的单位有:

px:像素

mm:毫米

cm:厘米

2、表示字体大小的单位有:

pt::磅,号,比如9号字使用9pt;

em:相对于当前浏览器的字体的倍数,如1.2em;即1.2倍

3、表示时间的单位有:

s:秒

ms:毫秒

1s=1000ms

未完待续...

下篇传送阵:HTML基础总结–CSS样式定位(六)

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

    A+
发布日期:2016年02月22日  所属分类:HTML  Web
标签:

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:4   其中:访客  3   博主  1

  1. avatar 原子荧光光度计 0

    firefox和ie盒模型不同,不知道该怎样兼容。

  2. avatar themebetter 3

    简单明了的学习了

  3. avatar 好文章 4

    一直想好好系统的学习一下、但是一直只停留于口头上。。。

评论加载中...