第二課：CSS的工作原理是什么？
第二課：CSS的工作原理是什么？
這一課將學習怎樣制作樣式表。你將了解基本的CSS模式，以及將CSS用于HTML文檔必需的代碼。CSS的許多特性與HTML的相似。因此，如果你以前用HTML設計過布局，會發現這些代碼的大多數都認識。下面讓我們觀察一個實例。
基本的CSS句法
假設我們想要一個紅色背景的網頁,用HTML實現的代碼是：
<body bgcolor="#FF0000">
用CSS獲得同樣效果的代碼是：
body {background-color: #FF0000;}
正如你看到的，HTML和CSS有很多不同之處。此外，上面的例子還告訴你什么是基本的CSS模式。
將CSS適用于一個HTML文檔
可以用三種方式將CSS適用于一個HTML文檔。下面會列出所有辦法，但我們建議你專注于第三種方法（即外部）。
方法1：嵌入（In-line）
其中一種將CSS用于HTML的方法是使用HTML的屬性風格。構建上述紅色背景的實例，可以采用如下代碼：
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
方法2：內部（the tag style）
另一個包含CSS代碼的方法是使用HTML標簽（風格）。例如：
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
方法3：外部（External）
建議的做法是鏈接到一個叫做外部樣式表的文件。本教程的所有實例都采用這一方法。外部樣式表僅是一個后綴為.css的文本。與其它文件一樣，可以將樣式表放在Web服務器或硬盤上。例如，如果樣式表的名稱是style.css，并且位于叫做style的文件夾內。這種情況可以舉例如下：
技巧是從HTML文件（default.htm）創建一個到樣式表（style.css）的鏈接。這樣的鏈接可以用下面的HTML代碼做到：
<link rel="stylesheet" type="text/css" href="style/style.css" />
注意樣式表的路徑是用屬性href標示的。代碼必須插入HTML代碼的頭部分，也就是位于和標簽之間。如：
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
…
這個鏈接告訴瀏覽器，在顯示HTML文檔時，它使用CSS文件的布局。這種做法的好處是能讓很多HTML文檔鏈接到同一個樣式表。換句話說，一個CSS文件能控制許多HTML文檔的布局。
這項技術能節省大量時間。例如，假設你想改變一個網站內100多個網頁的背景顏色，樣式表能避免手動更改所有HTML文件。用CSS，只需要更改主樣式表的一個代碼就能在瞬間做出調整。
下面讓我們把學習的知識用于實踐，親自動手做一下。打開文本編輯器，分別創建一個HTML文件和CSS文件，并用下面的內容：
default.htm
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
將兩個文件放在同一個文件夾內。記住，分別用屬性“.htm”和“.css”后綴文件。用瀏覽器打開default.htm，會看到頁面有一個紅色背景。恭喜你，創建了第一個樣式表！接下來我們將學習CSS的一些特性。
版權宣告：
作者：Riley.Chou
連結：https://sh100k.com/%e7%ac%ac%e4%ba%8c%e8%af%be%ef%bc%9acss%e7%9a%84%e5%b7%a5%e4%bd%9c%e5%8e%9f%e7%90%86%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f/
來源：SH100K – 生活百科
文章版權歸作者所有，未經允許請勿轉載。
