java開發技術基礎篇之CSS層疊樣式表

• CSS代碼寫在哪？
  • 內聯樣式表：HTML標籤內

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

• 內部樣式表：head標籤內，title標籤後面

<style type=」text/css」>

p {

font-size: 80px;

}

</style>

• 外部樣式表：獨立的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」 />

• CSS基本語法
  • CSS語法由三部分構成：選擇器、屬性和值：selector {property: value}

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

<ul>

<li>普通列表項</li>

<li>普通列表項</li>

<li>普通列表項</li>

<li id=「tuHao」>土豪列表項</li>

<li>普通列表項</li>

</ul>

#tuHao {

font-size: 50px;

}

• 類選擇器：若是想將一組元素設定爲相同的樣式，可爲它們設置相同的class屬性值，再經過CSS類選擇器指定相同的樣式

<ul>

<li>普通列表項</li>

<li>普通列表項</li>

<li>普通列表項</li>

<li class=「special」>特殊列表項</li>

<li class=「special」>特殊列表項</li>

<li class=「special」>特殊列表項</li>

<li>普通列表項</li>

<li>普通列表項</li>

</ul>

.special {

font-size: 50px;

}

• 選擇器分組：不一樣的元素使用相同的樣式時，能夠使用「，」隔開，表示並列關係

<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;

}

• 派生選擇器：使用「父元素 子元素」的格式定位到特定父元素下的子元素

<div>

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

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

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

</div>

<p>普通段落</p>

<p>普通段落</p>

<p>普通段落</p>

div p {

background-color: blue;

color: white;

font-size: 50px;

}

• 派生選擇器：使用「父元素 子元素」的格式定位到特定父元素下的子元素

<div>

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

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

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

</div>

<p>普通段落</p>

<p>普通段落</p>

<p>普通段落</p>

div p {

background-color: blue;

color: white;

font-size: 50px;

}

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

<div>

<p>段落</p>

</div>

<div class=「targetDiv」>

<p>目標段落</p>

</div>

<div>

<p>段落</p>

</div>

<div class=「targetDiv」>

<p>目標段落</p>

</div>

.targetDiv p {

font-style: italic;

font-size: 30px;

}

• 元素也能夠基於它們的類而被選擇

<p class=「big」>段落</p>

<p class=「big」>段落</p>

<table>

<tr>

<td>單元格</td>

<td>單元格</td>

<td>單元格</td>

</tr>

<tr>

<td class=「big」>單元格</td>

<td class=「big」>單元格</td>

<td class=「big」>單元格</td>

</tr>

<tr>

<td>單元格</td>

<td>單元格</td>

<td>單元格</td>

</tr>

</table>

   td.big {

background-color: #cccccc;

color: #0000ff;

}

.big {

font-style: italic;

}

CSS框模型

行框：先後不換行，不能指定寬度[a、span、strong等標籤，或經過display : inline指定]

落花有意，<a href=「#」>廣告時間</a>流水無情

默認效果：

轉爲塊框：display: block;

能夠指定寬度了：

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

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

默認效果：

轉爲行框：display: inline;

寬度設定失效：

行內框：先後不換行，但能指定寬度[經過display : inline-block指定]

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

轉爲行內框：display: inline-block;

在行內，先後無換行，可是可以設置寬度：

 

• CSS定位機制
  • 文檔流
    • 行框：按順序水平擺放，放不下出現滾動條
    • 塊框：按順序垂直襬放，放不下出現滾動條
  • 相對定位，原來在文檔流中的位置仍然保留，當前位置是相對於原始位置偏移後的結果

position: relative;

#pos {

position: relative;

top: 5px;

left: 55px;

}

• 絕對定位

position: absolute;

從文檔流中刪除其原來的位置，就好像該元素歷來都不存在同樣。它當前所處的位置若是和其餘元素重合則會遮蓋住其餘元素的顯示，這就是CSS中層的概念。當前位置的定位有兩種狀況：

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

#pos {

position: absolute;

top: 0px;

left: 0px;

}

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

<div> </div>

<div> </div>

<div id=「pos」><div id=「test」>測試</div></div>

<div> </div>

<div> </div>

#pos {

position: absolute;

top: 30px;

left: 100px;

}

  #test {

position: absolute;

top: 5px;

left: 20px;

}

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

<div> </div>

<div> </div>

<div> </div>

<div> </div>

<div> </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;

轉載原文連接：http://www.atguigu.com/jsfx/1245.html