CSS三種樣式
- 行間樣式表
<div style="width:200px;height:100px;background:red">塊</div>
- 內部樣式表
#div1{
/*同一個頁面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 | 內填充 | px |
| margin | 外邊距 | px |
/*字體字號必須添加,否則文字樣式會不生效
文字右邊會默認空出1像素
不同字體空格所占用的字符大小是不一樣的
可視寬 = boder+pading+width;
pading位于內容之外 邊框之內 顯示背景顏色
margin位于元素之外 不顯示背景顏色 相鄰元素之間的margin是會重疊在一起的 子元素margin會傳遞到父級元素
div默認中文下自動換行,英文狀態下不會自動換行
*/
常用標簽
超鏈接
<!-- _blank新標簽頁打開,_self本標簽頁打開 -->
<!-- a標簽的樣式需要單獨設置樣式 -->
<!-- a標簽不可以再嵌套a標簽 -->
<a href="頁面地址\錨點\壓縮包" target="_blank">顯示文字</a>
base標簽
<base target="_blank">;
span標簽
<!-- span標簽和a標簽都是不換行的 -->
<span id="span1">顯示</span>
其他常用標簽
| 標簽 | 名稱 | 意義 |
|---|---|---|
| <section></section> | 板塊標簽 | 板塊標簽 |
| <header></header> | 頭部標簽 | 頭部標簽 |
| <footer></footer> | 尾部標簽 | 尾部標簽 |
| <strong></strong> | 加強標簽 | 加粗文字 |
| <ul></ul> | 列表標簽 | 無序列表 |
| <ol></ol> | 列表標簽 | 有序文字 |
| <li></li> | 列表項標簽 | 一條列表項 |
| <p></p> | 段落標簽 | 修飾文字 |
| <em></em> | 加強標簽 | 傾斜文字 |
常用選擇符及優先級
id選擇器
/*類選擇器可以同時支持多種樣式*/
<div id="nam"></div>
#id{
width: 200px;
height: 100px;
background: red;
}
類選擇器
/*類選擇器可以同時支持多種樣式*/
<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;
}
選擇器的優先級
- 選擇器的優先級一致時,后面的樣式將會覆蓋前面的優先級
行間樣式>id>類選擇>類型選擇>通配
塊和內嵌
塊:1. 獨占一行 2. 支持所有樣式
內嵌:1. 可以一行顯示 2. 不支持寬高,對margin padding支持也有問題 3. 寬度由內容撐起 4.代碼換行會被解析
