css入门教程（二）常用属性：背景属性，表格属性，文本属性
程序员文章站
2022-04-29 12:27:51
...
一、css背景属性
| 属性 | 描述 |
|---|---|
background |
简写属性，作用是将背景属性设置在一个声明中。 |
background-attachment |
背景图像是否固定或者随着页面的其余部分滚动。 |
background-color |
设置元素的背景颜色。 |
background-image |
把图像设置为背景。 |
background-position |
设置背景图像的起始位置。 |
background-repeat |
设置背景图像是否及如何重复。 |
<head>
<style type="text/css">
body
{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%;
}
</style>
</head>
<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p>
</body>二、文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| line-height | 设置行高。 |
| letter-spacing | 设置字符间距。 |
| text-align | 对齐元素中的文本。 |
| text-decoration | 向文本添加修饰。 |
| text-indent | 缩进元素中文本的首行。 |
| text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 设置文本方向。 |
| white-space | 设置元素中空白的处理方式。 |
| word-spacing | 设置字间距。 |
<!DOCTYPE html>
<html lang="en-US">
<head>
<style type="text/css">
body {color:red}
h1 {color:#00ff00;text-align: center;text-decoration: overline;text-transform: uppercase}
h4 {letter-spacing: 20px;text-decoration:blink}
h2 {text-decoration: line-through}
h3 {text-align: right;text-decoration: underline}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
p.spread {word-spacing: 30px;}</style>
</head>
<body>
<h1>Demoh1</h1>
<h2>Demoh2</h2>
<h3>Demoh3</h3>
<h4>Demoh4</h4>
<p class="uppercase">p.upper</p>
<p class="spread">p.spread</p>
<br>
</body>
</html>三、表格属性
| 属性 | 描述 |
|---|---|
border-collapse |
设置是否把表格边框合并为单一的边框。 |
border-spacing |
设置分隔单元格边框的距离。 |
caption-side |
设置表格标题的位置。 |
empty-cells |
设置是否显示表格中的空单元格。 |
table-layout |
设置显示单元、行和列的算法。 |
<html>
<head>
<style type="text/css">
table{
border-collapse:collapse; caption-side:bottom;}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<table><caption>name</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
</body>
</html>