CSS層疊樣式表
- CSS代碼寫在哪？
- 內(nèi)聯(lián)樣式表：HTML標簽內(nèi)
<p style="color:blue;">落霞與孤鶩齊飛，秋水共長天一色</p>
- 內(nèi)部樣式表：head標簽內(nèi)，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選擇器：根據(jù)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;
寬度設定失效：
行內(nèi)框：前后不換行，但能指定寬度[通過display?: inline-block指定]
其實世上本沒有路，<div?id="widthDiv">走的人多了</div>，也便成了路
轉為行內(nèi)框：display: inline-block;
在行內(nèi)，前后無換行，但是能夠設置寬度：
- CSS定位機制
- 文檔流
- 行框：按順序水平擺放，放不下出現(xiàn)滾動條
- 塊框：按順序垂直擺放，放不下出現(xiàn)滾動條
- 相對定位，原來在文檔流中的位置仍然保留，當前位置是相對于原始位置偏移后的結果
- 文檔流
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;
}
- 浮動：脫離文檔流，向上浮起一層，所有同一容器內(nèi)的浮動元素根據(jù)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;
