标签：
1.1 字体属性
常用的字体属性如表所示：
| 属性 | 属性值 | 描述 |
| font-size | n（单位px），如36px | 设置字体大小 |
| font-family | 如宋体··· | 设置字体类型 |
| font-weight | normal | 设置字体正常 |
| lighter | 设置字体加细 | |
| bold | 设置字体加粗 | |
| bolder | 设置字体更粗 | |
| font-style | normal | 设置字体正常 |
| italic | 设置字体为斜体 | |
| oblique | 与italic效果一样 |
【示例】CSS字体属性应用
<html>
<head>
<meta charset="utf-8">
<title>CSS字体属性示例</title>
<style type="text/css">
table{
font-family: verdana,geneva,sans-serif;
font-size: 36px;
font-style: normal;
font-weight: bold;
}
</style>
</head>
<body>
字体属性
<table width="1254" border="1">
<tr>
<td width="144">常用字体属性</td>
<td width="244">woaini</td>
</tr>
</table>
</body>
</html>
1.2 文本属性
常用的文本属性如表所示：
| 文本属性 | 属性值 | 描述 |
| text-indent | n（单位 pt） | 设置文字的首行缩进 |
| line-height | n（单位 pt） | 定义行间距 |
| letter-spacing | n（单位 px） | 定义字符间距 |
| text-decoration | underline | 下划线 |
| overline | 上划线 | |
| line-through | 删除线 | |
| none | 无任何修饰 | |
| text-align | left | 左对齐 |
| center | 居中对齐 | |
| right | 右对齐 | |
| justify | 两端对齐 |
【示例】CSS文本属性应用
<html>
<head>
<meta charset="utf-8">
<title>w文本属性示例</title>
<style type="text/css">
table{
text-align: left;
text-indent: 25pt;
text-decoration: underline;
line-height: 20pt;
letter-spacing: 1px;
}
</style>
</head>
<body>
<p>常用文本属性</p>
<table width="254" border="1">
<tr>
<td width="244">常用文体属性博客园是面向开发者的知识分享社区，不允许发布任何推广、广告、政治方面的内容。博客园首页（即网站首页）只能发布原创的、高质量的、能让读者从中学到东西的内容。如果博文质量不符合首页要求，会被工作人员移出首页，望理解。如有疑问，请联系contact@cnblogs.com。</td>
</tr>
</table>
</body>
</html>
1.3 列表属性
常用的列表属性如表所示：
| 属性 | 属性值 | 描述 |
| list-style-image | 选择图像作为列表项的引导符号 | |
| list-style-position | outside | 列表贴近左侧边框显示 |
| inside | 列表缩进显示 | |
| list-style-type（设定引导列表项目的符号类型） | disc | 在列表项前添加“●”实心圆点 |
| circle | 在列表项前添加“○”空心圆点 | |
| square | 在列表项前添加“▆”实心方体 | |
| decimal | 在列表项前添加普通的阿拉伯数字 | |
| lower-roman | 在列表项前添加小写的罗马数字 | |
| upper-roman | 在列表项前添加大写的罗马数字 | |
| lower-alpha | 在列表项前添加小写的英文字母 | |
| upper-alpha | 在列表项前添加大写的英文字母 | |
| none | 在列表项前不添加任何的项目符号或编号 |
【示例】CSS列表属性应用
<html>
<head>
<meta charset="utf-8">
<title>列表属性示例</title>
<style type="text/css">
ul li{
list-style-type: decimal;
}
</style>
</head>
<body>
<p>列表属性</p>
<ul>
<li>常用</li>
<li>列表</li>
<li>属性</li>
</ul>
</body>
</html>
1.4 颜色和背景属性
颜色和背景属性如表所示：
| 属性 | 属性值 | 描述 |
| color | 设置颜色 | |
| background-color | 设定一个元素的背景颜色 | |
| background-image | 设定一个元素的背景图像 | |
| background-repeat | repeat-x | 设置图像横向重复 |
| repeat-y | 设置图像纵向重复 | |
| repeat | 设置图像横向及纵向重复 | |
| no-repeat | 设置图像不重复 | |
| background-position | left | 背景图像左放置 |
| right | 背景图像右放置 | |
| center | 背景图像居中放置 | |
| top | 背景图像向上对齐 | |
| bottom | 背景图像向下对齐 |
【示例】CSS颜色和背景属性应用
<html>
<head>
<meta charset="utf-8">
<title>CSS颜色和背景属性示例</title>
<style type="text/css">
h1{
background: red;
}
body{
background-image: url(img/glyphicons-halflings.png);
/*background-repeat: no-repeat;*/
background-color: blue;
background-position: left;
}
</style>
</head>
<body>
<h1>颜色和背景属性</h1>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/jacinthcc/p/4685584.html
