原創教程，轉載請註明出處：網頁教學網
我們現在設計網頁都要使用CSS了，今天在這個教程中給大家以執行個體的形式教給大家如何使用CSS，通過四個例子來說明CSS的使用！通過這個教程中的四個執行個體讓大家理解在HTML中加入CSS之後，CSS在什麼時候起作用？以及不加CSS會如何顯示。激起你學習CSS的興趣。
首先我們先建立一個CSS檔案，開啟我們的記事本，然後輸入下面的內容：
p
{
color: #ff0000;
background: transparent;
}
然後儲存為style1.css(在這個CSS檔案中我們定義p標籤的的風格為紅色、背景透明)
執行個體1：把下列檔案儲存為.htm檔案，注意要和style1.css儲存在同一目錄中。
| 代碼如下 | 複製代碼 |
| <html> <head> <title>網頁教學網執行個體教程1</title> <link href="style1.css" rel="stylesheet" type="text/css" /> <style type="text/css"> p { color:#00ff00; background:transparent; } </style> </head> <body> <p style="color:#0000ff;background:transparent;">蘭色文本顯示 </p> </body> </html> |
|
執行個體2：
| 代碼如下 | 複製代碼 |
| <html> <head> <title>網頁教學網CSS執行個體2</title> <link href="style1.css" rel="stylesheet" type="text/css" /> <style type="text/css"> p { color:#00ff00; background:transparent; } </style> </head> <body> <p>綠色文本顯示</p> </body> </html> |
|
執行個體3：
| 代碼如下 | 複製代碼 |
| <html> <head> <title>網頁教學網CSS執行個體3</title> <link href="style1.css" rel="stylesheet" type="text/css" /> </head> <body> <p>紅色文本顯示</p> </body> </html> |
|
執行個體4：
| 代碼如下 | 複製代碼 |
| <html> <head> <title>網頁教學網CSS執行個體4</title> </head> <body> <p>預設的瀏覽器顯示的文本</p> </body> </html> |
|
通過以上四個執行個體大家理解CSS的定義，在什麼地方起作用等問題。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
