CSS =款式和顏色
造型與HTML CSS
CSS表示層疊樣式表
造型可以添加到HTML元素有3種方式：
- 在線-使用HTML元素的樣式屬性
- 內部-使用<style>在HTML 元素 <head>節
- 外部-使用一個或多個外部CSS文件
添加造型最常見的方式，是保持風格在不同的CSS文件。 但是，在本教程中，我們使用內部的造型，因為它更容易證明，並更容易為你自己嘗試一下。
您可以了解更多關於CSS在我們的CSS教程 。
內聯樣式(Inline CSS)
內聯樣式是用來獨特的風格適用於單個的HTML元素：
內聯樣式使用style屬性。
本實施例中改變了的文本顏色<h1>元素為藍色：
內部樣式(Internal CSS)
內部造型被用來定義一個HTML頁面的樣式。
內部造型在定義<head> HTML頁面的區段，內<style>元素：
例
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 試一試» 外部造型(External CSS)
外部樣式表被用來定義樣式多頁。
隨著外部樣式表 ，您可以通過更改一個文件來改變整個網站的外觀！
要使用一個外部的樣式表，在添加到它的鏈接<head> HTML頁的部分：
例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 試一試» 外部樣式表可以用任何文本編輯器。 該文件不應包含任何HTML標記。 樣式表文件必須保存為.css擴展。
這裡是“如何styles.css ”樣子：
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS字體
CSS的color屬性定義了用於HTML元素的文本顏色。
的CSS font-family屬性定義要用於HTML元素的字體。
CSS的font-size屬性定義要用於HTML元素的文本大小。
例
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 試一試» CSS框模型
每一個HTML元素周圍有一個框，即使你看不到它。
CSS的border屬性定義圍繞HTML元素可見的邊框：
該CSS padding屬性定義的填充(space)的邊界內：
CSS的margin屬性定義的餘量(space)境外：
以上使用實施例的CSS px以像素為單位來定義的大小。
該id屬性
上述所有使用CSS的例子風格的一般方式的HTML元素。
要定義一個特殊元素的特殊風格，首先一個id屬性添加到元素：
<p id="p01">I am different</p>然後定義為與特定元素設置樣式id ：
在class屬性
要定義一種特殊類型的樣式( class )的元素，添加一個class屬性的元素：
<p class="error">I am different</p>現在，您可以定義不同的樣式與特定類的元素：
使用id ，以解決single元素。 使用class來處理groups元素。
章節總結
- 使用HTML style的聯樣式屬性
- 使用HTML <style>元素來定義內部CSS
- 使用HTML <link>元素來引用外部CSS文件
- 使用HTML <head>元素來存儲<style>和<link>元素
- 使用CSS color文本顏色屬性
- 使用CSS font-family為文本字體屬性
- 使用CSS font-size屬性的文本大小
- 使用CSS border的可見元素邊框屬性
- 使用CSS padding屬性空間的邊界內的
- 使用CSS margin財產太空境外
測試自己與練習！
HTML樣式標記
| 標籤 | 描述 |
|---|---|
| <style> | 定義樣式信息的HTML文檔 |
| <link> | 定義文檔與外部資源之間的聯繫 |