我爱自学网 > HTML/CSS > HTML 教程 > HTML 教程 > HTML CSS样式 访问量:

HTML CSS样式

<上一篇:HTML 头部<head> 下一篇:HTML 图像 >
HTML 样式- CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

在线实例:

实例1:HTML使用样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
 
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
 
</html>
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

实例2:本例演示如何使用样式属性做一个没有下划线的链接。
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
 
<a href="http://www.5azixuewang.com" style="text-decoration:none;">访问 5azixuewang.com</a>
 
</body>
</html>
如何使用 style 属性制作一个没有下划线的链接。

实例3:链接到一个外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
 
<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>
 
</html>
本例演示如何 标签链接到一个外部样式表。

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:
  •     内联样式- 在HTML元素中使用"style" 属性
  •     内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  •     外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.

在本站的HTML教程中我们使用了内联CSS样式来介绍实例,这是为了简化的例子,也使得你能更容易在线编辑代码并在线运行实例。

你可以通过本站的 CSS 教程 学习更多的 CSS 知识。

内联样式

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

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

学习更多样式,请访问 CSS 教程

HTML样式实例 - 背景颜色

背景色属性(background-color)定义一个元素的背景颜色:

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
早期背景色属性(background-color)是使用 bgcolor 属性定义。

HTML 样式实例 - 字体, 字体颜色 ,字体大小

我们可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:

<body style="background-color:yellow;"> 
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body>

现在通常使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义文本样式,而不是使用<font>标签。

HTML 样式实例 - 文本对齐方式

使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:

<body style="background-color:yellow;"> 

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

</body>

文本对齐属性 text-align取代了旧标签 <center> 。

内部样式表

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

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

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

HTML实例

实例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
 
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
 
</html>
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

实例2
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
</head>
<body>
 
<a href="//5azixuewang.com/" style="text-decoration:none;">访问 5azixuewang.com!</a>
 
</body>
</html>
如何使用 style 属性制作一个没有下划线的链接。

实例3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我爱自学网—5azixuewang.com</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
 
<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>
 
</html>
本例演示如何 标签链接到一个外部样式表。

HTML 样式标签

标签 描述
<style> 定义文本样式
<link> 定义资源引用地址

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

<上一篇:HTML 头部<head> 下一篇:HTML 图像 >
本章内容:
1. HTML 简介
2. HTML 编辑器
3. HTML 基础
4. HTML 元素
5. HTML 属性
6. HTML 标题
7. HTML 段落
8. HTML 文本格式化
9. HTML 链接
10. HTML 头部<head>
11. HTML CSS样式
12. HTML 图像
13. HTML 表格
14. HTML 列表
15. HTML 区块
16. HTML 布局
17. HTML 表单
18. HTML 框架
19. HTML 颜色
20. HTML 颜色名
21. HTML 颜色值
22. HTML 脚本
23. HTML 字符实体
24. HTML URL
25. HTML 速查列表
26. HTML 总结
27. HTML - XHTML
28. HTML 多媒体
29. HTML 插件
30. HTML 音频
31. HTML 视频