HTML 样式

通过使用 HTML4.0,所有格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。

先来看一个例子,代码如下:

<head>

  <style type="text/css">

   h1 {color: red}

   p {color: blue}

  </style>

</head>

 

<body>

 <h1>header 1</h1>

 <p>A paragraph.</p>

</body>

页面上显示为:

header 1

A paragraph.

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

外部样式表 link

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

link : 定义资源引用

rel : 告诉浏览器引用的是一个样式表文件

type : 文件类型

href : 文件地址

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">

    body {background-color: red}

    p {margin-left: 20px}

</style>

</head>

style : 定义样式定义

 

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

优先级说明

(外部样式)External style sheet < (内部样式)Internal style sheet < (内联样式)In

HTML 表格

表格由 <table> 标签来定义。

每个表格均有若干行(由 <tr> 标签定义)。

每行被分割为若干单元格(由 <td> 标签定义)。

字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

如下代码:

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table> 

页面上显示为:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

注释:border是表格的边框属性,如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table> 

页面上显示为:

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

表格中的空单元格

在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td></td>

<td>row 2, cell 2</td>

</tr>

</table> 

注意:这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td> </td>

<td>row 2, cell 2</td>

</tr>

</table> 

浏览器中显示如下:

row 1, cell 1 row 1, cell 2

 

row 2, cell 2

caption 元素定义表格标题

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<table border="3">

<caption>我的标题</caption>

<tr>

<td>100</td>

 <td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table> 

浏览器中显示如下:

我的标题

100 200 300

400 500 600

跨行或跨列

colspan和rowspan这两个属性用于创建特殊的表格。

1、colspan用来指定单元格横向跨越的列数。

横跨两列的单元格:

<table border="1">

<tr align="center">

<td>姓名</td>

<td colspan="2">电话</td>

</tr>

<tr>

<td>Bill</td>

<td>400 123</td>

 <td>500 123</td>

</tr>

</table> 

浏览器中显示如下:

姓名 电话

Bill 400 123 500 123

2、rowspan的作用是指定单元格纵向跨越的行数。

横跨两列的单元格:

<table border="1">

<tr align="center">

<td rowspan="2">姓名 </td>

<td>Mika</td>

</tr>

<tr>

<td>Bill</td>

</tr>

</table> 

浏览器中显示如下:

姓名 Mika

Bill

 

练习题

1.下列方法表示调用外部样式表的是?()

A、<style type="text/css">h1 {color: red }</style>

B、<link rel="stylesheet" type="text/css" href="css/style.css">

C、<p style="color: red; margin-left: 20px">style</p>

 

2.下面三种方法可以起到改变文档样式的是?()

A、<style type="text/css">h1 {color: red }</style>

B、<link rel="stylesheet" type="text/css" href="css/style.css">

C、<p style="color: red; margin-left: 20px"></p>

D、以上三种都可以

 

 

3.如果下面三个都对<h1>添加了颜色的样式,文档中的h1将会是哪个设定的颜色值()

A、<style type="text/css">h1 {color: red }</style>

B、<link rel="stylesheet" type="text/css" href="css/style.css">

C、<h1 style="color: blue;">style</h1>

 

 

4.html语言中,设置围绕表格的边框的宽度的标记是?()

A、<table border=#>

B、<table cellspacing=#>

C、<table cellpadding=#>

D、<table width=60%>

 

2.表格标记的基本结构是?()

A、<tr></tr>

B、<br></br>

C、<table></table>

D、<bg></bg>

 

 

3.设置表格的边框为0的HTML代码是?()

A、<table cellspacing =0>

B、<table height=0>

C、<table border=0>

D、<table cellpadding =0>

 

 

4.设置表格的单元格间距为0的HTML代码是?()

A、<table cellspacing =0>

B、<table height=0>

C、<table border=0>

D、<table cellpadding =0>

最后修改于 2019-01-01 15:37:44
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇