当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > CSS语法手册(三)文本填充,边框,边界和位置属性(一)

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

HTML/XHTML教程 中的 CSS语法手册(三)文本填充,边框,边界和位置属性(一)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 107 ::
收藏到网摘: n/a

一、框填充属性

1、padding-bottom
padding-left
padding-top
padding-right

功能:毎个容器都有边框,这些属性设置边框与框內元素间的距离。
数值
长度 - 设置相对或绝对值。在数字后指定度量单位如下:mm, cm, in, pt, px, pc, ex, em。em 和 ex 设置产生相对于父字体的字体尺寸。
百分比 - 以父元素的百分比设置边框。
说明:填充值不能使用负值,但可以是小数。
例子

2、padding

功能:是个简写属性,用于设置上,下,左,右各个方向边框和内容元素的间距。
数值:同前。
说明:用单一值可以让毎边等距填充;如果用两个值,则第一个值用于上下填充,第二个值用于左右填充;如果用三个值,则赋于上边填充,左右填充和下边填充;如果用四个值,则分别用于上,右,下,左填充。可以混合数值类型。
例子

二、框边框属性

1、border-top
border-bottom
border-right
border-left

功能:这四个属性都是简写属性,分别设置上,下,右,左的边框属性。缺省情况下,边框没有样式设置。
数值:共有三个边框属性
border-width: 取值为 thin, medium, thick或指定长度。
border-style: 设置用于修饰边框的底纹。可以设置下列样式:none, dotted,doshed, solid, double, groove, ridge, inset, outset。
border-color: 设置边框颜色。
例子

2、border-top-width
border-bottom-width
border-right=width
border-left-width

功能:分别设置各个边框的厚度。
数值
thin - 细边框。
medium - 中等线宽。
thick - 粗线。
长度 - 用相对或绝对单位设置边框宽度。
例子

3、border-width

功能:简写属性,可同时设置四个边框的宽度。
数值
thin - 细边框。
medium - 中等线宽。
thick - 粗线。
长度 - 用相对或绝对单位设置边框宽度。
说明:见 padding 说明。
例子

边框属性

4、border-color

功能:简写属性,设置四个边框的颜色值。
数值:可以用颜色名或RGB值。如果指定单个颜色,则四个边框都显示为这个颜色;如果指定两个颜色,则顺序为上下,左右;如果指定三种颜色,则顺序为上,左右,下;如果指定四种颜色,则顺序为上,右,下,左。
说明:颜色名如下
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
对于RGB值,可用三种方法指定
#rrggbb; rgb(r,g,b); rgb(r%,g%,b%)
例子

边框颜色

5、border-style

功能:用于显示边框和指定边框样式。
数值
none - 不显示边框,为缺省值
dotted - 点线
dashed - 虛线
solid - 实线
double - 双线
groove - 3D陷入线
ridge - 3D山脊狀线
inset - 使页面有沉入感
outset - 使页面有浮出感
说明:并非所有浏览器都能显示ridge, inset, outset 之类的样式,有些浏览器将所有边框都绘制成实线。