CSS边框以及常用样式

一、CSS边框

作用：设置标签周围的边框，需要使用border属性。

<html>
<head>
<style type="text/css">
table,th,td
{
border:1px solid blue;
}
</style>
</head>

<body>
<table>
<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>

注意：上例中的表格具有双线条边框。这是因为table、th以及td元素都具有独立的边框。

如果需要把表格显示为单线条边框，使用border-collapse属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table
  {
  border-collapse:collapse;
  }

table, td, th
  {
  border:1px solid black;
  }
</style>
</head>

<body>
<table>
<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>
<p><b>注释：</b>如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误。</p>
</body>
</html>

 

二 表格宽度和高度。

下面的例子将表格宽度设置为100%，同时将th元素的告诉设置为50px

<html>
<head>
<style type="text/css">
table,td,th
  {
  border:1px solid black;

  }

table
  {
  width:100%;
  }

th
  {
  height:50px;
  }
</style>
</head>

<body>
<table>
<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>

 

三、表格文本对齐

text-align和vertical-align属性设置表格中文本的对齐方式。

test-align属性设置水平对齐方式，比如左对齐，右对齐或者居中：

<html>
<head>
<style type="text/css">
table,td,th
{
border:1px solid black;
}
td
{
text-align:right; #也可以为left或center
}
</style>
</head>

<body>
<table>
<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>

 

vertical-align属性设置垂直对齐方式，比如顶部对齐、底部对齐或者居中对齐：

<html>
<head>
<style type="text/css">
table, td, th
  {
  border:1px solid black;
  }

td
  {
  height:50px;
  vertical-align:bottom;
  }
</style>
</head>

<body>
<table>
<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>

 

四 表格内边距

如需控制表格中内容与边框的距离，请为td和th 元素设置padding属性：

<html>
<head>
<style type="text/css">
table, td, th
  {
  border:2px solid black;
  }

td
  {
  padding:20px;
  }
</style>
</head>

<body>
<table>
<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>

 

五、表格颜色

设置边框的颜色以及th元素的文本和背景颜色：

<html>
<head>
<style type="text/css">
table, td, th
  {
  border:1px solid red;
  }
th
  {
  background-color:green;
  color:white;
  }
</style>
</head>

<body>
<table>
<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>

 

六、字体大小

作用：设置标签内的字体大小，使用方法：font-size：字体大小，示例：font-size:20px

<html>
<head>
<style type="text/css">
h1 {font-size: 2px}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

 

posted @ 2018-06-19 17:57  会开车的好厨师  阅读(236)  评论(0)    收藏  举报