CSS，樣式選擇器
一、CSS
CSS（層疊樣式表）使用來美化頁面用的，CSS主要有元素內連，頁面嵌入和外部引用三種使用方式；
1.元素內聯，直接將樣式寫入元素的style屬性中，適用於樣式沒有可復用性的場合。
<body> <input type="text" Readonly="readonly" style="background-color:#FF00FF"/> </body>
2.頁面嵌入，在head頭部進行嵌入
<head> <style type="text/css"> input{border-color:Yellow;color:Red;} </style> </head>
結果：表示頁面中所有的input都采用指定的樣式。適用於樣式復用，減小頁面的面積
3.外部引用，首先建立CSS文件，將要要寫的CSS樣式添加到該文件中。在head頭部進行引用。適用於多頁面共享CSS。
CSS文件，文件名為S1.css
textarea{background:Yellow}
對上面的CSS文件進行引用；
<head> <link type="text/css" rel="Stylesheet" href="S1.css"/> </head>
二、樣式選擇器
對於非元素內聯的樣式需要定義樣式選擇器，通俗的說就是這個樣式適合哪些元素，樣式選擇器有：標簽選擇器，class選擇器，id選擇器，關聯選擇器，組合選擇器，偽選擇器
1.標簽選擇器
對於指定標簽采用統一的標簽；
<head> <style type="text/css"> input{border-color:Yellow;color:Red} </style> </head>
2.class選擇器
以定義一個命名的樣式，然后在用它的時候設定元素的class屬性為樣式，還可以同時設定多個class，名稱之間加空格。
<head> <style type="text/css"> .warning{background:Yellow} .highlight{font-size:xx-large;cursor:help;} </style> </head>
其中.waringhe .highlight是給元素定義了名稱，這個名稱不作用於任何元素，除非引用它。
對該樣式進行引用；
<body> <table><tr><td class="highlight">aaa</td> <td class="warning">bbb</td> <td class="warning highlight">ccc</td> </tr> </table> </body>
標簽+class選擇器：
class選擇器也可以針對不同的標簽，實現同樣的樣式名對於不同標簽有不同的形式，只要在前面加上標簽名稱即可。
<head> <style type="text/css"> input.accountno{text-align:right;color:Red} label.accountno{font-style:italic;} </style> </head>
3.id選擇器：為指定的id的元素設定樣式。代碼如下：
<head> <style type="text/css"> #UserName{font-size:xx-large;} </style> </head>
在body中對該樣式進行使用：
<body> <input id="UserName" type="text" value="aaa"/> </body>
id叫做UserName的元素的樣式是{font-size：xx-large;}
4、更多選擇器
（1）、關聯選擇器（必須是相互關聯之下的樣式才可以有變化）
代碼如下：
<head> <style type="text/css"> p strong{background-color:Yellow;} </style> </head>
上面代碼的意思就是p標簽和strong標簽相關的內容使用的樣式（也就是表示p標簽中的strong標簽內的內容使用的樣式）
<body> <strong>aaaaaaa</strong> <p><strong>bbbbbbb</strong></p> </body>
我們看到上面的代碼中僅有<strong>標簽的字體沒有任何變化，而<p><strong>中的字體可以使用上面的css樣式
(2)、組合選擇器：同時為多個標簽設定同一個樣式；
<head> <style type="text/css"> H1,H2,input{background-color:Green;} </style> <head>
上面的代碼是將h1,h2,input的樣式都設置成為{background-color:Green},當我們使用這三個標簽的時候有同樣的樣式顯現；
代碼如下：
<body> <h1>aaaa</h1> <input type="text" value="text"/> </body>
(3)、偽選擇器：為標簽的不同狀態設定不同的樣式：如：A：visited 超鏈接點擊過的樣式；A:active超鏈接被選中的樣式;A:link：超鏈接已被訪問時的狀態
A:hover:鼠標移到超鏈接時的樣式
現在我們來用這些樣式給超鏈接設置樣式；把這些樣式放在CSS文件中，因為這些樣式都是基本固定的只要你使用超鏈接的時候就把這些樣式引入即可；
代碼如下：
A：visited { text-decoration:none } A:active { text-decoration:none } A:link { text-decoration:none } A:hover { text-decoration:underline }
在html頁面中對該樣式進行引用即可；
<head> <link type="text/css" rel="Stylsheet" href="link.css"> </head>
下面我們來創建連超鏈接：
<body> <a href="HTMLpage1.html">測試</a> </body>