CSS：基本語法及派生選擇器
阿新 • • 發佈：2018-12-26
本文介紹css基本語法及派生選擇器。
程式碼整理自w3school：http://www.w3school.com.cn
(一)基礎部分：
效果圖：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <head> <style type="text/css"> h1,h2,h3 {color:red;background-color:#ccc} li strong {font-style:italic;} </style> </head> <title>CSS基礎</title> <body> <h1>h1,h2,h3 級標題為CSS樣式指定為灰底紅字<h1> <h2>h1,h2,h3 級標題為CSS樣式指定為灰底紅字<h2> <h3>h1,h2,h3 級標題為CSS樣式指定為灰底紅字<h3> <h4>h4級標題沒有被指定樣式<h3> <hr/> <!--派生選擇器--> <h4>派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。</p> <p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p> <ol> <li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li> <li>我是正常的字型。</li> </ol> </body> </html>
（二）樣式的“覆蓋”規則
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <head> <style type="text/css"> strong {color: red;} h2 {color: red;} h2 strong {color: blue;} </style> </head> <title>CSS基礎-樣式的“覆蓋”規則</title> <body> <p>The strongly emphasized word in this paragraph is <strong>red</strong>.</p> <h2>This subhead is also red.</h2> <h2>The strongly emphasized word in this subhead is <strong>blue</strong>.</h2> </body> </html>
效果圖：
