欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

css入门教程(二)常用属性:背景属性,表格属性,文本属性

二、文本属性

属性 描述
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>
css入门教程(二)常用属性:背景属性,表格属性,文本属性

三、表格属性

属性 描述

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>
css入门教程(二)常用属性:背景属性,表格属性,文本属性