CSS三種樣式
- 行間樣式表
<div style="width:200px;height:100px;background:red">塊</div>
- 內(nèi)部樣式表
#div1{
/*同一個(gè)頁(yè)面id不能重名*/
style="width:200px;height:100px;background:red"
}
- 外部樣式表
<link rel="stylesheet" href="鏈接文件地址"/>
CSS基本樣式
| 代碼 | 意義 | 單位 |
|---|---|---|
| width | 寬度 | px |
| height | 高度 | px |
| border | 邊框 | width color style(solid dashed dotted) |
| background | 背景 | color url() repeat position attachment |
| font | 文字 | size weight(bold normal) style line-height family text-indent color text-align text-decoration line-spacing word-spacing |
| pading | 內(nèi)填充 | px |
| margin | 外邊距 | px |
/*字體字號(hào)必須添加,否則文字樣式會(huì)不生效
文字右邊會(huì)默認(rèn)空出1像素
不同字體空格所占用的字符大小是不一樣的
可視寬 = boder+pading+width;
pading位于內(nèi)容之外 邊框之內(nèi) 顯示背景顏色
margin位于元素之外 不顯示背景顏色 相鄰元素之間的margin是會(huì)重疊在一起的 子元素margin會(huì)傳遞到父級(jí)元素
div默認(rèn)中文下自動(dòng)換行,英文狀態(tài)下不會(huì)自動(dòng)換行
*/
常用標(biāo)簽
超鏈接
<!-- _blank新標(biāo)簽頁(yè)打開,_self本標(biāo)簽頁(yè)打開 -->
<!-- a標(biāo)簽的樣式需要單獨(dú)設(shè)置樣式 -->
<!-- a標(biāo)簽不可以再嵌套a標(biāo)簽 -->
<a href="頁(yè)面地址\錨點(diǎn)\壓縮包" target="_blank">顯示文字</a>
base標(biāo)簽
<base target="_blank">;
span標(biāo)簽
<!-- span標(biāo)簽和a標(biāo)簽都是不換行的 -->
<span id="span1">顯示</span>
其他常用標(biāo)簽
| 標(biāo)簽 | 名稱 | 意義 |
|---|---|---|
| <section></section> | 板塊標(biāo)簽 | 板塊標(biāo)簽 |
| <header></header> | 頭部標(biāo)簽 | 頭部標(biāo)簽 |
| <footer></footer> | 尾部標(biāo)簽 | 尾部標(biāo)簽 |
| <strong></strong> | 加強(qiáng)標(biāo)簽 | 加粗文字 |
| <ul></ul> | 列表標(biāo)簽 | 無序列表 |
| <ol></ol> | 列表標(biāo)簽 | 有序文字 |
| <li></li> | 列表項(xiàng)標(biāo)簽 | 一條列表項(xiàng) |
| <p></p> | 段落標(biāo)簽 | 修飾文字 |
| <em></em> | 加強(qiáng)標(biāo)簽 | 傾斜文字 |
常用選擇符及優(yōu)先級(jí)
id選擇器
/*類選擇器可以同時(shí)支持多種樣式*/
<div id="nam"></div>
#id{
width: 200px;
height: 100px;
background: red;
}
類選擇器
/*類選擇器可以同時(shí)支持多種樣式*/
<div class="name name2"></div>
.name{
width: 200px;
height: 100px;
background: red;
}
類型選擇器
div{
width: 200px;
height: 100px;
background: red;
}
包含選擇器
.name{
width: 200px;
height: 100px;
background: red;
}
群組選擇器
div,span{
width: 200px;
height: 100px;
background: red;
}
通配符選擇器
*{
width: 200px;
height: 100px;
background: red;
}
選擇器的優(yōu)先級(jí)
- 選擇器的優(yōu)先級(jí)一致時(shí),后面的樣式將會(huì)覆蓋前面的優(yōu)先級(jí)
行間樣式>id>類選擇>類型選擇>通配
塊和內(nèi)嵌
塊:1. 獨(dú)占一行 2. 支持所有樣式
內(nèi)嵌:1. 可以一行顯示 2. 不支持寬高,對(duì)margin padding支持也有問題 3. 寬度由內(nèi)容撐起 4.代碼換行會(huì)被解析
