（1）.CSS樣式單基本使用
1.引入外部樣式文件：
<link type="text/css" rel="stylesheet" href="CSS樣式文件的URL">
2.導入外部樣式單：
<style type="text/css">
@import "outer.css"
@import url("mycss.css")
</style>
3.使用內部CSS樣式:
<style type="text/css">
樣式單文件定義
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 內部樣式單 </title>
<style type="text/css">
table {
background-color: #003366;
}
td {
background-color: #FFFFFF;
font-family: "楷體_GB2312";
font-size: 20pt;
text-shadow: -8px 6px 2px #333;
}
.title {
font-size: 18px;
color: #60C;
height: 30px;
width: 200px;
border-top: 3px solid #CCCCCC;
border-left: 3px solid #CCCCCC;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
}
</style>
</head>
<body>
<div class="title">
瘋狂Java體系圖書：
</div><hr />
<table>
<tr>
<td>瘋狂Java講義</td><td>輕量級Java EE企業(yè)應用實戰(zhàn)</td>
</tr>
<tr>
<td>瘋狂Android講義</td><td>經典Java EE企業(yè)應用實戰(zhàn)</td>
</tr>
<tr>
<td>瘋狂Ajax講義</td><td>瘋狂XML講義</td>
</tr>
</table>
</body>
</html>
image.png
4.使用內聯(lián)樣式
style="property1:value1;property2:value2;"
（2）CSS選擇器
1.元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 元素選擇器 </title>
<style type="text/css">
/* 定義對div元素起作用的CSS樣式 */
div{
background-color: grey;
font: italic normal bold 14pt normal 楷體_GB2312;
}
/* 定義對p元素起作用的CSS樣式 */
p{
background-color: #444;
color:#fff;
font: normal small-caps bold 20pt normal 宋體;
}
</style>
</head>
<body>
<div>div內的文字</div>
<p>p內的文字</p>
</body>
</html>
元素選擇器
2.屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 屬性選擇器 </title>
<style type="text/css">
/* 對所有div元素都起作用的CSS樣式 */
div {
width:300px;
height:30px;
background-color:#eee;
border:1px solid black;
padding:10px;
}
/* 對有id屬性的div元素起作用的CSS樣式 */
div[id] {
background-color:#aaa;
}
/* 對有id屬性值包含xx的div元素起作用的CSS樣式 */
div[id*=xx] {
background-color:#999;
}
/* 對有id屬性值以xx開頭的div元素起作用的CSS樣式 */
div[id^=xx] {
background-color:#555;
color:#fff;
}
/* 對有id屬性值等于xx的div元素起作用的CSS樣式 */
div[id=xx] {
background-color:#111;
color:#fff;
}
</style>
</head>
<body>
<div>沒有任何屬性的div元素</div>
<div id="a">帶id屬性的div元素</div>
<div id="zzxx">id屬性值包含xx子字符串的div元素</div>
<div id="xxyy">id屬性值以xx開頭的div元素</div>
<div id="xx">id屬性值為xx的div元素</div>
</body>
</html>
屬性選擇器
3.ID選擇器
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>ID選擇器</title>
<style type="text/css">
/* 對所有div元素都起作用的CSS樣式 */
div {
width:200px;
height:30px;
background-color:#ddd;
padding:3px;
}
/* 對id為xx的元素起作用的CSS樣式 */
#xx {
border:2px dotted black;
background-color:#888;
}
</style>
</head>
<body>
<div>沒有任何屬性的div元素</div>
<div id="xx">id屬性值為xx的div元素</div>
</body>
</html>
ID選擇器
4.class選擇器
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>class選擇器測試</title>
<style type="text/css">
/* 對所有class為myclass的元素都起作用的CSS樣式 */
.myclass {
width:240px;
height:40px;
background-color:#dddddd;
}
/* 對class為myclass的div元素起作用的CSS樣式 */
div.myclass {
border:2px dotted black;
background-color:#888888;
}
</style>
</head>
<body>
<div class="myclass">class屬性為myclass的div元素</div>
<p class="myclass">class屬性為myclass的p元素</p>
</body>
</html>
class選擇器
5.包含選擇器
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>包含選擇器測試</title>
<style type="text/css">
/* 對所有的div元素起作用的CSS樣式 */
div {
width:350px;
height:60px;
background-color:#ddd;
margin:5px;
}
/* 對處于div之內、且class屬性為a的元素起作用的CSS樣式*/
div .a {
width:200px;
height:35px;
border:2px dotted black;
background-color:#888;
}
</style>
</head>
<body>
<div>沒有任何屬性的div元素</div>
<div><section><div class="a">處于div之內且class屬性為a的元素</div></section></div>
<p class="a">沒有處于div之內、但class屬性為a的元素</p>
</body>
</html>
包含選擇器
6.子選擇器
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 子選擇器 </title>
<style type="text/css">
/* 對所有的div元素起作用的CSS樣式 */
div {
width:350px;
height:60px;
background-color:#ddd;
margin:5px;
}
/* 對處于div之內、且class屬性為a的元素起作用的CSS樣式*/
div>.a {
width:200px;
height:35px;
border:2px dotted black;
background-color:#888;
}
</style>
</head>
<body>
<div>沒有任何屬性的div元素</div>
<div><p class="a">class屬性為a、且是div子節(jié)點的元素</p></div>
<div><section><p class="a">class屬性為a、且處于div內部的元素</p></section></div>
</body>
</html>
子選擇器
7.兄弟選擇器
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> E~F偽類選擇器 </title>
<style type="text/css">
/* 匹配id為android的元素后面、class屬性為long的兄弟節(jié)點 */
#android ~ .long{
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div>瘋狂Java講義</div>
<div class="long">輕量級Java EE企業(yè)應用實戰(zhàn)</div>
<div id="android">瘋狂Android講義</div>
<p class="long">經典Java EE企業(yè)應用實戰(zhàn)</p>
<div class="long">JavaScript權威指南</div>
</div>
</body>
</html>
兄弟選擇器
8.組合選擇器
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 選擇器組合 </title>
<style type="text/css">
/* div元素、class屬性為a的元素、id為abc的元素都起作用的CSS樣式 */
div,.a,#abc {
width:200px;
height:35px;
border:2px dotted black;
background-color:#888;
}
</style>
</head>
<body>
<div>沒有任何屬性的div元素</div>
<p class="a">class屬性為a的元素</p>
<section id="abc">id為abc的元素</section>
</body>
</html>
組合選擇器
（3）偽元素選擇器
:first-letter
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :first-letter </title>
<style type="text/css">
span {
display:block;
}
/* span元素里第一個字母加粗、變藍
由于span是內聯(lián)元素，因此需要先把span的display設為block
*/
span:first-letter{
color:#f00;
font-size:20pt;
}
/* section元素里第一個字母加粗、變藍 */
section:first-letter{
color:#00f;
font-size:30pt;
font-weight:bold;
}
/* p元素里第一個字母加粗、變藍 */
p:first-letter{
color:#00f;
font-size:40pt;
font-weight:bold;
}
</style>
</head>
<body>
<span>abc</span>
<section>其實我是一個程序員</section>
<p>瘋狂Java講義</p>
</body>
</html>
first-letter
:first-line
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :first-line </title>
<style type="text/css">
span {
display:block;
}
/* span元素里第一行文字的字體加大、變紅
由于span是內聯(lián)元素，因此需要先把span的display設為block
*/
span:first-line{
color:#f00;
font-size:20pt;
}
/* section元素里第一行文字的字體加大、變藍 */
section:first-line{
color:#00f;
font-size:30pt;
}
/* p元素里第一行文字的字體加大、變藍 */
p:first-line{
color:#00f;
font-size:30pt;
}
</style>
</head>
<body>
<span>abc<br/>xyz</span>
<section>去年今日此門中，<br/>
人面桃花相印紅。</section>
<p style="width:160px">瘋狂Java講義</p>
</body>
</html>
first-line
:before
:after
1.內容相關的屬性
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> content </title>
<style type="text/css">
/* 指定對于div元素內部的前端插入content屬性對應的內容 */
div>div:before{
content: 'CrazyIt:';
color:blue;
font-weight:bold;
background-color:gray;
}
</style>
</head>
<body>
<div>
<div>瘋狂Java講義</div>
<div>瘋狂Android講義</div>
<div>輕量級Java EE企業(yè)應用實戰(zhàn)</div>
</div>
</body>
</html>
2.插入圖像
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> content </title>
<style type="text/css">
/* 指定對于div元素內部的尾端插入content屬性對應的內容 */
div>div:after{
content: url("wjc.gif");
}
</style>
</head>
<body>
<div>
<div>瘋狂Java講義</div>
<div>瘋狂Android講義</div>
<div>輕量級Java EE企業(yè)應用實戰(zhàn)</div>
</div>
</body>
</html>
image.png
3.只插入部分元素
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> new document </title>
<style type="text/css">
/* 指定對于class屬性為no的div元素內部的尾端插入content屬性對應的內容 */
div>div.no:after{
content: url("buy.gif");
}
</style>
</head>
<body>
<div>
<div class="no">瘋狂Java講義</div>
<div class="no">瘋狂Android講義</div>
<div>輕量級Java EE企業(yè)應用實戰(zhàn)</div>
</div>
</body>
</html>
image.png
4.配合quotes屬性執(zhí)行插入
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 添加符號 </title>
<style type="text/css">
/* 定義open-quote為<<，close-quote為>> */
div>div{
quotes: "<<" ">>";
}
/* 指定為div的子div的前端插入open-quote */
div>div:before{
content: open-quote;
}
/* 指定為div的子div的尾端插入close-quote */
div>div:after{
content: close-quote;
}
</style>
</head>
<body>
<div>
<div>瘋狂Java講義</div>
<div>瘋狂Android講義</div>
<div>輕量級Java EE企業(yè)應用實戰(zhàn)</div>
</div>
</body>
</html>
image.png
5.配合counter-increment屬性添加編號
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 添加編號 </title>
<style type="text/css">
/* 為div的子div元素定義了一個計數(shù)器：mycounter */
div>div{
counter-increment: mycounter;
}
/* 在div的子div元素的前端插入mycounter計數(shù)器和一個點 */
div>div:before{
content: counter(mycounter) '.';
font-size: 20pt;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<div>瘋狂Java講義</div>
<div>瘋狂Android講義</div>
<div>輕量級Java EE企業(yè)應用實戰(zhàn)</div>
</div>
</body>
</html>
image.png
（4）CSS3.0新增的偽類選擇器
1.結構性偽類選擇器
:root 匹配HTML文檔的根元素<html>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :root偽選擇器 </title>
<style type="text/css">
:root {
background-color: #ccc;
}
body {
background-color: #888;
}
</style>
</head>
<body>
瘋狂Java講義<br/>輕量級Java EE企業(yè)應用實戰(zhàn)<br/>
瘋狂Ajax講義<br/>瘋狂XML講義<br/>
經典Java EE企業(yè)應用實戰(zhàn)<br/>瘋狂Android講義<br/>
</body>
</html>
image.png
:first-child 父元素的第一個子節(jié)點
:last-child 父元素的最后一個子節(jié)點
:nth-child 父元素的第n個子節(jié)點
:nth-last-child 父元素倒數(shù)第n個子節(jié)點
:only-child 父元素唯一的子節(jié)點
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :child </title>
<style type="text/css">
/* 定義對作為其父元素的第一個子節(jié)點的li元素起作用的CSS樣式 */
li:first-child {
border: 1px solid black;
}
/* 定義對作為其父元素的最后一個子節(jié)點的li元素起作用的CSS樣式 */
li:last-child {
background-color: #aaa;
}
/* 定義對作為其父元素的第2個子節(jié)點的li元素起作用的CSS樣式 */
li:nth-child(2){
color: #888;
}
/* 定義對作為其父元素的倒數(shù)第2個子節(jié)點的li元素起作用的CSS樣式 */
li:nth-last-child(2){
font-weight: bold;
}
/* 定義對作為其父元素的唯一的子節(jié)點的span元素起作用的CSS樣式 */
span:only-child {
font-size: 30pt;
font-family: "隸書";
}
</style>
</head>
<body>
<ol>
<li>www.crazyit.org</li>
<li>www.fkjava.org</li>
<li>www.facejava.org</li>
<li>瘋狂Java聯(lián)盟</li>
<li>瘋狂軟件教育中心</li>
</ol>
<ul>
<li id="java">瘋狂Java講義</li>
<li id="javaee">輕量級Java EE企業(yè)應用實戰(zhàn)</li>
<li id="ajax">瘋狂Ajax講義</li>
<li id="xml">瘋狂XML講義</li>
<li id="ejb">經典Java EE企業(yè)應用實戰(zhàn)</li>
<li><span id="android">瘋狂Android講義</span></li>
</ul>
<span>瘋狂Java聯(lián)盟</span>
</body>
</html>
image.png
:nth-child(odd/even)
:nth-last-child(odd/even)
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :nth-child </title>
<style type="text/css">
/* 定義對作為其父元素的奇數(shù)個子節(jié)點的li元素起作用的CSS樣式 */
li:nth-child(odd) {
margin: 10px;
border: 2px dotted black;
}
/* 定義對作為其父元素的偶數(shù)個子節(jié)點的li元素起作用的CSS樣式 */
li:nth-child(even) {
padding: 4px;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li id="java">瘋狂Java講義</li>
<li id="javaee">輕量級Java EE企業(yè)應用實戰(zhàn)</li>
<li id="ajax">瘋狂Ajax講義</li>
<li id="xml">瘋狂XML講義</li>
<li id="ejb">經典Java EE企業(yè)應用實戰(zhàn)</li>
<li id="android">瘋狂Android講義</li>
</ul>
</body>
</html>
image.png
:nth-child(xn+y)
:nth-last-child(xn+y)
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> child </title>
<style type="text/css">
/* 定義對作為其父元素的倒數(shù)第3n+1個（1、4、7）子節(jié)點
的li元素起作用的CSS樣式 */
li:nth-last-child(3n+1) {
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li id="java">瘋狂Java講義</li>
<li id="javaee">輕量級Java EE企業(yè)應用實戰(zhàn)</li>
<li id="ajax">瘋狂Ajax講義</li>
<li id="xml">瘋狂XML講義</li>
<li id="ejb">經典Java EE企業(yè)應用實戰(zhàn)</li>
<li id="android">瘋狂Android講義</li>
</ul>
</body>
</html>
image.png
:first-of-type 同級元素第一個
:last-of-type 同級元素最后一個
:nth-of-type 同級元素第n個
:nth-last-of-type 同級元素倒數(shù)第n個
:only-of-type 同級元素唯一一個元素
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :type </title>
<style type="text/css">
span {
display: block;
padding: 5px;
}
/* 匹配span選擇器，且是與它同類型、同級的兄弟元素中的第一個的CSS樣式 */
span:first-of-type{
border: 1px solid black;
}
/* 匹配span選擇器，且是與它同類型、同級的兄弟元素中的最后一個的CSS樣式 */
span:last-of-type {
background-color: #aaa;
}
/* 匹配span選擇器，且是與它同類型、同級的兄弟元素中的第2個的CSS樣式 */
span:nth-of-type(2){
color: #888;
}
/* 匹配span選擇器，且是與它同類型、同級的兄弟元素中的倒數(shù)第2個的CSS樣式 */
span:nth-last-of-type(2){
font-weight: bold;
}
</style>
</head>
<body>
<div>www.crazyit.org</div>
<span>www.fkjava.org</span>
<span>www.facejava.org</span>
<span>瘋狂Java聯(lián)盟</span>
<span>瘋狂軟件教育中心</span>
<hr/>
<div>
<div id="java">瘋狂Java講義</div>
<div id="javaee">輕量級Java EE企業(yè)應用實戰(zhàn)</div>
<span id="ajax">瘋狂Ajax講義</span>
<span id="xml">瘋狂XML講義</span>
<span id="ejb">經典Java EE企業(yè)應用實戰(zhàn)</span>
<span id="android">瘋狂Android講義</span>
<div id="struts">Struts 2.1權威指南</div>
</div>
</body>
</html>
image.png
:nth-of-type(odd/even)
:nth-last-of-type(odd/even)
:nth-of-type(xn+y)
:nth-last-of-type(xn+y)
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :nth-of-type </title>
<style type="text/css">
span {
display: block;
padding: 2px;
}
/* 匹配span選擇器，且是與它同類型、同級的兄弟元素中
的2n+1（1、3、5...）個的CSS樣式 */
span:nth-of-type(2n+1){
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<div id="java">瘋狂Java講義</div>
<div id="javaee">輕量級Java EE企業(yè)應用實戰(zhàn)</div>
<span id="ajax">瘋狂Ajax講義</span>
<span id="xml">瘋狂XML講義</span>
<span id="ejb">經典Java EE企業(yè)應用實戰(zhàn)</span>
<span id="android">瘋狂Android講義</span>
<span>瘋狂Java聯(lián)盟</span>
<div id="struts">Struts 2.1權威指南</div>
</div>
</body>
</html>
image.png
:empty 要求元素是空元素，不能包含子節(jié)點，也不能包含文本內容，空格也不允許
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :empty </title>
<style type="text/css">
/* 定義對空元素起作用的CSS樣式 */
:empty {
border: 1px solid black;
height: 60px;
}
</style>
</head>
<body>
<img src="wjc.gif" alt="crazyit.org"/>
<div></div>
<div> </div>
</body>
</html>
image.png
2.UI元素狀態(tài)偽類選擇器
：hover
: active
:focus
:enabled
:disabled
:checked
:default
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> UI元素狀態(tài)的偽類選擇器 </title>
<style type="text/css">
td {
border:1px solid black;
padding:4px;
}
/* 為處于鼠標懸停狀態(tài)的表格行定義CSS樣式 */
tr:hover {
background-color: #aaa;
}
/* 為處于激活狀態(tài)的input元素定義CSS樣式 */
input:active {
background-color: blue;
}
/* 為得到焦點的任意元素定義CSS樣式 */
:focus {
text-decoration: underline;
}
/* 為可用的任意元素定義CSS樣式 */
:enabled{
font-family: "黑體";
font-weight: bold;
font-size:14pt;
}
/* 為不可用的任意元素定義CSS樣式 */
:disabled{
font-family: "隸書";
font-size:14pt;
}
/* 為處于勾選狀態(tài)的任意元素定義CSS樣式 */
:checked {
outline: red solid 5px;
}
/* 為頁面打開時處于勾選狀態(tài)的任意元素定義CSS樣式 */
:default {
outline: #bbb solid 5px;
}
</style>
</head>
<body>
<table style="width:400px;border-collapse:collapse">
<tr>
<td>瘋狂Java講義</td><td>109</td>
</tr>
<tr>
<td>輕量級Java EE企業(yè)應用實戰(zhàn)</td><td>89</td>
</tr>
<tr contentEditable="true">
<td>瘋狂Android講義</td><td>89</td>
</tr>
</table>
<button disabled>不可用的按鈕</button>
<input type="text" disabled value="不可用的文本框"/>
<button>可用的按鈕</button>
<input type="text" value="可用的文本框"/>
男：<input type="radio" value="male" name="gender"/>
女：<input type="radio" value="female" name="gender"/>
未知：<input type="radio" checked value="unknown" name="gender"/>
</body>
</html>
image.png
:read-only
:read-write
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> UI元素狀態(tài)的偽類選擇器 </title>
<style type="text/css">
td {
border:1px solid black;
padding:4px;
}
/* 為處于只讀狀態(tài)的元素設置背景色 */
:read-only {
background-color: #eee;
}
/* 為處于讀寫狀態(tài)的元素設置背景色 */
:read-write {
background-color: #8e8;
}
/* 專為基于Gecko內核瀏覽器指定CSS樣式：
為處于只讀狀態(tài)的元素設置背景色 */
:-moz-read-only {
background-color: #eee;
}
/* 專為基于Gecko內核瀏覽器指定CSS樣式：
為處于讀寫狀態(tài)的元素設置背景色 */
:-moz-read-write {
background-color: #8e8;
}
</style>
</head>
<body>
<table style="width:400px;border-collapse:collapse">
<tr>
<td>瘋狂Java講義</td><td>109</td>
</tr>
<tr>
<td>輕量級Java EE企業(yè)應用實戰(zhàn)</td><td>89</td>
</tr>
<tr contentEditable="true">
<td>瘋狂Android講義</td><td>89</td>
</tr>
</table>
<input type="text" readonly value="只讀的文本框"/>
<input type="text" value="可讀寫的文本框"/>
</body>
</html>
image.png
3.瀏覽器專屬的屬性
-ms- Microsoft
-moz- Mozilla
-o- Opera
-webkit- Webkit
::selection 用于匹配指定元素中被選中的內容
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> UI元素狀態(tài)的偽類選擇器 </title>
<style type="text/css">
td {
border:1px solid black;
padding:4px;
}
/* 為有內容被選擇的元素設置CSS樣式 */
::selection {
background-color: red;
color: white;
}
/* 專為基于Gecko內核瀏覽器指定CSS樣式：
為有內容被選擇的元素設置CSS樣式 */
::-moz-selection {
background-color: red;
color: white;
}
</style>
</head>
<body>
<table style="width:400px;border-collapse:collapse">
<tr>
<td>瘋狂Java講義</td><td>109</td>
</tr>
<tr>
<td>輕量級Java EE企業(yè)應用實戰(zhàn)</td><td>89</td>
</tr>
<tr contentEditable="true">
<td>瘋狂Android講義</td><td>89</td>
</tr>
</table>
<input type="text" readonly value="只讀的文本框"/>
<input type="text" value="可讀寫的文本框"/>
</body>
</html>
image.png
:target 要求元素必須是命名錨點的目標
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :target </title>
<style type="text/css">
:target{
background-color: #ff0;
}
</style>
</head>
<body>
<p id="menu">
<a href="#java">瘋狂Java講義</a> |
<a href="#ee">輕量級Java EE企業(yè)應用實戰(zhàn)</a> |
<a href="#android">瘋狂Android講義</a> |
<a href="#ejb">經典Java EE企業(yè)應用實戰(zhàn)</a>
</p>
<div id="java">
<h2>瘋狂Java講義</h2>
<p>本書詳細介紹了Java語言各方面的內容。</p>
</div>
<div id="ee">
<h2>輕量級Java EE企業(yè)應用實戰(zhàn)</h2>
<p>本書詳細介紹Struts 2、Spring 3、Hibernate三個框架整合開發(fā)的知識</p>
</div>
<div id="android">
<h2>瘋狂Android講義</h2>
<p>本書詳細介紹了Android應用開發(fā)的知識。</p>
</div>
<div id="ejb">
<h2>經典Java EE企業(yè)應用實戰(zhàn)</h2>
<p>本書詳細介紹JSF 、EJB 3、JPA等Java EE相關的知識</p>
</div>
</body>
</html>
image.png
:not
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :child </title>
<style type="text/css">
li:not(#ajax) {
color: #999;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li id="java">瘋狂Java講義</li>
<li id="javaee">輕量級Java EE企業(yè)應用實戰(zhàn)</li>
<li id="ajax">瘋狂Ajax講義</li>
<li id="xml">瘋狂XML講義</li>
<li id="android">瘋狂Android講義</li>
</ul>
</body>
</html>
image.png
（5）.在腳本中修改樣式
obj.style.屬性名 = 屬性值
obj.className = class選擇器
1.隨機改變頁面的背景色
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>隨機改變頁面背景色</title>
<script type="text/javascript">
function changeBg()
{
// 將背景色的值定義成空字符串
var bgColor="";
// 循環(huán)6次，生成一個隨機的六位數(shù)
for (var i = 0 ; i < 6 ; i++)
{
bgColor += "" + Math.round(Math.random() * 9);
}
// 將隨機生成的背景顏色值賦給頁面的背景色。
document.body.style.backgroundColor="#" + bgColor;
}
// 為頁面的單擊事件綁定事件處理函數(shù)
document.onclick = changeBg;
</script>
</head>
<body>
</body>
</html>
2.動態(tài)增加立體效果
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>立體效果</title>
<script type="text/javascript">
function chg()
{
document.getElementById("up").className="solid";
}
</script>
<style type="text/css">
/* 對所有class屬性值為solid的元素起作用的CSS定義 */
.solid {
width:160px;
text-align:center;
border-right: #222 3px solid;
border-top: #ddd 3px solid;
border-left: #ddd 3px solid;
border-bottom: #222 3px solid;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" onclick='chg();' value="增加立體效果" />
<div id="up">有立體效果的層</div>
</body>
</html>
image.png
