一、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>