第一章入門篇偽類偽物件
阿新 • • 發佈：2018-11-05
1.偽類
偽類用來指定HTML元素某個狀態下的樣式，格式 選擇符：偽類{屬性：屬性值}
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>偽類</title> <style type ="text/css" > a:link{ text-decoration:none;font-size:50px;/*連結預設狀態下的樣式*/ } a:visited{ color:RedView Code;/*連結訪問過後的樣式*/} a:hover{ text-decoration:underline; color:Silver;/*滑鼠放在連結上時的樣式*/} a:active{ color:Maroon;/*點選連結時的樣式*/} /*設定a偽類的順序必須按照上面的順序書寫，否則可能無效*/ input:hover{ background-color:#F00;/*滑鼠放在輸入框時改變背景色*/} </style> </head> <body> <form id="form1" runat="server"> <div> <a href="#">偽類</a>可以用來指定選擇符在某種狀態下的樣式,用來增加互動效果而不必使用過多的JavaScript！ <br /> <input type ="text" /> </div> </form> </body> </html>
2.偽物件
偽物件是在在指定的HTML元素之外加上額外的資訊，格式： 選擇符：偽物件{屬性：屬性值}
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>偽物件</title> <style type ="text/css" > p:before{ content:"雙十一"; font-weight:bold; } p:after{ content:"，準備好剁手了嗎？"; color:Red;} </style> </head> <body> <form id="form1" runat="server"> <div> <b>偽物件可在HTML元素的前面或後面加上額外的資訊！</b> <p>快到了</p> </div> </form> </body> </html>View Code