使用 CSS 的几种方式
- 内联样式 – 在HTML元素中使用”style” 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 – 使用外部 CSS 文件
内联样式
|
1 |
<p style="color:blue;margin-left:20px;">这是一个段落。</p> |
内部样式表
|
1 2 3 4 5 6 |
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> |
常用基础 CSS 属性
（1）可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式 :
|
1 2 |
<h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p> |
（2）使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
|
1 2 |
<h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p> |
已弃用的标签和属性
在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。
不建议使用的标签有: <font>, <center>, <strike>
不建议使用的属性: color 和 bgcolor.
使 <a> 标签链接不带下划线
|
1 |
<a href="http://codermr.com/" style="text-decoration:none;">访问码先生的博客</a> |
在 <p> 标签中添加 <img> 标签
|
1 2 3 4 |
<p> 这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> 这是一些文本。 </p> |
注意:在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。
参：https://www.runoob.com/html/html-images.html
浮动图片
|
1 2 3 4 5 6 7 8 9 |
<p> <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。 </p> <p> <img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。 </p> |
参：https://www.runoob.com/html/html-images.html
图片链接、图片边框
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p> 创建图片链接: <a href="http://www.runoob.com/html/html-tutorial.html"> <img <strong>border="10"</strong> src="smiley.gif" alt="HTML 教程" width="32" height="32"> </a> </p> <p> 无边框的图片链接: <a href="http://www.runoob.com/html/html-tutorial.html"> <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"> </a> </p> |
参：https://www.runoob.com/html/html-images.html
HTML 表格
HTML 表格由 <table> 标签来定义。
HTML 表格是一种用于展示结构化数据的标记语言元素。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。
- tr：tr 是 table row 的缩写，表示表格的一行。
- td：td 是 table data 的缩写，表示表格的数据单元格。
- th：th 是 table header的缩写，表示表格的表头单元格。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<table> <thead> <tr> <th>列标题1</th> <th>列标题2</th> <th>列标题3</th> </tr> </thead> <tbody> <tr> <td>行1，列1</td> <td>行1，列2</td> <td>行1，列3</td> </tr> <tr> <td>行2，列1</td> <td>行2，列2</td> <td>行2，列3</td> </tr> </tbody> </table> |
以上的表格实例代码中，<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。
- <thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为”列标题1″，”列标题2″和”列标题3″。
- <tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
通过使用 <th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。
HTML 表格和边框属性
默认表格不显示边框。使用边框属性 <border> 来显示一个带有边框的表格：
|
1 2 3 4 5 6 |
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> |
更多示例（https://www.runoob.com/html/html-tables.html）：
没有边框的表格
本例演示一个没有边框的表格。
表格中的表头(Heading)
本例演示如何显示表格表头。
带有标题的表格
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本例演示如何在不同的元素内显示元素。
单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
HTML 列表
无序列表
无序列表使用 <ul> 标签，每行使用粗体圆点（典型的小黑圆圈）进行标记。
|
1 2 3 4 |
<ul> <li>Coffee</li> <li>Milk</li> </ul> |
有序列表
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
|
1 2 3 4 |
<ol> <li>Coffee</li> <li>Milk</li> </ol> |
更多示例（https://www.runoob.com/html/html-lists.html）：
不同类型的有序列表
本例演示不同类型的有序列表。
不同类型的无序列表
本例演示不同类型的无序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更复杂的嵌套列表。
自定义列表
本例演示一个定义列表。
