边框内容设置

[设为首页] [加入收藏]

提示：站长书库上线了。站长招聘上人才沃

您当前的位置：首页 > 基础教程 > CSS >

下一篇：class与ID 上一篇：边框设置

边框内容设置

一 padding

padding用来设置边框中的内容，在没有设置padding属性时，放在边框内的元素都是紧贴边框的。

1 padding-top 顶边距
2 padding-bottom 底边距
3 padding-left 左边距
4 padding-right 右边距

上面四个属性的设置和前面的类似，既可以设置绝对值也可以相对，例如。

padding-top:3px;
padding-bottom:5%;

示例5.1

htm5-1.htm

<html> <head> <title>链接外部样式表</title> <style type="text/css"> </style> </head> <body> <h1>外三维线outset,内容与边框设置一点距离</h1> <h2>内三维线inset，内容紧贴边框</h2> <p> </p> </body> </html>

二文本设置

1 text-align 用来设置文本水平对齐的方式

(1)text-align:center;居中
(2)text-align:left;左对齐
(3)text-align:right;右对齐
(4)text-align:inherit;继承

2 text-decoration 用来设置文本的强调方式

(1)text-decoration:none;不指定文本效果
(2)text-decoration:underline;下划线
(3)text-decoration:through;中划线
(4)text-decoration:overline;上划线
(5)text-decoration:blink;文本闪烁
(6)text-decoration:inherit;继承

3 text-indent 用来设置首行缩进

(1)text-indent:3pt;绝对值
(2)text-indent:3%;相对值
(3)text-indent:inherit;继承

4 text-transform 用来设置大小写转换

(1)text-transform:capitalize;首字母大写
(2)text-transform:uppercase;所有字母大写
(3)text-transform:lowercase;全部小写
(4)text-transform:none;不使用大小写转换，为默认
(5)text-transform:inherit;继承

示例5.2

htm5-2.htm

<html> <head> <title>链接外部样式表</title> <style type="text/css"> </style> </head> <body> <h2>床前明月光，疑是地上霜<br> 舉頭望明月，低頭思故鄉 </h2> <p> 千岛湖，是1959年9月新安江水力发电站拦河大坝建成后，截蓄新安江水流而成的巨大水库。据淳安县地名委员会1983年普查结果，水库淹没85座山，形成大小岛屿1078座(按设计水位108米高程，面积2500平方米为极限计算)，故名“千岛湖”。 </p> </body> </html>

三字间距设置

1 word-spacing 用来设置单词之间的距离，仅对英文有效。

(1)word-spacing:normal;正常值
(2)word-spacing:3pt;绝对值
(3)word-spacing:inherit;继承

2 letter-spacing 用来设置字符的间距

(1)letter-spacing:normal;正常值
(2)letter-spacing:3pt;绝对值
(3)letter-spacing:inherit;继承

htm5-3.htm

<html> <head> <title>链接外部样式表</title> <style type="text/css"> </style> </head> <body> <h2>床前明月光，疑是地上霜<br> 舉頭望明月，低頭思故鄉 </h2> <p> 千岛湖，是1959年9月新安江水力发电站拦河大坝建成后，截蓄新安江水流而成的巨大水库。据淳安县地名委员会1983年普查结果，水库淹没85座山，形成大小岛屿1078座(按设计水位108米高程，面积2500平方米为极限计算)，故名“千岛湖”。 </p> </body> </html>

苏ICP备08101582号