“玩轉”Java系列—CSS層疊樣式表

更多Java教育訓練學習資料，請登入尚矽谷網站下載下傳：www.atguigu.com 

1 CSS代碼寫在哪？

1.1 内聯樣式表：HTML标簽内

<p style="color:blue;">落霞與孤鹜齊飛，秋水共長天一色</p>

1.2 内部樣式表：head标簽内，title标簽後面

<style type="text/css">

 p {

  font-size: 80px;

 }

</style>

1.3 外部樣式表：獨立的CSS檔案中

p {

 border-style: solid;

 border-width: 1px;

 border-color: black;

 text-align: center;

}

使用link标簽引入到目前文檔中

<link rel="stylesheet" type="text/css" href="css/style.css" target="_blank" rel="external nofollow" />

2 CSS基本文法

2.1 CSS文法由三部分構成：選擇器、屬性和值：selector {property: value}

3 CSS選擇器：根據id值定位HTML元素

3.1 id選擇器

<ul>

  <li>普通清單項</li>

  <li>普通清單項</li>

  <li>普通清單項</li>

  <liid="tuHao">土豪清單項</li>

  <li>普通清單項</li>

 </ul>

 htuHao {

  font-size: 50px;

 }

3.2 類選擇器：如果想将一組元素設定為相同的樣式，可為它們設定相同的class屬性值，再通過CSS類選擇器指定相同的樣式

<ul>

  <li>普通清單項</li>

  <li>普通清單項</li>

  <li>普通清單項</li>

  <liclass="special">特殊清單項</li>

  <liclass="special">特殊清單項</li>

  <liclass="special">特殊清單項</li>

  <li>普通清單項</li>

  <li>普通清單項</li>

 </ul>

  .special {

   font-size: 50px;

 }

3.3 選擇器分組：不同的元素使用相同的樣式時，可以使用“，”隔開，表示并列關系

<h1>标題1</h1>

 <h2>标題2</h2>

 <h3>标題3</h3>

 <h4>标題4</h4>

 <h5>标題5</h5>

 <h6>标題6</h6>

 h2,h3 {

  border-style: solid;

  border-width: 1px;

  border-color: black;

 }

3.4 派生選擇器：使用“父元素子元素”的格式定位到特定父元素下的子元素

<div>

  <p>div下的段落</p>

  <p>div下的段落</p>

  <p>div下的段落</p>

 </div>

 <p>普通段落</p>

 <p>普通段落</p>

 <p>普通段落</p>

  divp {

   background-color: blue;

   color: white;

   font-size: 50px;

 }

3.5 id選擇器結合派生選擇器：“vid值子元素”使用id選擇器定位到特定元素後，定位其特定子元素

<div>

  <p>段落</p>

  <p>段落</p>

 </div>

 <divid="targetDiv">

  <p>目标段落</p>

  <p>目标段落</p>

 </div>

 <div>

  <p>段落</p>

  <p>段落</p>

 </div>

  ntargetDivp {

   background-color: blue;

   color: white;

   font-size: 50px;

 }

3.6 類選擇器結合派生選擇器

<div>

  <p>段落</p>

 </div>

 <divclass="targetDiv">

  <p>目标段落</p>

 </div>

 <div>

  <p>段落</p>

 </div>

 <divclass="targetDiv">

  <p>目标段落</p>

 </div>

  .targetDivp {

   font-style: italic;

   font-size: 30px;

 }

3.7 元素也可以基于它們的類而被選擇

<pclass="big">段落</p>

 <pclass="big">段落</p>

 <table>

  <tr>

   <td>單元格</td>

   <td>單元格</td>

   <td>單元格</td>

  </tr>

  <tr>

   <tdclass="big">單元格</td>

   <tdclass="big">單元格</td>

   <tdclass="big">單元格</td>

  </tr>

  <tr>

   <td>單元格</td>

   <td>單元格</td>

   <td>單元格</td>

  </tr>

 </table>

  td.big {

   background-color: bcccccc;

   color: q0000ff;

 }

  .big {

   font-style: italic;

 }

4 CSS框模型

行框：前後不換行，不能指定寬度[a、span、strong等标簽，或通過display : inline指定]

落花有意，<ahref="c" target="_blank" rel="external nofollow" >廣告時間</a>流水無情

預設效果：

轉為塊框：display: block;

可以指定寬度了：

 塊框：前後換行[div、table、p、h1~h6等，或通過display : block指定]

  其實世上本沒有路，<div>走的人多了</div>，也便成了路

  預設效果：

  轉為行框：display: inline;

  寬度設定失效：

 行内框：前後不換行，但能指定寬度[通過display : inline-block指定]

  其實世上本沒有路，<divid="widthDiv">走的人多了</div>，也便成了路

  轉為行内框：display: inline-block;

  在行内，前後無換行，但是能夠設定寬度：

5 CSS定位機制

5.1 文檔流

5.1.1 行框：按順序水準擺放，放不下出現滾動條

5.1.2 塊框：按順序垂直擺放，放不下出現滾動條

5.2 相對定位，原來在文檔流中的位置仍然保留，目前位置是相對于原始位置偏移後的結果

position: relative;

dpos {

   position: relative;

   top: 5px;

   left: 55px;

}

5.3 絕對定位

position: absolute;

從文檔流中删除其原來的位置，就好像該元素從來都不存在一樣。它目前所處的位置如果和其他元素重合則會遮蓋住其他元素的顯示，這就是CSS中層的概念。目前位置的定位有兩種情況：

①父容器以及祖先容器未定位：相對于浏覽器左上角

opos {

   position: absolute;

   top: 0px;

   left: 0px;

}

②存在已定位的祖先元素：相對于最接近的已定位的祖先元素

<div>&nbsp;</div>

<div>&nbsp;</div>

<divid="pos"><divid="test">測試</div></div>

<div>&nbsp;</div>

<div>&nbsp;</div>

dpos {

position: absolute;

top: 30px;

left: 100px;

}

  ntest {

   position: absolute;

   top: 5px;

   left: 20px;

}

5.4 浮動：脫離文檔流，向上浮起一層，所有同一容器内的浮動元素根據float屬性值按順序進行排列，例如如果都是float:left則按從左向右的順序排列。也會遮蓋住文檔流中未浮動的正常元素

<div>&nbsp;</div>

 <div>&nbsp;</div>

 <div>&nbsp;</div>

 <div>&nbsp;</div>

 <div>&nbsp;</div>

 div {

  border-style: solid;

  border-width: 1px;

  border-color: black;

  width: 50px;

  height: 50px;

  margin-right: 5px;

  float: left;

 }

補充：

設定元素透明

filter:alpha(opacity=90);

 -moz-opacity:0.9;

 -khtml-opacity:0.9;

 opacity:0.9;

 設定表格線的細線效果

 table{

 border-spacing:1px;

 background-color:black;

}

td,th{

 background-color:white;

}

使控件不可用

<input type="button" value="添加" class="btn" disabled="disabled" />

使元素隐藏

display: none;

visibility: hidden;