CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
HTML样式-CSS.png
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML样式-CSS</title>
</head>
<body>
<div style="opacity:0.5;position:absolute;left:80px;width:300px;height:150px; background-color:#ff0000"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #0000ff;">
<div style="opacity:0.3;position:absolute;left:280px;width:200px;height:150px;background-color:#00ff00"></div>
<h3>CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式</h3>
<div style="color:#40B3DF;">字体颜色设置</div>
<span style="background-color:#B4009E;color:#ffffff;">字体背景颜色和前景色设置</span>
<div style="letter-spacing:50px;">字体间距设置</div>
</div>
</body>
</html>
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的。CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style"属性
- 内部样式表 -在HTML文档头部 区域使用元素来包含CSS
- 外部引用 - 使用外部 CSS文件
最好的方式是通过外部引用CSS文件
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p stype="color:red;background-color:yellow;margin-left:20px;">设置字体背景颜色和前景颜色并缩进</p>
<p style="font-family:arial;color:red;font-size:20px;">使用 font-family / color / font-size 属性来定义字体的样式</p>
<p style="text-align:center;">设置文本对齐方式</p>
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML<div>元素
HTML<div>元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
HTML<span> 元素
HTML<span>元素是内联元素，可用作文本的容器
<span>元素也没有特定的含义。
当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。
