1.CSS 可以通過以下方式添加到 HTML 中：
- 行內樣式 -- 在 HTML 元素中使用 "style" 屬性
- 內部樣式表 -- 在 HTML 檔案頭部 <head> 區域使用 <style> 元素來包含 CSS
- 外部參考 -- 使用外部 CSS 檔案
- 最好的方式是通過外部參考 CSS 檔案
2.行內樣式（內鏈式引入寫法）
- 在標簽中加入 style 屬性，style 就是 css 樣式代碼
- 當特殊的樣式需要應用到個別元素時，就可以使用行內樣式
- 使用行內樣式的方法是在相關的標簽中使用樣式屬性，樣式屬性可以包含任何 CSS 屬性
<body> <h4 style="color: blue;background-color: #FFFF00;">This is h4 heading</h4> <p style="color: red;text-align: center;">這是一個段落 這是一個段落</p> <i><font size="10" color="#0000FF">這是一個段落 這是一個段落<font></i> </body>
3.內部樣式表（嵌入式引入寫法）
- 當單個檔案需要特別樣式時，就可以使用內部樣式表，你可以在 <head> 部分通過 <style> 標簽定義內部樣式表，
- 示例中的 <style type="text/css"> 表示這是樣式表，在中間放入 css 內容，type 是它的型別屬性，text/css 是它的值， 它們是告訴瀏覽器這里面的文本內容（text）要當層疊樣式表（css）來決議，不能當作其它的來決議，
- 示例中要區分定義不同的 p 標簽的文本內容 style，則須再每個標簽中增加 class/id 屬性，再通過如圖中的 class/id 屬性進行區分定義（.代表class，#代表id）
- 重要：使用類 class 選擇器，放棄 ID 選擇器，因為 ID 在一個頁面中的唯一性導致了如果以 ID 為選擇器來寫 css，就無法重用，而 class 而優勢在于復用性，而且私有度也并不高，因此，我們一般情況下在 CSS 里只用 class，一個 ID 也不用，這樣做實際上也是將表現和行為分開，而不是混在一起，
<head> <meta charset="utf-8"> <title>標題</title> <style type="text/css"> p { color: yellow; text-align: center; } </style> </head> <body> <p id="p1_id" class="p1_class">這是第一個段落</p> <p id="p2_id" class="p2_class">這是第二個段落</p> <p id="p3_id" class="p3_class">這是第三個段落</p> <p id="p4_id" class="p4_class">這是第四個段落</p> </body>
<head> <meta charset="utf-8"> <title>標題</title> <style type="text/css"> .p1_class {color: blue;font-size: 30px;background: #FFFF00;} .p2_class {color: red;font-size: 20px;} #p3_id {color: #008000;} /* 不建議使用 */ </style> </head> <body> <p id="p1_id" class="p1_class">這是第一個段落</p> <p id="p2_id" class="p2_class">這是第二個段落</p> <p id="p3_id" class="p3_class">這是第三個段落</p> <p id="p4_id" class="p4_class">這是第四個段落</p> </body>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>標題</title> <style type="text/css"> /* 后代選則器用法 */ p em{color: red;} /* 需要注意的是，后代選擇器所選擇的后代元素包括任意嵌套層次的后代，而且一般后代選擇器中包含的選擇器最多三層 */ .p2_class:hover {color: blue;} /* 放置滑鼠到元素上,元素顏色才會變成此處定義的顏色 */ </style> </head> <body> <p id="p1_id" class="p1_class"> <em>這是第一個段落</em> </p1> <p id="p2_id" class="p2_class">這是第二個段落</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>標題</title> <style type="text/css"> /* 組合選則器用法 */ p,em,a{color: red;} </style> </head> <body> <em>這是第一個段落</em> <p id="p2_id" class="p2_class">這是第二個段落</p> <a href="https://www.baidu.com" target="_blank">這是一個百度鏈接</a> </body> </html>
4.外部樣式表（外部式引入寫法）
- 當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇，使用外部樣式表，你就可以通過更改一個檔案來改變整個站點的外觀，
- 步驟如下：
- 在 css 檔案中寫樣式，并且在樣式前通過 class 提取器或標簽名稱指定 html 檔案中的標簽
- 在 html 檔案中鏈接 css 檔案中的樣式，連接方法：在 html 檔案中 <head></head> 標簽之內寫入如下 <link> 標簽內容
- 使用語法：<link href="https://www.cnblogs.com/ZhengYing0813/p/style.css" rel="stylesheet" type="text/css" />
- href="" 內部的就為 css 檔案的地址一般以英文命名，比如 mystyle.css 或者 style.css 等等
- rel="stylesheet" type="text/css" 這是 w3c 的標準，固定寫法不可修改，
- <link> 標簽位置一般寫在 <head></head> 標簽之內，因為瀏覽器決議是從上往下來的，如果 css 放在底部的話，瀏覽器決議完 html 頁面，而 css 還沒有加載，就會出現頁面混亂，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>標題</title> <link href="new_file.css" rel="stylesheet" type="text/css" /> </head> <body> <p id="p1_id" class="p1_class">這是第一個段落</p> <p id="p2_id" class="p2_class">這是第二個段落</p> <p id="p3_id" class="p3_class">這是第三個段落</p> <p id="p4_id" class="p4_class">這是第四個段落</p> </body> </html>
/* new_file.css */ .p1_class {color: blue;font-size: 30px;background: #FFFF00;} .p2_class {color: red;font-size: 20px;} #p3_id {color: #008000;}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/51685.html
標籤：Html/Css