java（十六） CSS
CSS
CSS是層疊樣式表（Cascading Style Sheets），用來定義網頁的實現效果，可以解決html代碼
對樣式定義的重復，提高了後期樣式代碼的可維護性，並增強了網頁的現實效果功能。
簡單說：css將網頁內容和顯示樣式進行了分離，提高了顯示功能。
那麽，css和html是如何在網頁代碼中結合的呢？主要有四種方式：
1.每個html標簽中都有一個style樣式屬性。該屬性的值就是css代碼。
比如下面這行代碼，前面是背景色，後面是文字顏色，多個屬性之間用分號隔開。
<div style="background-color:#06F;color:#F00">這是個div區域</div>
2.使用style標簽的方式。這種樣式標簽一般都要提前加載好，所以都寫在head標簽內，而不是body標簽內。
<style type="text/css">
div{
background-color:#06F;
color:#F00
}
</style>
3.把樣式代碼封裝成.css文件導入到html代碼中的方式。
直接把div,span,或者p的樣式寫在.css文件中，再創建一個名為1.css文件，
裏面直接導入前面的三個.css文件。
@import url(div.css);
@import url(span.css);
@import url(p.css);
最後，再在html代碼中關聯這個文件即可。直接把html文件的style標簽的代碼寫成
@import url(1.css);
即可。這樣修改樣式時就不用修改html代碼了，直接改.css文件就行。很方便，而且復用性高。
4.和方式三類似，直接用link標簽導入1.css文件
<link rel="stylesheet" href="1.css" type="text.css" />
不過方式三是用css代碼導入的，這個是用html代碼導入的。
樣式的優先級：從上到下，從外到內，優先級由低到高。
css代碼的格式：
選擇器名稱{屬性名：屬性值；屬性名：屬性值；......}
選擇器？
就是指定css要作用的標簽，那個標簽的名稱就是選擇器。意為選擇哪個容器
選擇器有三種：
a)html標簽名選擇器，使用的就是html的標簽名。
b)class選擇器，使用的是標簽中的class屬性。
c)id選擇器，使用的是標簽中的id屬性。
比如要定義第二行div的樣式，就先給他定義一個類，
<div>這是一個區域</div>
<div class="haha">這是另一個區域</div>
然後在style標簽中直接用class選擇器就行了。
<style type="text/css">
div.haha{
background-color:#06F;
color:#F00；
}
</style>
上面的選擇器名稱div.haha也可以寫成.haha。這樣就會把所有類名為haha的無論是div還是span都變成定義的樣式。
ID選擇器和class選擇器在用法上是相同的，只不過id選擇器名稱要寫成div#qq而不是div.qq
但是通常id的取值在頁面中是唯一的，因為該屬性除了給css使用，還可以被javascript使用。
id通常都是為了去標識頁面中一些特定的區域而使用的。
優先級：標簽選擇器<類選擇器<id選擇器<style屬性。
擴展選擇器：
a)關聯選擇器 （選擇器中的選擇器）
span b img{屬性名：屬性值；屬性名：屬性值；......}
b)組合選擇器（對多種選擇器進行相同樣式的定義）
div,span{屬性名：屬性值；屬性名：屬性值；......}
c）偽元素選擇器（偽元素：超鏈接的狀態）
未訪問： a:link{屬性名：屬性值；屬性名：屬性值；......}
訪問後效果： a:visited{屬性名：屬性值；屬性名：屬性值；......}
鼠標懸停： a:hover{屬性名：屬性值；屬性名：屬性值；......}
點擊效果： a:active{屬性名：屬性值；屬性名：屬性值；......}
練習：
<html>
<head>
<title>這是一個網頁的標題。</title>
<style type="txt/css">
ul{
list-style-image:url(1.bmp)
}
table{
border-bottom:#0c0 double 3px;
border-left:#f00 solid 3px;
border-right:#ff0 dashed 3px;
border-top:#0c0 grove 3px;
width:500px
}
table td{
border:#06f dotted 2px;
padding:20px;
}
</style>
</head>
<body>
<ul>
<li>無序項目列表</li>
<li>無序項目列表</li>
<li>無序項目列表</li>
</ul>
<table>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
</body>
</html>
盒子模型
邊框：border-top
border-bottom
border-left
border-right
內邊距：padding-top 。。。。
外邊距：margin
漂浮：float：left
float：right
定位：position：absolute
position：relative
練習：圖文混排
<html>
<head>
<title>這是一個網頁的標題。</title>
<style type="text/css">
#imgtext{
border:#06f dashed 2px;
width:250px;
}
#img{
float:right;
}
#text{
color:#f60;
font-family:"華文隸書";
}
</style>
</head>
<body>
<div id="imgtext">
<div id="img">
<img src="E:\英雄聯盟\英雄聯盟\Air\assets\storeImages\layout\g-rp.jpg" />
</div>
<div id="text">
這是一個圖片。哈哈哈哈哈哈！
這是一個圖片。哈哈哈哈哈哈！
這是一個圖片。哈哈哈哈哈哈！
這是一個圖片。哈哈哈哈哈哈！
這是一個圖片。哈哈哈哈哈哈！
這是一個圖片。哈哈哈哈哈哈！
</div>
</div>
</body>
</html>
練習：圖片定位
<html>
<head>
<title>這是一個網頁的標題。</title>
<style type="text/css">
#text{
color:f60;
font-size:30px;
position:absolute;
top:200;
left:100;
}
#imgtext{
border:#f60 dotted 2px;
width:1500px;
position:absolute;
top:100;
left:400;
<!--
給整個圖文區域加一個絕對定位，這樣文字的位置就是相對於圖片的了，
就不會出現圖片移動了，文字沒動的情況，說白了，這樣就把文字和圖片粘一塊了。
-->
}
</style>
</head>
<body>
<div id="imgtext">
<div id="img">
<img src="E:\英雄聯盟\英雄聯盟\Air\assets\storeImages\layout\not_found.jpg" height="700" width="1200"/>
</div>
<div id="text">
是時候展現真正的技術了！
</div>
</div>
</body>
</html>
本文出自 “12946849” 博客，請務必保留此出處http://12956849.blog.51cto.com/12946849/1956706
java（十六） CSS