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中:
- 內(nèi)聯(lián)樣式- 在HTML元素中使用"style"屬性
- 內(nèi)部樣式表 -在HTML文檔頭部 區(qū)域使用元素來包含CSS
- 外部引用 - 使用外部 CSS文件
最好的方式是通過外部引用CSS文件
內(nèi)聯(lián)樣式
當特殊的樣式需要應用到個別元素時，就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 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>元素可用于對大的內(nèi)容塊設置樣式屬性。
<div>元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用<table>元素進行文檔布局不是表格的正確用法。<table>元素的作用是顯示表格化的數(shù)據(jù)。
HTML<span> 元素
HTML<span>元素是內(nèi)聯(lián)元素，可用作文本的容器
<span>元素也沒有特定的含義。
當與 CSS 一同使用時，<span>元素可用于為部分文本設置樣式屬性。
